Update app.py

app.py

@@ -13,10 +13,9 @@ 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" 
 
-# 取得帳密 (若沒設定則使用預設值)
+# 取得帳密
 REAL_ADMIN_USER = os.getenv("ADMIN_USER") or "Deep Learning 101"
 REAL_ADMIN_PASSWORD = os.getenv("ADMIN_PASSWORD") or "2016-11-11"
 
@@ -119,7 +118,7 @@ def send_confirmation_hybrid(booking_id):
         return log_msg
     except Exception as e: return f"❌ Error: {str(e)}"
 
-# --- 登入邏輯 (回傳 HTML 字串來控制顏色) ---
+# --- 登入邏輯 ---
 def check_login(user, password):
     if user == REAL_ADMIN_USER and password == REAL_ADMIN_PASSWORD:
         return {
@@ -128,49 +127,59 @@ def check_login(user, password):
             error_msg: ""
         }
     else:
-        # ✅ 使用 HTML span 標籤來顯示紅色，而不是在 gr.Markdown 用 style 參數
         return {
             error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"
         }
 
-# --- 🔥 [最終修正 CSS]：不換行 + 自動撐開 + 捲軸 ---
+# --- 🔥 [客製化 CSS]：針對每個欄位設定寬度 + 允許換行 ---
 custom_css = """
-/* 1. 確保外層容器可以捲動 */
-div[data-testid="dataframe"] {
+/* 1. 外層容器：允許左右滑動 */
+.table-wrap, .wrap, .svelte-12cmxck, div[id^="dataframe"] {
     overflow-x: auto !important;
-    max-width: 100vw !important; /* 確保容器本身不超過螢幕寬 */
     display: block !important;
 }
-
-/* 2. 表格本體：
-   min-width: max-content 是關鍵！
-   它告訴瀏覽器：表格的最小寬度 = 內容完全展開後的總長度。
-   這會迫使外層容器產生捲軸，而不是壓縮表格。
-*/
+/* 2. 表格本體 */
 table { 
-    min-width: max-content !important; 
-    width: auto !important;
+    display: table !important;
+    table-layout: fixed !important; /* ⚠️ 關鍵：固定布局，強制生效我們設定的寬度 */
+    width: auto !important; 
     border-collapse: collapse !important;
+    margin: 0 !important;
 }
-
-/* 3. 欄位設定：強制不換行 */
-td, th { 
-    white-space: nowrap !important;  /* 🚫 絕對禁止換行 */
-    overflow: visible !important;
-    text-overflow: clip !important;  /* 移除 ... */
-    
-    /* 移除寬度限制，讓內容自己決定要多寬 */
-    max-width: none !important;
-    width: auto !important;
+/* 3. 通用儲存格設定 */
+th, td { 
+    display: table-cell !important;
+    white-space: normal !important;  /* ✅ 允許換行 */
+    word-break: break-word !important; /* ✅ 長單字(如User ID)強制換行 */
+    vertical-align: top !important;    /* 對齊上方，換行後比較好看 */
     
-    padding: 8px 12px !important;    /* 舒適間距 */
-}
-
-/* 4. 針對 Gradio 內部的 span 也強制不換行 */
-td > span, th > span {
-    white-space: nowrap !important;
-    overflow: visible !important;
+    box-sizing: border-box !important;
+    padding: 8px 10px !important;
+    border: 1px solid #444 !important;
+    font-size: 14px !important;
+    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: 人數 (短) */
+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; }
 """
 
 # --- 介面開始 (加入 css 參數) ---