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,58 +131,39 @@ def check_login(user, password):
             error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"
         }
 
-# --- 🔥 [絕對強制 CSS]：死都不換行 + 強制撐開 + 單一捲軸 ---
+# --- 🔥 [最終簡化版 CSS]：不破壞結構，只控制寬度和捲軸 ---
 custom_css = """
-/* 1. 隱藏外層多餘捲軸 */
-#booking_table {
-    background: transparent !important;
-    border: none !important;
-    padding: 0 !important;
+/* 1. 隱藏元件最外層多餘的捲軸，解決雙重捲軸問題 */
+#booking_table .wrap {
+    overflow: visible !important;
 }
 
-/* 2. 核心捲動容器：強制顯示水平捲軸 */
-#booking_table .table-wrap, 
-#booking_table div[class*="table"], 
-div[data-testid="dataframe"] > div {
+/* 2. 針對負責捲動的容器設定水平捲軸 */
+#booking_table .table-wrap {
     overflow-x: auto !important;
     overflow-y: hidden !important;
-    display: block !important;
 }
 
-/* 3. 表格設定：max-content 是關鍵，它會強迫表格寬度 = 內容總寬度 */
-table { 
-    display: table !important;
-    table-layout: fixed !important; 
-    width: max-content !important;  /* 👈 這是關鍵：強制撐開，不要擠在螢幕裡 */
+/* 3. 表格設定：
+   width: max-content -> 讓表格寬度等於內容總寬度 (實現自動撐開)
+   table-layout: auto -> 讓瀏覽器依照文字長度自動計算每一欄寬度
+*/
+#booking_table table {
+    width: max-content !important; 
+    table-layout: auto !important; 
     border-collapse: collapse !important;
-    margin: 0 !important;
 }
 
-/* 4. 欄位設定：NO WRAPPING (不換行) */
-th, td { 
-    display: table-cell !important;
-    white-space: nowrap !important; /* 👈 絕對禁止換行 */
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    
-    box-sizing: border-box !important;
-    padding: 8px 10px !important;
-    border: 1px solid #444 !important;
-    font-size: 14px !important;
-    vertical-align: middle !important;
+/* 4. 欄位設定：
+   white-space: nowrap -> 禁止換行，確保寬度是「撐開」而不是「擠高」
+   width: auto -> 自動寬度
+*/
+#booking_table td, #booking_table th {
+    white-space: nowrap !important;
+    width: auto !important;
+    max-width: none !important;
+    padding: 8px 12px !important;
 }
-
-/* 5. 指定欄位寬度 (依照您的需求) */
-th:nth-child(1), td:nth-child(1) { width: 60px !important; }  /* ID */
-th:nth-child(2), td:nth-child(2) { width: 170px !important; } /* Date */
-th:nth-child(3), td:nth-child(3) { width: 80px !important; }  /* Time */
-th:nth-child(4), td:nth-child(4) { width: 120px !important; } /* Name */
-th:nth-child(5), td:nth-child(5) { width: 120px !important; } /* Tel */
-th:nth-child(6), td:nth-child(6) { width: 250px !important; } /* Email (長) */
-th:nth-child(7), td:nth-child(7) { width: 50px !important; }  /* Pax */
-th:nth-child(8), td:nth-child(8) { width: 180px !important; } /* Remarks */
-th:nth-child(9), td:nth-child(9) { width: 12px !important; }  /* Status */
-th:nth-child(10), td:nth-child(10) { width: 280px !important; } /* UserID */
 """
 
 # --- 介面開始 (加入 css 參數) ---