From 2794b21a416b9640887fb34a0a6a5f0d7e92287b Mon Sep 17 00:00:00 2001
From: hypercross <helios.tnak@gmail.com>
Date: Thu, 26 Feb 2026 17:29:39 +0800
Subject: [PATCH] fix: table max width roll scrolling

---
 src/components/table.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/table.tsx b/src/components/table.tsx
index 8bdca78..96865c8 100644
--- a/src/components/table.tsx
+++ b/src/components/table.tsx
@@ -20,6 +20,7 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
   const [activeTab, setActiveTab] = createSignal(0);
   const [activeGroup, setActiveGroup] = createSignal<string | null>(null);
   const [bodyHtml, setBodyHtml] = createSignal('');
+  let tabsContainer: HTMLDivElement | undefined;
 
   // 从 element 的 textContent 获取 CSV 路径
   const src = element?.textContent?.trim() || '';
@@ -140,6 +141,11 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
   const handleRoll = () => {
     const randomIndex = Math.floor(Math.random() * filteredRows().length);
     setActiveTab(randomIndex);
+    // 滚动到可视区域
+    setTimeout(() => {
+      const activeButton = tabsContainer?.querySelector('.border-blue-600');
+      activeButton?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+    }, 50);
   };
 
   return (
@@ -186,7 +192,7 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
                 🎲
               </button>
             </Show>
-            <div class="flex gap-2 overflow-x-auto flex-1 min-w-0">
+            <div ref={tabsContainer} class="flex gap-2 overflow-x-auto flex-1 min-w-0">
               <For each={filteredRows()}>
                 {(row, index) => (
                   <button