From 8d606aa4565468e2835602284a277241c0e2d3e1 Mon Sep 17 00:00:00 2001
From: Supra4E8C <tan13318527080@163.com>
Date: Mon, 15 Dec 2025 18:53:03 +0800
Subject: [PATCH] fix(ui): optimize mobile layout for header and settings page

---
 src/components/layout/MainLayout.tsx    |  6 ++---
 src/pages/Settings/Settings.module.scss | 30 ++++++++++++++++++++++
 src/pages/SettingsPage.tsx              | 33 ++++++++++++++++---------
 src/styles/layout.scss                  |  6 +++--
 4 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx
index 83d18f4c..9410ce09 100644
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -300,9 +300,6 @@ export function MainLayout() {
             <span className="brand-full">{fullBrandName}</span>
             <span className="brand-abbr">{abbrBrandName}</span>
           </div>
-          <Button className="mobile-menu-btn" variant="ghost" size="sm" onClick={() => setSidebarOpen((prev) => !prev)}>
-            {headerIcons.menu}
-          </Button>
         </div>
 
         <div className="right">
@@ -320,6 +317,9 @@ export function MainLayout() {
           </div>
 
           <div className="header-actions">
+            <Button className="mobile-menu-btn" variant="ghost" size="sm" onClick={() => setSidebarOpen((prev) => !prev)}>
+              {headerIcons.menu}
+            </Button>
             <Button variant="ghost" size="sm" onClick={handleRefreshAll} title={t('header.refresh_all')}>
               {headerIcons.refresh}
             </Button>
diff --git a/src/pages/Settings/Settings.module.scss b/src/pages/Settings/Settings.module.scss
index 5aa5060a..ec4ca31b 100644
--- a/src/pages/Settings/Settings.module.scss
+++ b/src/pages/Settings/Settings.module.scss
@@ -105,3 +105,33 @@
   display: flex;
   gap: $spacing-sm;
 }
+
+.retryRow {
+  display: flex;
+  align-items: flex-end;
+  gap: $spacing-md;
+  flex-wrap: wrap;
+
+  :global(.form-group) {
+    margin-bottom: 0;
+  }
+
+  @include mobile {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.retryInput {
+  width: 140px;
+
+  @include mobile {
+    width: 100%;
+  }
+}
+
+.retryButton {
+  @include mobile {
+    width: 100%;
+  }
+}
diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx
index 1deb6d1c..43696fab 100644
--- a/src/pages/SettingsPage.tsx
+++ b/src/pages/SettingsPage.tsx
@@ -266,18 +266,27 @@ export function SettingsPage() {
       </Card>
 
       <Card title={t('basic_settings.retry_title')}>
-        <Input
-          label={t('basic_settings.retry_count_label')}
-          type="number"
-          value={retryValue}
-          onChange={(e) => setRetryValue(Number(e.target.value))}
-          disabled={disableControls || loading}
-          rightElement={
-            <Button onClick={handleRetryUpdate} loading={pending.retry} disabled={disableControls || loading}>
-              {t('basic_settings.retry_update')}
-            </Button>
-          }
-        />
+        <div className={styles.retryRow}>
+          <Input
+            label={t('basic_settings.retry_count_label')}
+            type="number"
+            inputMode="numeric"
+            min={0}
+            step={1}
+            value={retryValue}
+            onChange={(e) => setRetryValue(Number(e.target.value))}
+            disabled={disableControls || loading}
+            className={styles.retryInput}
+          />
+          <Button
+            className={styles.retryButton}
+            onClick={handleRetryUpdate}
+            loading={pending.retry}
+            disabled={disableControls || loading}
+          >
+            {t('basic_settings.retry_update')}
+          </Button>
+        </div>
       </Card>
 
       <Card title={t('basic_settings.quota_title')}>
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 323324b5..121d6abe 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -139,8 +139,10 @@
 
     // 移动端：禁用动画，只显示缩写
     @media (max-width: $breakpoint-mobile) {
-      margin-right: $spacing-sm;
       cursor: default;
+      flex-shrink: 1;
+      min-width: 0;
+      margin-right: 0;
 
       .brand-full,
       .brand-abbr {
@@ -168,7 +170,7 @@
     flex-shrink: 0;
 
     @media (max-width: $breakpoint-mobile) {
-      display: flex;
+      display: inline-flex;
     }
   }