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,42 +132,84 @@ def check_login(user, password):
             error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"
         }
 
-# --- 🔥 [最終簡化版 CSS]：不破壞結構，只控制寬度和捲軸 ---
+# --- 🔥 [絕對控制版 CSS] ---
 custom_css = """
-/* 1. 隱藏元件最外層多餘的捲軸，解決雙重捲軸問題 */
+/* 1. 隱藏 Gradio 外層多餘的捲軸，只留內部一個 */
 #booking_table .wrap {
-    overflow: visible !important;
+    overflow: hidden !important; 
 }
 
-/* 2. 針對負責捲動的容器設定水平捲軸 */
+/* 2. 表格容器：強制開啟 X 軸捲軸 */
 #booking_table .table-wrap {
     overflow-x: auto !important;
     overflow-y: hidden !important;
 }
 
-/* 3. 表格設定：
-   width: max-content -> 讓表格寬度等於內容總寬度 (實現自動撐開)
-   table-layout: auto -> 讓瀏覽器依照文字長度自動計算每一欄寬度
+/* 3. 表格本體：
+   table-layout: fixed -> 絕對尊重每個欄位的寬度設定
+   width: max-content  -> 表格總寬度等於所有欄位寬度總和 (約1500px)
+   這樣在手機上一定會超出螢幕，觸發水平捲軸
 */
 #booking_table table {
+    table-layout: fixed !important;
     width: max-content !important; 
-    table-layout: auto !important; 
     border-collapse: collapse !important;
+    margin: 0 !important;
 }
 
-/* 4. 欄位設定：
-   white-space: nowrap -> 禁止換行，確保寬度是「撐開」而不是「擠高」
-   width: auto -> 自動寬度
+/* 4. 欄位通用設定：
+   white-space: normal -> 允許換行 (您現在的要求)
+   word-break: break-all -> 強制換行 (避免長字串撐開)
+   vertical-align: top -> 對齊上方 (換行後比較好看)
 */
-#booking_table td, #booking_table th {
-    white-space: nowrap !important;
-    width: auto !important;
-    max-width: none !important;
-    padding: 8px 12px !important;
+#booking_table th, #booking_table td {
+    display: table-cell !important;
+    white-space: normal !important;
+    word-break: break-word !important;
+    overflow-wrap: break-word !important;
+    vertical-align: top !important;
+    
+    box-sizing: border-box !important;
+    padding: 8px 10px !important;
+    border: 1px solid #444 !important;
+    font-size: 14px !important;
+    line-height: 1.4 !important;
 }
+
+/* 5. 🔥【依照您的要求，固定每個欄位寬度】🔥 */
+
+/* #1 id */
+#booking_table th:nth-child(1), #booking_table td:nth-child(1) { min-width: 60px !important; width: 60px !important; }
+
+/* #2 date */
+#booking_table th:nth-child(2), #booking_table td:nth-child(2) { min-width: 170px !important; width: 170px !important; }
+
+/* #3 time */
+#booking_table th:nth-child(3), #booking_table td:nth-child(3) { min-width: 80px !important; width: 80px !important; }
+
+/* #4 name */
+#booking_table th:nth-child(4), #booking_table td:nth-child(4) { min-width: 120px !important; width: 120px !important; }
+
+/* #5 tel */
+#booking_table th:nth-child(5), #booking_table td:nth-child(5) { min-width: 120px !important; width: 120px !important; }
+
+/* #6 email */
+#booking_table th:nth-child(6), #booking_table td:nth-child(6) { min-width: 250px !important; width: 250px !important; }
+
+/* #7 pax */
+#booking_table th:nth-child(7), #booking_table td:nth-child(7) { min-width: 50px !important; width: 50px !important; }
+
+/* #8 remarks */
+#booking_table th:nth-child(8), #booking_table td:nth-child(8) { min-width: 180px !important; width: 180px !important; }
+
+/* #9 status */
+#booking_table th:nth-child(9), #booking_table td:nth-child(9) { min-width: 120px !important; width: 120px !important; }
+
+/* #10 user_id */
+#booking_table th:nth-child(10), #booking_table td:nth-child(10) { min-width: 280px !important; width: 320px !important; }
 """
 
-# --- 介面開始 (加入 css 參數) ---
+# --- 介面開始 ---
 with gr.Blocks(title="Admin", css=custom_css) as demo:
     
     # 1. 登入介面
@@ -183,7 +226,7 @@ with gr.Blocks(title="Admin", css=custom_css) as demo:
         gr.Markdown("# 🍷 訂位管理後台 (Dashboard)")
         refresh_btn = gr.Button("🔄 重新整理")
         
-        # ✅ 保持 elem_id 以便 CSS 抓取
+        # ✅ elem_id 保持為 booking_table
         booking_table = gr.Dataframe(interactive=False, elem_id="booking_table")
         
         with gr.Row():