去外層留內層終極版（精準切割）

針對「紅框」所在的層級（外層）：強制截斷 (overflow: hidden)，不准它變寬，不准它捲動。
針對「綠框」所在的層級（內層）：強制開啟 (overflow-x: auto)，只有這裡可以動。

app.py

@@ -131,89 +131,115 @@ def check_login(user, password):
             error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"
         }
 
-# --- 🟢 [JavaScript] 精準控制捲軸 ---
-# 這段 JS 負責：
-# 1. 找到表格本體 (table)
-# 2. 找到包著表格的「那一層」div (parent)，強制它顯示捲軸
-# 3. 找到更外層的所有 div (grandparents)，強制它們「不准」顯示捲軸
-force_scroll_js = """
+# --- 🟢 [JS 核心邏輯]：層層檢查，殺掉紅框，保留綠框 ---
+fix_scroll_js = """
 function() {
-    const fixScroll = () => {
-        // 1. 找到表格元件
-        const comp = document.querySelector('#booking_table');
-        if (!comp) return;
+    const applyFix = () => {
+        const root = document.querySelector('#booking_table');
+        if (!root) return;
 
-        // 2. 找到裡面的 table
-        const table = comp.querySelector('table');
-        if (!table) return;
-
-        // 強制表格寬度 (確保內容撐開)
-        table.style.width = '1500px';
-        table.style.minWidth = '1500px';
-        table.style.tableLayout = 'fixed';
+        // 1. 殺掉外層捲軸 (Red Scrollbar)
+        // 找到所有包在表格外面的 div，只要不是直接包著 table 的，通通 hidden
+        const allDivs = root.querySelectorAll('div');
+        allDivs.forEach(div => {
+            // 如果這個 div 裡面還有一個 table-wrap，或者它本身就是外層包裝
+            // 而且它不是 table 的直接父層
+            const hasInnerTable = div.querySelector('table');
+            if (hasInnerTable && window.getComputedStyle(div).overflowX === 'auto') {
+                div.style.overflowX = 'hidden'; 
+                div.style.maxWidth = '100%';
+            }
+        });
+        
+        // 確保最外層也是 hidden
+        root.style.overflowX = 'hidden';
 
-        // 3. 找到直接包著 table 的那一層 div (這是我們要保留捲軸的地方)
-        const innerWrapper = table.parentElement;
-        if (innerWrapper) {
-            innerWrapper.style.overflowX = 'auto'; // 開啟捲軸
-            innerWrapper.style.width = '100%';
-            innerWrapper.style.maxWidth = '100vw'; 
-            innerWrapper.style.display = 'block';
-        }
+        // 2. 保留內層捲軸 (Green Scrollbar)
+        const table = root.querySelector('table');
+        if (table) {
+            // 強制設定表格寬度，確保內容撐開
+            table.style.width = '1500px'; 
+            table.style.minWidth = '1500px'; 
+            table.style.tableLayout = 'fixed';
 
-        // 4. 往上找所有祖先容器，全部殺死捲軸
-        // 這是解決「錯誤捲軸」或「雙重捲軸」的關鍵
-        let parent = innerWrapper.parentElement;
-        while (parent && parent.id !== 'booking_table') {
-            parent.style.overflowX = 'hidden'; // 隱藏外層捲軸
-            parent.style.width = '100%';
-            parent = parent.parentElement;
+            // 找到直接父層 (Green Scrollbar 所在位置)
+            const parent = table.parentElement;
+            if (parent) {
+                parent.style.overflowX = 'auto'; // 開啟
+                parent.style.maxWidth = '100vw'; // 限制寬度
+                parent.style.display = 'block';
+            }
         }
-        
-        // 確保最外層也沒有捲軸
-        if(comp) comp.style.overflowX = 'hidden';
     };
 
-    // 執行邏輯
-    fixScroll();
-    setInterval(fixScroll, 500); // 防止 Gradio 重繪後失效
+    // 啟動時執行
+    applyFix();
+    // 循環執行以對抗 Gradio 的動態渲染
+    setInterval(applyFix, 500);
 }
 """
 
 # --- 🔥 [CSS] 定寬 + 換行 + 隱藏全域捲軸 ---
 custom_css = """
-/* 1. 全域設定：防止網頁被撐開 */
+/* 1. 全域與元件外層：殺死紅框捲軸 */
 body, .gradio-container {
-    overflow-x: hidden !important;
+    overflow-x: hidden !important; /* 殺死瀏覽器捲軸 */
     max-width: 100vw !important;
 }
 
-/* 2. 表格內容設定 */
-/* 這裡只負責欄位的樣式，捲軸交給 JS 控制 */
+#booking_table {
+    overflow: hidden !important; /* 殺死元件捲軸 */
+    max-width: 100% !important;
+    border: none !important;
+    padding: 0 !important;
+}
+
+/* 2. 中間層：確保沒有任何中間人偷偷加捲軸 */
+#booking_table .wrap, 
+#booking_table .svelte-12cmxck { 
+    overflow-x: hidden !important;
+    max-width: 100% !important;
+}
+
+/* 3. 內層 (綠框位置)：唯一允許捲動的地方 */
+#booking_table .table-wrap, 
+#booking_table tbody {
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    max-width: 100vw !important; /* 確保不超過螢幕 */
+    border: 1px solid #444 !important;
+}
+
+/* 4. 表格本體：撐開它！ */
+#booking_table table {
+    table-layout: fixed !important;
+    width: 1500px !important; /* 總寬度 */
+    min-width: 1500px !important;
+}
+
+/* 5. 欄位內容：自動換行 */
 #booking_table th, #booking_table td {
-    white-space: normal !important; /* 允許換行 */
-    word-break: break-all !important; /* 強制換行 */
+    white-space: normal !important;
+    word-break: break-all !important;
     overflow-wrap: break-word !important;
-    
     vertical-align: top !important;
-    box-sizing: border-box !important;
     padding: 8px 5px !important;
     border: 1px solid #444 !important;
     font-size: 13px !important;
     line-height: 1.4 !important;
 }
 
-/* 3. 🔥 個別欄位寬度 (同時設定 width, min-width, max-width 確保不動如山) */
-#booking_table th:nth-child(1), #booking_table td:nth-child(1) { width: 60px !important; min-width: 60px !important; max-width: 60px !important; }
-#booking_table th:nth-child(2), #booking_table td:nth-child(2) { width: 170px !important; min-width: 170px !important; max-width: 170px !important; }
-#booking_table th:nth-child(3), #booking_table td:nth-child(3) { width: 80px !important; min-width: 80px !important; max-width: 80px !important; }
-#booking_table th:nth-child(4), #booking_table td:nth-child(4) { width: 120px !important; min-width: 120px !important; max-width: 120px !important; }
-#booking_table th:nth-child(5), #booking_table td:nth-child(5) { width: 120px !important; min-width: 120px !important; max-width: 120px !important; }
-#booking_table th:nth-child(6), #booking_table td:nth-child(6) { width: 250px !important; min-width: 250px !important; max-width: 250px !important; }
-#booking_table th:nth-child(7), #booking_table td:nth-child(7) { width: 50px !important; min-width: 50px !important; max-width: 50px !important; }
-#booking_table th:nth-child(8), #booking_table td:nth-child(8) { width: 180px !important; min-width: 180px !important; max-width: 180px !important; }
-#booking_table th:nth-child(9), #booking_table td:nth-child(9) { width: 120px !important; min-width: 120px !important; max-width: 120px !important; }
-#booking_table th:nth-child(10), #booking_table td:nth-child(10) { width: 320px !important; min-width: 320px !important; max-width: 320px !important; }
+/* 6. 個別欄位寬度 */
+#booking_table th:nth-child(1), #booking_table td:nth-child(1) { width: 60px !important; }
+#booking_table th:nth-child(2), #booking_table td:nth-child(2) { width: 170px !important; }
+#booking_table th:nth-child(3), #booking_table td:nth-child(3) { width: 80px !important; }
+#booking_table th:nth-child(4), #booking_table td:nth-child(4) { width: 120px !important; }
+#booking_table th:nth-child(5), #booking_table td:nth-child(5) { width: 120px !important; }
+#booking_table th:nth-child(6), #booking_table td:nth-child(6) { width: 250px !important; }
+#booking_table th:nth-child(7), #booking_table td:nth-child(7) { width: 50px !important; }
+#booking_table th:nth-child(8), #booking_table td:nth-child(8) { width: 180px !important; }
+#booking_table th:nth-child(9), #booking_table td:nth-child(9) { width: 120px !important; }
+#booking_table th:nth-child(10), #booking_table td:nth-child(10) { width: 320px !important; }
 """
 
 # --- 介面開始 ---
@@ -251,8 +277,8 @@ with gr.Blocks(title="Admin", css=custom_css) as demo:
         outputs=[login_row, admin_row, error_msg]
     )
     
-    # 🔥🔥🔥 啟動 JS 修復程式 🔥🔥🔥
-    demo.load(None, js=force_scroll_js)
+    # 🔥🔥🔥 執行 JS 強制修正 🔥🔥🔥
+    demo.load(None, js=fix_scroll_js)
 
 if __name__ == "__main__":
     demo.launch()