fix: correct overlay layer positioning and normalize font sizes (#18)

Author: markwylde

src/lib/MassiveTable.tsx

@@ -977,7 +977,11 @@ export function MassiveTable<Row = unknown>(props: MassiveTableProps<Row>) {
             );
           })}
           {draggingColIndex !== null && (
-            <div className={classes.overlayLayer} aria-hidden>
+            <div
+              className={classes.overlayLayer}
+              aria-hidden
+              style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 4 }}
+            >
               {overlayMeta.widths.map((w, j) => {
                 const isDataCol = hasInlineGroup ? j > 0 : true;
                 const dataIdx = hasInlineGroup ? j - 1 : j;
@@ -987,14 +991,24 @@ export function MassiveTable<Row = unknown>(props: MassiveTableProps<Row>) {
                   <div
                     key={`hdr-ov:${hasInlineGroup && j === 0 ? '__inline' : JSON.stringify(columnsOrdered[dataIdx]?.path)}`}
                     className={classes.overlayCol}
-                    style={{ left: overlayMeta.lefts[j], width: w }}
+                    style={{
+                      position: 'absolute',
+                      top: 0,
+                      bottom: 0,
+                      left: overlayMeta.lefts[j],
+                      width: w,
+                      background: 'var(--massive-table-dim-overlay, rgba(0, 0, 0, 0.1))',
+                    }}
                   />
                 );
               })}
             </div>
           )}
         </div>
-        <div className={classes.rows} style={{ height: contentHeight, width: totalWidth }}>
+        <div
+          className={classes.rows}
+          style={{ height: contentHeight, width: totalWidth, position: 'relative' }}
+        >
           {Array.from({ length: Math.max(0, end - start) }).map((_, i) => {
             const rowIndex = start + i;
             const row = cache.rows[rowIndex];
@@ -1204,7 +1218,11 @@ export function MassiveTable<Row = unknown>(props: MassiveTableProps<Row>) {
             );
           })}
           {draggingColIndex !== null && (
-            <div className={classes.overlayLayer} aria-hidden>
+            <div
+              className={classes.overlayLayer}
+              aria-hidden
+              style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 4 }}
+            >
               {overlayMeta.widths.map((w, j) => {
                 const isDataCol = hasInlineGroup ? j > 0 : true;
                 const dataIdx = hasInlineGroup ? j - 1 : j;
@@ -1214,7 +1232,14 @@ export function MassiveTable<Row = unknown>(props: MassiveTableProps<Row>) {
                   <div
                     key={`row-ov:${hasInlineGroup && j === 0 ? '__inline' : JSON.stringify(columnsOrdered[dataIdx]?.path)}`}
                     className={classes.overlayCol}
-                    style={{ left: overlayMeta.lefts[j], width: w, height: '100%' }}
+                    style={{
+                      position: 'absolute',
+                      top: 0,
+                      bottom: 0,
+                      left: overlayMeta.lefts[j],
+                      width: w,
+                      background: 'var(--massive-table-dim-overlay, rgba(0, 0, 0, 0.1))',
+                    }}
                   />
                 );
               })}

src/lib/styles/base.module.css

@@ -28,7 +28,6 @@
     Arial,
     "Apple Color Emoji",
     "Segoe UI Emoji";
-  font-size: 13px;
 }
 
 .viewport {
@@ -44,6 +43,10 @@
   scrollbar-color: var(--massive-table-scrollbar-thumb) var(--massive-table-scrollbar-track);
 }
 
+.viewport button {
+  font-size: 100%;
+}
+
 /* Scrollbar polish */
 .viewport::-webkit-scrollbar {
   height: 10px;
@@ -76,6 +79,10 @@
   border-bottom: 1px solid var(--massive-table-border);
   box-shadow: var(--massive-table-header-shadow);
 }
+.groupBar ul {
+  padding: 0;
+  margin: 0;
+}
 .groupBarOver {
   outline: 2px dashed var(--massive-table-border);
   outline-offset: -4px;
@@ -113,7 +120,6 @@
   background: transparent;
   color: inherit;
   border-radius: 6px;
-  font-size: 11px;
   line-height: 1;
   padding: 2px 6px;
 }
@@ -210,7 +216,6 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  font-size: 11px;
   opacity: 0.85;
 }
 .headerGroupBtn {
@@ -219,7 +224,6 @@
   background: transparent;
   color: inherit;
   border-radius: 6px;
-  font-size: 12px;
   line-height: 1;
   padding: 2px 6px;
   cursor: pointer;
@@ -232,7 +236,6 @@
 }
 .headerHint {
   margin-left: auto;
-  font-size: 11px;
   opacity: 0.45;
 }
 .resizeGrip {
@@ -315,7 +318,6 @@
   background: transparent;
   color: inherit;
   border-radius: 6px;
-  font-size: 12px;
   width: 22px;
   height: 22px;
 }