Update app.py

app.py

@@ -119,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 {
@@ -128,48 +128,54 @@ 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. 外層容器：強制開啟水平捲軸 */
-.table-wrap, .svelte-12cmxck, .wrap {
+/* 1. 外層容器：負責產生捲軸，並強制為區塊元素 */
+.table-wrap, .wrap, .svelte-12cmxck, div[id^="dataframe"] {
     overflow-x: auto !important;
+    overflow-y: hidden !important;
     display: block !important;
+    width: 100% !important;
+    max-width: 100vw !important;
 }
 
-/* 2. 表格本體：
-   width: auto -> 內容多少寬度就多少
-   table-layout: auto -> 自動依內容計算
-*/
+/* 2. 表格本體：強制使用表格佈局，禁止 Flex/Grid 干擾 */
 table { 
+    display: table !important;
     table-layout: auto !important; 
-    width: auto !important;
+    width: max-content !important; /* 核心：內容多少就撐多寬，超出就滾動 */
+    min-width: 100% !important;
     border-collapse: collapse !important;
+    margin: 0 !important;
 }
 
-/* 3. 欄位設定：
-   white-space: nowrap -> 死都不准換行 (這會把表格撐寬)
-   max-width: none -> 移除任何寬度限制
-*/
-td, th { 
-    white-space: nowrap !important;
-    min-width: 10px !important; /* 防止縮太小 */
-    max-width: none !important;
+/* 3. 強制橫向排列 (解決變垂直堆疊的問題) */
+thead { display: table-header-group !important; }
+tbody { display: table-row-group !important; }
+tr { display: table-row !important; }
+
+/* 4. 儲存格：死都不換行，自動寬度 */
+th, td { 
+    display: table-cell !important;
+    white-space: nowrap !important; /* 禁止換行 */
     width: auto !important;
+    max-width: none !important;     /* 移除任何最大寬度限制 */
     
-    padding: 8px 12px !important;
-    border: 1px solid #444 !important; /* 加上邊框比較清楚 */
+    box-sizing: border-box !important;
+    padding: 10px 15px !important;  /* 增加一點間距讓手指好滑 */
+    border: 1px solid #444 !important;
+    
+    /* 確保內容可見 */
+    visibility: visible !important;
+    opacity: 1 !important;
 }
 
-/* 4. Gradio 內部的 span */
-td > span, th > span {
-    white-space: nowrap !important;
-    display: inline-block !important;
-}
+/* 5. 隱藏 Gradio 可能產生的手機版卡片視圖元素 */
+.mobile-view, .cards, .card { display: none !important; }
 """
 
 # --- 介面開始 (加入 css 參數) ---