雙重捲軸殺手

使用 「容器隔離法」。我們要把表格「關在」一個寬度絕對不超過螢幕的盒子裡，只允許這個盒子內部捲動。

app.py

@@ -38,6 +38,7 @@ 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"
 
@@ -131,46 +132,67 @@ def check_login(user, password):
             error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"
         }
 
-# --- 🔥 [終極修正 CSS] 🔥 ---
+# --- 🔥 [雙重捲軸殺手 CSS] 🔥 ---
 custom_css = """
-/* 1. 【鎖死外層】解決雙重捲軸的關鍵 */
+/* 1. 鎖定外層容器 (元件本體)：
+   max-width: 100vw -> 確保整個元件寬度絕不超過螢幕
+   overflow: hidden -> 強制隱藏所有溢出，這是殺死外層捲軸的關鍵
+   display: block -> 確保它以區塊顯示
+*/
 #booking_table {
     display: block !important;
     width: 100% !important;
-    max-width: 100vw !important; /* 👈 絕對不准超過螢幕寬度 */
-    overflow: hidden !important; /* 👈 超出部分直接切掉，殺死外層捲軸 */
+    max-width: 100vw !important;
+    overflow: hidden !important; 
     padding: 0 !important;
+    margin: 0 !important;
+    border: none !important;
 }
 
-/* 確保 Gradio 預設的 wrap 不會搗亂 */
-#booking_table .wrap {
+/* 2. 鎖定中間層 (Gradio 的包裝層)：
+   這些通常是產生外層捲軸的元兇，全部隱藏 overflow
+*/
+#booking_table .wrap,
+#booking_table .svelte-12cmxck {
     width: 100% !important;
-    max-width: 100% !important;
+    max-width: 100vw !important;
     overflow: hidden !important;
 }
 
-/* 2. 【開啟內層】只允許這裡捲動 */
+/* 3. 開放內層容器 (真正包著 table 的層)：
+   overflow-x: auto -> 這裡且「只有這裡」允許水平捲動
+   width: 100% -> 寬度跟隨父容器 (螢幕寬)
+*/
 #booking_table .table-wrap {
     width: 100% !important;
-    overflow-x: auto !important; /* 👈 水平捲軸 */
+    overflow-x: auto !important;
     overflow-y: hidden !important;
     border: 1px solid #444 !important;
+    display: block !important;
 }
 
-/* 3. 【撐開表格】 */
+/* 4. 表格本體：
+   width: 1500px -> 設定一個大於所有欄位總和的定值 (確保撐開捲軸)
+   table-layout: fixed -> 嚴格執行欄位寬度
+*/
 #booking_table table {
     table-layout: fixed !important;
-    width: 1600px !important; /* 👈 硬性設定總寬度，總和大約是您各欄位加總 */
-    min-width: 1600px !important;
+    width: 1500px !important; 
+    min-width: 1500px !important;
     border-collapse: collapse !important;
+    margin: 0 !important;
 }
 
-/* 4. 【欄位行為】 */
+/* 5. 欄位通用設定：
+   white-space: normal -> 允許換行
+   word-break: break-all -> 強制換行 (避免 user_id 撐開)
+*/
 #booking_table th, #booking_table td {
     display: table-cell !important;
-    white-space: normal !important; /* ✅ 允許換行 */
-    word-break: break-all !important; /* ✅ 強制換行 */
+    white-space: normal !important;
     overflow-wrap: break-word !important;
+    word-break: break-all !important;
+    
     vertical-align: top !important;
     box-sizing: border-box !important;
     padding: 8px 5px !important;
@@ -179,7 +201,7 @@ custom_css = """
     line-height: 1.4 !important;
 }
 
-/* 5. 🔥【絕對欄寬】(依照您的指定) */
+/* 6. 🔥【您的指定欄寬】(10個欄位) */
 #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; }