css fix - overflow / elipsis etc

css fix - z-indicies incorrect
prep for better spreadsheet interactions.

Author: Nick G

src/components/PositionalBarplot.scss

@@ -25,7 +25,7 @@
 
   .barplot-tooltip-holder{
     margin: 0;
-    z-index: 1002;
+    z-index: 1800;
 
     .bar-position-textblock {
       pointer-events: all;

src/components/SequenceLogo.scss

@@ -16,7 +16,7 @@
 
   .sequence-logo-tooltip-container {
     margin: 0;
-    z-index: 1002;
+    z-index: 1800;
 
     .logo-tooltip {
       pointer-events: all;

src/components/alignment-metadata/AlignmentSpreadsheet.scss

@@ -84,14 +84,16 @@
         display: grid;
         align-items: stretch;
         > * {
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          overflow: hidden;
           border-bottom: 0.5px solid #e0e0e0;
           border-bottom: 0.5px solid #e0e0e0;
           box-sizing: border-box;
           display: grid;
           align-items: center;
+          > * {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
         }
       }
 

src/components/alignment-metadata/AlignmentSpreadsheetHook.tsx

@@ -2,7 +2,7 @@
  * Base hook for a spreadsheet to show annotations.
  */
 import "./AlignmentSpreadsheet.scss";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 
 import { 
   generateUUIDv4
@@ -42,6 +42,7 @@ export interface IAlignmentSpreadsheetProps {
   rowHeight: number;
   fontSize: number;
   //reorderable: boolean;
+  //minWidthPxUpdateRequest: (minSizePx: number) => boolean;
 
   columns: {[key: string]: ISpreadsheetColumn};
   maxPinnedTableWidth?: number;
@@ -407,10 +408,11 @@ export function AlignmentSpreadsheet(
   ]);
 
   const pinnedGridTemplateColumns = pinnedTableActualWidth > 0
+    //? `${pinnedTableActualWidth}px`
     ? `minmax(100px, ${pinnedTableActualWidth}px)`
     : "";
   const unpinnedGridTemplateColumns = unpinnedTableActualWidth > 0
-    ? ` minmax(100px, ${unpinnedTableActualWidth}px)`
+    ? `minmax(100px, ${unpinnedTableActualWidth}px)`
     : " 0px";
   const gridTemplateAreas = `"${pinnedTableActualWidth > 0 ? "pinned-table " : "" }unpinned-table"`;
 

src/components/alignment-metadata/AlignmentSpreadsheetTableHook.tsx

@@ -202,7 +202,7 @@ export function AlignmentSpreadsheetTable(props: IAlignmentSpreadsheetTableProps
                         return (
                           <div key={rowIdx} 
                             style={{padding: `0 ${leftRightMarginInTableCells}px`}}>
-                              {data[rowIdx]}
+                              <span>{data[rowIdx]}</span>
                           </div> )
                       }) 
                     }

src/components/layout/AlignmentViewerLayout.scss

@@ -8,7 +8,7 @@
   right: 0;
   opacity: 0;
   background-color: white;
-  z-index: 1800;
+  z-index: 1801;
   cursor: col-resize;
 }
 .full-screen-resize-dragger.horizontal{