網頁前端的寬度設定與 Streamlit 預設字體大小在手機上打架

src/streamlit_app.py

@@ -10,49 +10,50 @@ st.markdown(
     """
     <style>
     /* 1. 隱藏側邊欄捲軸 */
-    [data-testid="stSidebar"] section::-webkit-scrollbar {
-        display: none;
-    }
-    [data-testid="stSidebar"] section {
-        -ms-overflow-style: none;
-        scrollbar-width: none;
+    [data-testid="stSidebar"] section::-webkit-scrollbar { display: none; }
+    [data-testid="stSidebar"] section { -ms-overflow-style: none; scrollbar-width: none; }
+    
+    /* 🚀 2. 全域字體縮小，適應手機螢幕 */
+    html, body, [class*="st-"] {
+        font-size: 14px !important;
     }
     
-    /* 2. 調整範例按鈕樣式 (維持科技藍) */
+    /* 🚀 3. 調整範例按鈕樣式：變矮、字體變小、支援多行自動折行 */
     .stButton button {
-        width: auto;
-        padding: 5px 15px;
-        border-radius: 20px;
-        border: 1px solid #58a6ff; 
-        color: #58a6ff;
+        width: 100%;
+        padding: 6px 10px; /* 縮小上下內距 */
+        border-radius: 12px;
+        border: 1px solid #D4AF37;
+        color: #D4AF37;
         background-color: transparent;
+        font-size: 13px !important; /* 讓按鈕字體再小一點 */
+        line-height: 1.3;
+        min-height: auto;
+        white-space: normal; /* 允許長句子自動折行，避免撐爆寬度 */
+        height: auto;
     }
     
-    /* 🚀 3. 關鍵修正：隱藏 Header 背景與右側選單，但保留左側展開按鈕 */
-    header[data-testid="stHeader"] {
-        background-color: rgba(0,0,0,0) !important; /* 背景透明 */
-        color: #58a6ff !important;
+    /* 4. 極度壓縮主畫面空白 */
+    .block-container {
+        padding-top: 1.2rem !important;
+        padding-bottom: 5rem !important; 
+        padding-left: 0.8rem !important;
+        padding-right: 0.8rem !important;
     }
     
-    /* 隱藏右側的「...」選單按鈕 */
+    /* 5. 隱藏 Header 背景與右側選單，但保留左側展開按鈕 */
+    header[data-testid="stHeader"] {
+        background-color: rgba(0,0,0,0) !important; 
+    }
     header[data-testid="stHeader"] #MainMenu {
         visibility: hidden;
     }
-    
-    /* 確保左側的展開按鈕 (CollapsedControl) 是可見的 */
     div[data-testid="collapsedControl"] {
         visibility: visible !important;
-        background-color: #0d1117 !important; /* 給它一點深色背景，免得在白色畫面上看不見 */
+        background-color: #1A1A1A !important;
+        color: #D4AF37 !important;
         border-radius: 0 5px 5px 0;
-        top: 10px;
-    }
-
-    /* 4. 壓縮主畫面邊距 */
-    .block-container {
-        padding-top: 2rem !important;
-        padding-bottom: 5rem !important;
-        padding-left: 1rem !important;
-        padding-right: 1rem !important;
+        top: 5px;
     }
     </style>
     """,