From 1751928d1883d21b6024c72aa690a40d74d57411 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 21 Mar 2023 13:41:38 +0000
Subject: [PATCH] refactor: improve table overflow detection

---
 src/lib/elements/table/tableScroll.svelte | 25 ++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/lib/elements/table/tableScroll.svelte b/src/lib/elements/table/tableScroll.svelte
index 814fe00e5..6d30f8aff 100644
--- a/src/lib/elements/table/tableScroll.svelte
+++ b/src/lib/elements/table/tableScroll.svelte
@@ -2,11 +2,28 @@
     import type { Action } from 'svelte/action';
 
     export let isSticky = false;
+    let isOverflowing = false;
 
-    const hasOverflow: Action<HTMLDivElement, (value: boolean) => void> = (node, callback) => {
+    const hasOverflow: Action<HTMLDivElement> = (node) => {
         const observer = new ResizeObserver((entries) => {
             for (const entry of entries) {
-                callback(entry.contentRect.width < entry.target.scrollWidth);
+                let overflowing = false;
+                if (entry.contentRect.width < entry.target.scrollWidth) {
+                    overflowing = true;
+                }
+
+                const cols = entry.target.querySelectorAll('.table-thead-col');
+                for (let i = 0; i < cols.length; i++) {
+                    const col = cols[i];
+                    const cs = getComputedStyle(col);
+                    const innerWidth =
+                        col.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
+                    if (innerWidth < 32) {
+                        overflowing = true;
+                    }
+                }
+
+                isOverflowing = overflowing;
             }
         });
 
@@ -18,12 +35,10 @@
             }
         };
     };
-
-    let isOverflowing = false;
 </script>
 
 <div class="table-with-scroll u-margin-block-start-32" data-private>
-    <div class="table-wrapper" use:hasOverflow={(v) => (isOverflowing = v)}>
+    <div class="table-wrapper" use:hasOverflow>
         <table class="table" class:is-sticky-scroll={isSticky && isOverflowing}>
             <slot />
         </table>