Update app.py

app.py

@@ -13,6 +13,7 @@ SUPABASE_URL = os.getenv("SUPABASE_URL")
 SUPABASE_KEY = os.getenv("SUPABASE_KEY")
 GAS_MAIL_URL = os.getenv("GAS_MAIL_URL")
 LINE_ACCESS_TOKEN = os.getenv("LINE_ACCESS_TOKEN")
+# ⚠️ 請確認這是您 Space A 的正確網址 (結尾不要有斜線)
 PUBLIC_SPACE_URL = "https://deeplearning101-ciecietaipei.hf.space" 
 
 # 取得帳密
@@ -131,30 +132,39 @@ def check_login(user, password):
             error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"
         }
 
-# --- 🔥 [客製化 CSS]：針對每個欄位設定寬度 + 允許換行 ---
+# --- 🔥 [修復雙重捲軸 CSS]：隱藏外層，只留內層 ---
 custom_css = """
-/* 1. 外層容器：允許左右滑動 */
-.table-wrap, .wrap, .svelte-12cmxck, div[id^="dataframe"] {
+/* 1. 隱藏外層容器的捲軸 (殺掉綠色框框的捲軸) */
+#booking_table {
+    overflow: hidden !important; 
+    border: none !important;
+    background: transparent !important;
+}
+
+/* 2. 確保表格內部的容器負責捲動 (保留紅色框框的捲軸) */
+#booking_table .table-wrap, 
+#booking_table div[class*="table"], 
+#booking_table .tbody-wrap {
     overflow-x: auto !important;
+    overflow-y: hidden !important;
     display: block !important;
 }
 
-/* 2. 表格本體 */
+/* 3. 表格佈局 (維持原設定) */
 table { 
     display: table !important;
-    table-layout: fixed !important; /* ⚠️ 關鍵：固定布局，強制生效我們設定的寬度 */
+    table-layout: fixed !important; 
     width: auto !important; 
     border-collapse: collapse !important;
     margin: 0 !important;
 }
 
-/* 3. 通用儲存格設定 */
+/* 4. 欄位設定 (維持您滿意的定寬) */
 th, td { 
     display: table-cell !important;
-    white-space: normal !important;  /* ✅ 允許換行 */
-    word-break: break-word !important; /* ✅ 長單字(如User ID)強制換行 */
-    vertical-align: top !important;    /* 對齊上方，換行後比較好看 */
-    
+    white-space: normal !important;
+    word-break: break-word !important;
+    vertical-align: top !important;
     box-sizing: border-box !important;
     padding: 8px 10px !important;
     border: 1px solid #444 !important;
@@ -162,38 +172,17 @@ th, td {
     line-height: 1.4 !important;
 }
 
-/* 4. 🔥【個別欄位寬度設定】(依照您的欄位順序 1~10) */
-
-/* #1 id: 短數字 */
-th:nth-child(1), td:nth-child(1) { min-width: 60px !important; width: 60px !important; }
-
-/* #2 date: 日期 (2026-01-23) */
-th:nth-child(2), td:nth-child(2) { min-width: 170px !important; width: 170px !important; }
-
-/* #3 time: 時間 (19:30) */
-th:nth-child(3), td:nth-child(3) { min-width: 80px !important; width: 80px !important; }
-
-/* #4 name: 姓名 */
-th:nth-child(4), td:nth-child(4) { min-width: 120px !important; width: 120px !important; }
-
-/* #5 tel: 電話 */
-th:nth-child(5), td:nth-child(5) { min-width: 120px !important; width: 120px !important; }
-
-/* #6 email: 電子信箱 (很長，給寬一點) */
-th:nth-child(6), td:nth-child(6) { min-width: 250px !important; width: 250px !important; }
-
-/* #7 pax: 人數 (短) */
+/* 5. 個別欄位寬度 (維持您滿意的寬度) */
+th:nth-child(1), td:nth-child(1) { min-width: 50px !important; width: 50px !important; }
+th:nth-child(2), td:nth-child(2) { min-width: 110px !important; width: 110px !important; }
+th:nth-child(3), td:nth-child(3) { min-width: 70px !important; width: 70px !important; }
+th:nth-child(4), td:nth-child(4) { min-width: 90px !important; width: 90px !important; }
+th:nth-child(5), td:nth-child(5) { min-width: 110px !important; width: 110px !important; }
+th:nth-child(6), td:nth-child(6) { min-width: 200px !important; width: 200px !important; }
 th:nth-child(7), td:nth-child(7) { min-width: 50px !important; width: 50px !important; }
-
-/* #8 remarks: 備註 (文字多，給寬一點) */
 th:nth-child(8), td:nth-child(8) { min-width: 180px !important; width: 180px !important; }
-
-/* #9 status: 狀態 */
-th:nth-child(9), td:nth-child(9) { min-width: 120px !important; width: 120px !important; }
-
-/* #10 user_id: 亂碼 (非常長，給寬一點，反正會換行) */
-th:nth-child(10), td:nth-child(10) { min-width: 280px !important; width: 320px !important; }
-
+th:nth-child(9), td:nth-child(9) { min-width: 90px !important; width: 90px !important; }
+th:nth-child(10), td:nth-child(10) { min-width: 180px !important; width: 180px !important; }
 """
 
 # --- 介面開始 (加入 css 參數) ---
@@ -212,8 +201,10 @@ with gr.Blocks(title="Admin", css=custom_css) as demo:
     with gr.Group(visible=False) as admin_row:
         gr.Markdown("# 🍷 訂位管理後台 (Dashboard)")
         refresh_btn = gr.Button("🔄 重新整理")
-        # 表格這裡會自動套用上面的 CSS
-        booking_table = gr.Dataframe(interactive=False)
+        
+        # 🔥🔥🔥 關鍵：加入 elem_id="booking_table" 讓 CSS 可以精準抓到它 🔥🔥🔥
+        booking_table = gr.Dataframe(interactive=False, elem_id="booking_table")
+        
         with gr.Row():
             id_input = gr.Number(label="訂單 ID", precision=0)
             action_btn = gr.Button("📧 發送確認信 (Hybrid)", variant="primary")