Issue #3323501: Table sticky-header width causing overlap

dist/css/base/gin.css

@@ -1382,16 +1382,6 @@ table.sticky-header::before, table.sticky-header::after {
   background: var(--gin-bg-layer);
 }
 
-@media (min-width: 61em) {
-  .gin--vertical-toolbar table.sticky-header {
-    width: calc(100% - min(10vw, 96px) - var(--gin-spacing-xxl) - 2px - var(--gin-toolbar-width-collapsed)) !important;
-  }
-
-  .gin--vertical-toolbar[data-toolbar-menu=open] table.sticky-header {
-    width: calc(100% - min(10vw, 96px) - var(--gin-spacing-xxl) - 2px - var(--gin-toolbar-width)) !important;
-  }
-}
-
 table thead {
   background: transparent;
   border-radius: var(--gin-border-m);

js/overrides/tableheader.js

@@ -67,6 +67,7 @@
       const header = table.querySelector(':scope > thead');
       header.querySelectorAll('th').forEach((el, i) => {
         table.querySelector(`table.sticky-header > thead th:nth-of-type(${i+1})`).style.width = `${el.offsetWidth}px`;
+        table.querySelector(`table.sticky-header`).style.width = `${el.parentNode.offsetWidth}px`;
       });
     },
   };

styles/base/_table.scss

@@ -48,16 +48,6 @@ table.sticky-header {
       background: var(--gin-bg-layer);
     }
   }
-
-  @include mq(medium) {
-    .gin--vertical-toolbar & {
-      width: calc(100% - min(10vw, 96px) - var(--gin-spacing-xxl) - 2px - var(--gin-toolbar-width-collapsed)) !important;
-    }
-
-    .gin--vertical-toolbar[data-toolbar-menu='open'] & {
-      width: calc(100% - min(10vw, 96px) - var(--gin-spacing-xxl) - 2px - var(--gin-toolbar-width)) !important;
-    }
-  }
 }
 
 table {