Update app.py

app.py

@@ -13,9 +13,10 @@ 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"
 
@@ -118,7 +119,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 {
@@ -127,86 +128,52 @@ 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. 殺掉外層捲軸 (綠色框框問題) */
-#booking_table .wrap {
-    overflow: hidden !important;
-}
-
-/* 2. 保留內層捲軸 (紅色框框)，這是唯一可以捲動的地方 */
-#booking_table .table-wrap {
+/* 1. 確保外層容器可以捲動 */
+div[data-testid="dataframe"] {
     overflow-x: auto !important;
-    overflow-y: hidden !important;
-    border: 1px solid #444 !important;
+    max-width: 100vw !important; /* 確保容器本身不超過螢幕寬 */
+    display: block !important;
 }
 
-/* 3. 表格本體設定 
-   min-width: 1500px -> 確保表格夠寬，強迫出現捲軸
-   table-layout: fixed -> 強制瀏覽器聽從下方的欄位寬度設定
+/* 2. 表格本體：
+   min-width: max-content 是關鍵！
+   它告訴瀏覽器：表格的最小寬度 = 內容完全展開後的總長度。
+   這會迫使外層容器產生捲軸，而不是壓縮表格。
 */
-#booking_table table {
-    table-layout: fixed !important;
-    min-width: 1500px !important; 
+table { 
+    min-width: max-content !important; 
+    width: auto !important;
     border-collapse: collapse !important;
-    margin: 0 !important;
 }
 
-/* 4. 通用儲存格設定 */
-#booking_table th, #booking_table td {
-    display: table-cell !important;
-    white-space: normal !important; /* ✅ 允許換行 */
-    overflow-wrap: break-word !important; /* ✅ 長單字換行 */
-    word-break: break-all !important;
+/* 3. 欄位設定：強制不換行 */
+td, th { 
+    white-space: nowrap !important;  /* 🚫 絕對禁止換行 */
+    overflow: visible !important;
+    text-overflow: clip !important;  /* 移除 ... */
+    
+    /* 移除寬度限制，讓內容自己決定要多寬 */
+    max-width: none !important;
+    width: auto !important;
     
-    vertical-align: top !important;
-    box-sizing: border-box !important;
-    padding: 8px 5px !important;
-    border: 1px solid #444 !important;
-    font-size: 13px !important;
-    line-height: 1.4 !important;
+    padding: 8px 12px !important;    /* 舒適間距 */
 }
 
-/* 5. 🔥【依照您的要求，固定每個欄位寬度】🔥 */
-/* 注意：這裡同時設定 width 和 min-width 確保瀏覽器不會壓縮它 
-*/
-
-/* #1 id: 60px */
-#booking_table th:nth-child(1), #booking_table td:nth-child(1) { width: 60px !important; min-width: 60px !important; }
-
-/* #2 date: 170px */
-#booking_table th:nth-child(2), #booking_table td:nth-child(2) { width: 170px !important; min-width: 170px !important; }
-
-/* #3 time: 80px */
-#booking_table th:nth-child(3), #booking_table td:nth-child(3) { width: 80px !important; min-width: 80px !important; }
-
-/* #4 name: 120px */
-#booking_table th:nth-child(4), #booking_table td:nth-child(4) { width: 120px !important; min-width: 120px !important; }
-
-/* #5 tel: 120px */
-#booking_table th:nth-child(5), #booking_table td:nth-child(5) { width: 120px !important; min-width: 120px !important; }
-
-/* #6 email: 250px */
-#booking_table th:nth-child(6), #booking_table td:nth-child(6) { width: 250px !important; min-width: 250px !important; }
-
-/* #7 pax: 50px */
-#booking_table th:nth-child(7), #booking_table td:nth-child(7) { width: 50px !important; min-width: 50px !important; }
-
-/* #8 remarks: 180px */
-#booking_table th:nth-child(8), #booking_table td:nth-child(8) { width: 180px !important; min-width: 180px !important; }
-
-/* #9 status: 120px */
-#booking_table th:nth-child(9), #booking_table td:nth-child(9) { width: 120px !important; min-width: 120px !important; }
-
-/* #10 user_id: 320px */
-#booking_table th:nth-child(10), #booking_table td:nth-child(10) { width: 320px !important; min-width: 320px !important; }
+/* 4. 針對 Gradio 內部的 span 也強制不換行 */
+td > span, th > span {
+    white-space: nowrap !important;
+    overflow: visible !important;
+}
 """
 
-# --- 介面開始 ---
+# --- 介面開始 (加入 css 參數) ---
 with gr.Blocks(title="Admin", css=custom_css) as demo:
     
     # 1. 登入介面
@@ -222,10 +189,8 @@ 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("🔄 重新整理")
-        
-        # ✅ elem_id 保持為 booking_table
-        booking_table = gr.Dataframe(interactive=False, elem_id="booking_table")
-        
+        # 表格這裡會自動套用上面的 CSS
+        booking_table = gr.Dataframe(interactive=False)
         with gr.Row():
             id_input = gr.Number(label="訂單 ID", precision=0)
             action_btn = gr.Button("📧 發送確認信 (Hybrid)", variant="primary")