From 5fc0a6504a676041654265b4e8c0eb2de72805d1 Mon Sep 17 00:00:00 2001
From: Arthur <765317595@qq.com>
Date: Thu, 11 Jun 2026 16:04:04 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui)=E6=97=A7=E7=89=88UI=E5=B7=A6=E4=BE=A7?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=97=A0=E6=B3=95=E9=80=9A=E8=BF=87=E9=BC=A0?=
 =?UTF-8?q?=E6=A0=87=E6=89=A9=E5=A4=A7=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.css                 | 6 ++++++
 frontend/src/App.tool-center.test.ts | 8 ++++++++
 2 files changed, 14 insertions(+)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index e48ea26..6d59d91 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -685,3 +685,9 @@ body[data-theme='dark'] .gonavi-query-editor-column-token {
 body[data-theme='dark'] .gonavi-query-editor-db-token {
   color: #c4b5fd;
 }
+
+/* Legacy sidebar resize bounds — mirror v2 .gn-v2-app-sider so Ant Design inline width locks do not collapse drag range. */
+body[data-ui-version="legacy"] .ant-layout-sider {
+  min-width: 232px !important;
+  max-width: 420px !important;
+}
diff --git a/frontend/src/App.tool-center.test.ts b/frontend/src/App.tool-center.test.ts
index 86ee99f..573f19a 100644
--- a/frontend/src/App.tool-center.test.ts
+++ b/frontend/src/App.tool-center.test.ts
@@ -6,6 +6,10 @@ const appSource = readFileSync(
   fileURLToPath(new globalThis.URL('./App.tsx', import.meta.url)),
   'utf8',
 );
+const appCss = readFileSync(
+  fileURLToPath(new globalThis.URL('./App.css', import.meta.url)),
+  'utf8',
+);
 const linuxCJKFontBannerSource = readFileSync(
   fileURLToPath(new globalThis.URL('./components/LinuxCJKFontBanner.tsx', import.meta.url)),
   'utf8',
@@ -116,6 +120,10 @@ describe('tool center menu entries', () => {
     expect(appSource).toContain('ghostRef.current.style.left = `${startGuideLeft + (newWidth - startWidth)}px`;');
   });
 
+  it('keeps legacy sidebar resize bounds aligned with the v2 sider CSS limits', () => {
+    expect(appCss).toMatch(/body\[data-ui-version="legacy"\]\s+\.ant-layout-sider\s*\{[^}]*min-width:\s*232px\s*!important;[^}]*max-width:\s*420px\s*!important;/s);
+  });
+
   it('keeps connection modal warm-mounted while leaving the other heavyweight modals conditional', () => {
     expect(appSource).toContain('const [isConnectionModalMounted, setIsConnectionModalMounted] = useState(false);');
     expect(appSource).toContain('{isConnectionModalMounted && (');