From 1a2de796f671b1343c4a68994c24ce0ff7c5665e Mon Sep 17 00:00:00 2001
From: baiqing <lbx12309@icloud.com>
Date: Sun, 17 May 2026 10:27:11 +0800
Subject: [PATCH] =?UTF-8?q?fix(shell):=20sidebar=20=E5=BA=95=E9=83=A8?=
 =?UTF-8?q?=E7=BF=BB=E5=9B=9E=E4=B8=A4=E8=A1=8C=EF=BC=88=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?=E5=9C=A8=E4=B8=8A=E3=80=81=E8=AE=BE=E7=BD=AE=E5=9C=A8=E4=B8=8B?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PR #462 把底部折成一行，结果在窄 sidebar 下「设置」被挤成两行
竖字、版本 chip 糊在旁边，可读性大幅退化。改回两行但反过来：
- 上行：[BETA] 版本 v1.3.4-1（容下 BETA 标 + 完整版本号）
- 下行：⚙ 设置（真正落到最底，符合最初诉求）

设置按钮恢复 display:flex + label flex:1 跟上面 nav 按钮统一风格。
---
 .../app/src/components/FloatingShell.tsx      | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/openless-all/app/src/components/FloatingShell.tsx b/openless-all/app/src/components/FloatingShell.tsx
index 364a9fef..7abce175 100644
--- a/openless-all/app/src/components/FloatingShell.tsx
+++ b/openless-all/app/src/components/FloatingShell.tsx
@@ -265,39 +265,20 @@ function FloatingShellBody({ os, initialTab, initialSettings }: { os: OS; initia
 
           <div style={{ flex: 1 }} />
 
-          {/* 底部一行：设置按钮（左）+ 版本 chip（右，marginLeft: auto 推到行尾）。
-              之前是两行：设置一行、版本另一行；浪费纵向空间，且把版本顶得太靠下。 */}
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingTop: 10 }}>
-            <button
-              onClick={() => openSettings()}
-              className={settingsOpen ? 'ol-nav-btn ol-nav-btn-active' : 'ol-nav-btn'}
-              style={{
-                display: 'inline-flex', alignItems: 'center', gap: 10,
-                padding: '7px 10px',
-                borderRadius: 8, border: 0,
-                background: settingsOpen ? 'var(--ol-surface)' : 'transparent',
-                boxShadow: settingsOpen ? '0 1px 2px rgba(0,0,0,.05), 0 0 0 0.5px rgba(0,0,0,.06)' : 'none',
-                fontFamily: 'inherit', fontSize: 13,
-                cursor: 'default',
-                transition: 'color 0.16s var(--ol-motion-quick), background 0.16s var(--ol-motion-quick)',
-                textAlign: 'left',
-              }}
-            >
-              <Icon name="settings" size={14} />
-              <span>{t('shell.footer.settings')}</span>
-            </button>
-
+          {/* 底部两行：上行 = 版本 chip（含 BETA 标），下行 = 设置按钮。
+              单行布局在窄 sidebar 下会把「设置」挤成两行竖字 + 版本糊一起；
+              翻回两行同时把顺序反过来：设置真正落到最底，版本在它上面。 */}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, paddingTop: 10 }}>
             <div
               style={{
-                marginLeft: 'auto',
                 display: 'flex',
                 alignItems: 'center',
-                gap: 6,
-                paddingRight: 10,
+                gap: 8,
+                flexWrap: 'wrap',
+                padding: '0 10px',
                 fontFamily: 'var(--ol-font-sans)',
                 fontSize: 11,
                 color: 'var(--ol-ink-4)',
-                whiteSpace: 'nowrap',
               }}
             >
               {IS_BETA_BUILD && (
@@ -316,6 +297,25 @@ function FloatingShellBody({ os, initialTab, initialSettings }: { os: OS; initia
 
               <span>{t('shell.footer.version', { version: APP_VERSION_LABEL })}</span>
             </div>
+
+            <button
+              onClick={() => openSettings()}
+              className={settingsOpen ? 'ol-nav-btn ol-nav-btn-active' : 'ol-nav-btn'}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 10,
+                padding: '7px 10px',
+                borderRadius: 8, border: 0,
+                background: settingsOpen ? 'var(--ol-surface)' : 'transparent',
+                boxShadow: settingsOpen ? '0 1px 2px rgba(0,0,0,.05), 0 0 0 0.5px rgba(0,0,0,.06)' : 'none',
+                fontFamily: 'inherit', fontSize: 13,
+                cursor: 'default',
+                transition: 'color 0.16s var(--ol-motion-quick), background 0.16s var(--ol-motion-quick)',
+                textAlign: 'left',
+              }}
+            >
+              <Icon name="settings" size={14} />
+              <span style={{ flex: 1 }}>{t('shell.footer.settings')}</span>
+            </button>
           </div>
         </aside>