對「容器」執行 「截斷 (Clipping)」，只允許內部滑動。

核心修正策略：
最外層 (#booking_table)：overflow: hidden (絕對禁止溢出，殺死外層捲軸)。
中間層 (.wrap)：width: 100% (強制跟隨螢幕寬度，不准被內容撐大)。
捲動層 (tbody-wrap / table-wrap)：overflow-x: auto (唯一允許捲動的地方)。
內容層 (table)：width: 1470px (這是您所有欄位寬度的總和，強制撐開)。

app.py

@@ -38,7 +38,6 @@ def send_confirmation_hybrid(booking_id):
         email, user_id = booking.get('email'), booking.get('user_id')
         log_msg = ""
         
-        confirm_link = f"{PUBLIC_SPACE_URL}/?id={booking_id}&action=confirm"
         confirm_link = f"{PUBLIC_SPACE_URL}/?id={booking_id}&action=confirm"
         cancel_link = f"{PUBLIC_SPACE_URL}/?id={booking_id}&action=cancel"
 
@@ -132,38 +131,28 @@ def check_login(user, password):
             error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"
         }
 
-# --- 🔥 [雙重捲軸殺手 CSS] 🔥 ---
+# --- 🔥 [雙重捲軸修正 CSS] 🔥 ---
 custom_css = """
-/* 1. 鎖定外層容器 (元件本體)：
-   max-width: 100vw -> 確保整個元件寬度絕不超過螢幕
-   overflow: hidden -> 強制隱藏所有溢出，這是殺死外層捲軸的關鍵
-   display: block -> 確保它以區塊顯示
+/* 1. 【鎖死外層】
+   將 #booking_table 及其直接包裝層 (.wrap) 的寬度鎖死在 100%。
+   並且 overflow: hidden 強制切斷超出部分。這會消滅外層捲軸。
 */
-#booking_table {
-    display: block !important;
-    width: 100% !important;
-    max-width: 100vw !important;
-    overflow: hidden !important; 
-    padding: 0 !important;
-    margin: 0 !important;
-    border: none !important;
-}
-
-/* 2. 鎖定中間層 (Gradio 的包裝層)：
-   這些通常是產生外層捲軸的元兇，全部隱藏 overflow
-*/
-#booking_table .wrap,
-#booking_table .svelte-12cmxck {
+#booking_table, 
+#booking_table > .wrap,
+#booking_table .gradio-container {
     width: 100% !important;
     max-width: 100vw !important;
     overflow: hidden !important;
+    display: block !important;
 }
 
-/* 3. 開放內層容器 (真正包著 table 的層)：
-   overflow-x: auto -> 這裡且「只有這裡」允許水平捲動
-   width: 100% -> 寬度跟隨父容器 (螢幕寬)
+/* 2. 【開啟內層】
+   找到真正包含表格的容器 (通常是 table-wrap 或 tbody-wrap)，
+   只讓它擁有 overflow-x: auto。
 */
-#booking_table .table-wrap {
+#booking_table .table-wrap,
+#booking_table div[class*="table"],
+#booking_table .tbody-wrap {
     width: 100% !important;
     overflow-x: auto !important;
     overflow-y: hidden !important;
@@ -171,21 +160,21 @@ custom_css = """
     display: block !important;
 }
 
-/* 4. 表格本體：
-   width: 1500px -> 設定一個大於所有欄位總和的定值 (確保撐開捲軸)
-   table-layout: fixed -> 嚴格執行欄位寬度
+/* 3. 【撐開內容】
+   width: 1470px -> 將表格寬度設定為您所有欄位寬度的總和。
+   table-layout: fixed -> 強制每個欄位遵守寬度設定。
 */
 #booking_table table {
     table-layout: fixed !important;
-    width: 1500px !important; 
-    min-width: 1500px !important;
+    width: 1470px !important; /* 60+170+80+120+120+250+50+180+120+320 = 1470 */
+    min-width: 1470px !important;
     border-collapse: collapse !important;
     margin: 0 !important;
 }
 
-/* 5. 欄位通用設定：
+/* 4. 【欄位行為】
    white-space: normal -> 允許換行
-   word-break: break-all -> 強制換行 (避免 user_id 撐開)
+   word-break: break-all -> 強制換行
 */
 #booking_table th, #booking_table td {
     display: table-cell !important;
@@ -201,7 +190,7 @@ custom_css = """
     line-height: 1.4 !important;
 }
 
-/* 6. 🔥【您的指定欄寬】(10個欄位) */
+/* 5. 🔥【絕對欄寬】(依照您的指定) */
 #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; }