Update app.py

app.py

@@ -13,7 +13,6 @@ 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" 
 
 # 取得帳密
@@ -132,9 +131,9 @@ def check_login(user, password):
             error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"
         }
 
-# --- 🔥 [絕對控制版 CSS] ---
+# --- 🔥 [絕對定寬 + 自動換行 CSS] ---
 custom_css = """
-/* 1. 隱藏 Gradio 外層多餘的捲軸，只留內部一個 */
+/* 1. 隱藏最外層的捲軸，只留內部一個 */
 #booking_table .wrap {
     overflow: hidden !important; 
 }
@@ -143,70 +142,72 @@ custom_css = """
 #booking_table .table-wrap {
     overflow-x: auto !important;
     overflow-y: hidden !important;
+    border: 1px solid #444 !important;
 }
 
 /* 3. 表格本體：
-   table-layout: fixed -> 絕對尊重每個欄位的寬度設定
-   width: max-content  -> 表格總寬度等於所有欄位寬度總和 (約1500px)
-   這樣在手機上一定會超出螢幕，觸發水平捲軸
+   min-width: 1600px -> 【關鍵】直接把表格撐到 1600px 寬。
+   這樣在手機上（寬度~400px）一定會超出，進而觸發捲軸。
+   table-layout: fixed -> 嚴格遵守下方設定的欄位寬度。
 */
 #booking_table table {
     table-layout: fixed !important;
-    width: max-content !important; 
+    min-width: 1600px !important; 
     border-collapse: collapse !important;
     margin: 0 !important;
 }
 
 /* 4. 欄位通用設定：
-   white-space: normal -> 允許換行 (您現在的要求)
-   word-break: break-all -> 強制換行 (避免長字串撐開)
-   vertical-align: top -> 對齊上方 (換行後比較好看)
+   white-space: normal -> 【關鍵】允許換行，太長就變兩行。
+   overflow-wrap: break-word -> 確保長單字也能換行。
 */
 #booking_table th, #booking_table td {
     display: table-cell !important;
-    white-space: normal !important;
-    word-break: break-word !important;
+    white-space: normal !important; 
     overflow-wrap: break-word !important;
-    vertical-align: top !important;
+    word-break: break-word !important;
     
+    vertical-align: top !important;
     box-sizing: border-box !important;
-    padding: 8px 10px !important;
+    padding: 8px 5px !important;
     border: 1px solid #444 !important;
-    font-size: 14px !important;
+    font-size: 13px !important;
     line-height: 1.4 !important;
 }
 
-/* 5. 🔥【依照您的要求，固定每個欄位寬度】🔥 */
+/* 5. 🔥【依照您的要求，固定每個欄位寬度】🔥 
+   這些寬度加總起來大約是 1600px，會剛好撐滿上面的 min-width
+*/
 
-/* #1 id */
-#booking_table th:nth-child(1), #booking_table td:nth-child(1) { min-width: 60px !important; width: 60px !important; }
+/* #1 id: 短數字 */
+#booking_table th:nth-child(1), #booking_table td:nth-child(1) { width: 60px !important; }
 
-/* #2 date */
-#booking_table th:nth-child(2), #booking_table td:nth-child(2) { min-width: 170px !important; width: 170px !important; }
+/* #2 date: 日期 */
+#booking_table th:nth-child(2), #booking_table td:nth-child(2) { width: 170px !important; }
 
-/* #3 time */
-#booking_table th:nth-child(3), #booking_table td:nth-child(3) { min-width: 80px !important; width: 80px !important; }
+/* #3 time: 時間 */
+#booking_table th:nth-child(3), #booking_table td:nth-child(3) { width: 80px !important; }
 
-/* #4 name */
-#booking_table th:nth-child(4), #booking_table td:nth-child(4) { min-width: 120px !important; width: 120px !important; }
+/* #4 name: 姓名 */
+#booking_table th:nth-child(4), #booking_table td:nth-child(4) { width: 120px !important; }
 
-/* #5 tel */
-#booking_table th:nth-child(5), #booking_table td:nth-child(5) { min-width: 120px !important; width: 120px !important; }
+/* #5 tel: 電話 */
+#booking_table th:nth-child(5), #booking_table td:nth-child(5) { width: 120px !important; }
 
-/* #6 email */
-#booking_table th:nth-child(6), #booking_table td:nth-child(6) { min-width: 250px !important; width: 250px !important; }
+/* #6 email: 電子信箱 (給寬一點) */
+#booking_table th:nth-child(6), #booking_table td:nth-child(6) { width: 250px !important; }
 
-/* #7 pax */
-#booking_table th:nth-child(7), #booking_table td:nth-child(7) { min-width: 50px !important; width: 50px !important; }
+/* #7 pax: 人數 */
+#booking_table th:nth-child(7), #booking_table td:nth-child(7) { width: 50px !important; }
 
-/* #8 remarks */
-#booking_table th:nth-child(8), #booking_table td:nth-child(8) { min-width: 180px !important; width: 180px !important; }
+/* #8 remarks: 備註 */
+#booking_table th:nth-child(8), #booking_table td:nth-child(8) { width: 180px !important; }
 
-/* #9 status */
-#booking_table th:nth-child(9), #booking_table td:nth-child(9) { min-width: 120px !important; width: 120px !important; }
+/* #9 status: 狀態 */
+#booking_table th:nth-child(9), #booking_table td:nth-child(9) { 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; }
+/* #10 user_id: 亂碼 (非常長) */
+#booking_table th:nth-child(10), #booking_table td:nth-child(10) { width: 320px !important; }
 """
 
 # --- 介面開始 ---