Update ui/layouts.py

ui/layouts.py

@@ -82,6 +82,28 @@ def create_ui(visit_count_html: str, theme: gr.Theme):
                 .custom-header { padding: 3rem 1rem; border-radius: 0; }
                 .custom-header h1 { font-size: 2.5rem; }
                 .custom-header p { font-size: 1.2rem; }
+
+                /* ✨ 為手機顯示調整 Tabs 樣式，強制換行並平均分佈 */
+                /* 目標 Gradio 的 Tab 容器類別為 .gradio-tabs */
+                .gradio-tabs .tabs-nav {
+                    display: flex; /* 使用 flexbox 佈局 */
+                    flex-wrap: wrap; /* 允許項目換行 */
+                    justify-content: space-around; /* 均勻分佈項目 */
+                    gap: 5px; /* 項目間距 */
+                    padding: 5px; /* 內邊距 */
+                }
+
+                /* 目標 Gradio 的單個 Tab 項目類別為 .gradio-tabs > button */
+                .gradio-tabs .tabs-nav > button {
+                    flex: 1 1 auto; /* 允許項目彈性增長和縮小，並有基礎寬度 */
+                    min-width: calc(33% - 10px); /* 每行顯示3個，考慮到 gap */
+                    max-width: calc(50% - 10px); /* 小螢幕時至少顯示2個 */
+                    box-sizing: border-box; /* 確保 padding 和 border 包含在寬度內 */
+                    text-align: center;
+                    white-space: normal; /* 允許文字換行 */
+                    padding: 8px 5px; /* 調整 padding */
+                    font-size: 0.85rem; /* 調整字體大小 */
+                }
             }
             </style>
             <div class="custom-header">
@@ -91,8 +113,6 @@ def create_ui(visit_count_html: str, theme: gr.Theme):
             """
         )
 
-        # --- ✨ 修改圖片路徑以符合與 app.py 同層目錄 ---
-        # 請確保 'homepage_image.png' 就是您的圖片檔名
         with gr.Row(elem_classes="homepage-image-container"):
             gr.Image(value="homepage_image.png", show_label=False, interactive=False, container=False)