From c000bc3c690b604d1259a94b393d4a69c993ca9c Mon Sep 17 00:00:00 2001
From: Syngnat <yangguofeng919@gmail.com>
Date: Tue, 2 Jun 2026 12:32:19 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(data-grid):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E5=BA=95=E9=83=A8=E7=8A=B6=E6=80=81=E6=A0=8F=E7=AA=84?=
 =?UTF-8?q?=E5=B1=8F=E4=BF=A1=E6=81=AF=E8=A2=AB=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 状态栏外层改为横向滚动，避免 AI 面板开启或小屏时功能被遮挡

- main/right 区域保持 max-content 宽度，避免分页和操作区被压缩

- 移除窄屏下隐藏行数和未提交状态的媒体规则

- 补充布局测试断言，防止状态数字再次被隐藏
---
 .../src/components/DataGrid.layout.test.tsx   |  8 ++-
 frontend/src/v2-theme.css                     | 66 ++++++++-----------
 2 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/DataGrid.layout.test.tsx b/frontend/src/components/DataGrid.layout.test.tsx
index 7897c4b..1103ce0 100644
--- a/frontend/src/components/DataGrid.layout.test.tsx
+++ b/frontend/src/components/DataGrid.layout.test.tsx
@@ -564,7 +564,13 @@ describe('DataGrid layout', () => {
     expect(css).toContain('width: 66px !important;');
     expect(css).toContain('grid-template-columns: 160px 26px 26px !important;');
     expect(css).toContain('container-name: gn-v2-data-grid-statusbar;');
-    expect(css).toContain('body[data-ui-version="v2"] .gn-v2-data-grid-status-right::-webkit-scrollbar');
+    expect(css).toContain('body[data-ui-version="v2"] .gn-v2-data-grid-statusbar::-webkit-scrollbar');
+    expect(css).toContain('scrollbar-width: thin;');
+    expect(css).toContain('min-width: max-content;');
+    expect(css).toContain('flex: 0 0 auto;');
+    expect(css).toContain('body[data-ui-version="v2"] .gn-v2-data-grid-status-center {');
+    expect(css).not.toContain('.gn-v2-data-grid-status-center > span:last-child {\n    display: none;');
+    expect(css).not.toContain('.gn-v2-data-grid-status-center > span:nth-child(2) {\n    display: none;');
     expect(css).toContain('body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap::-webkit-scrollbar');
     expect(css).toContain('@container gn-v2-data-grid-statusbar (max-width: 960px)');
     expect(css).toContain('@container gn-v2-data-grid-statusbar (max-width: 760px)');
diff --git a/frontend/src/v2-theme.css b/frontend/src/v2-theme.css
index 774ffd5..bdf4bdf 100644
--- a/frontend/src/v2-theme.css
+++ b/frontend/src/v2-theme.css
@@ -3473,8 +3473,8 @@ body[data-ui-version="v2"] .gn-v2-data-grid-statusbar {
   --gn-v2-statusbar-control-height: 26px;
   container-type: inline-size;
   container-name: gn-v2-data-grid-statusbar;
-  height: calc(36px * var(--gn-ui-scale, 1));
-  min-height: calc(36px * var(--gn-ui-scale, 1));
+  height: calc(40px * var(--gn-ui-scale, 1));
+  min-height: calc(40px * var(--gn-ui-scale, 1));
   display: flex;
   align-items: center;
   gap: calc(8px * var(--gn-ui-scale, 1));
@@ -3483,41 +3483,45 @@ body[data-ui-version="v2"] .gn-v2-data-grid-statusbar {
   border-top: 0.5px solid var(--gn-br-1);
   background: var(--gn-bg-panel-2);
   white-space: nowrap;
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: var(--gn-br-3) transparent;
   flex-shrink: 0;
   box-sizing: border-box;
 }
 
+body[data-ui-version="v2"] .gn-v2-data-grid-statusbar::-webkit-scrollbar {
+  height: 7px;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-statusbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-statusbar::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: var(--gn-br-3);
+}
+
 body[data-ui-version="v2"] .gn-v2-data-grid-status-main {
   display: inline-flex;
   align-items: center;
   gap: calc(8px * var(--gn-ui-scale, 1));
-  min-width: 0;
-  flex: 1 1 auto;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scrollbar-width: none;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-status-main::-webkit-scrollbar {
-  display: none;
+  min-width: max-content;
+  flex: 0 0 auto;
+  overflow: visible;
 }
 
 body[data-ui-version="v2"] .gn-v2-data-grid-status-right {
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
-  flex: 0 1 auto;
-  min-width: 0;
-  max-width: 100%;
+  flex: 0 0 auto;
+  min-width: max-content;
+  max-width: none;
   margin-left: auto;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scrollbar-width: none;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-status-right::-webkit-scrollbar {
-  display: none;
+  overflow: visible;
 }
 
 @media (max-width: 1180px) {
@@ -3666,9 +3670,9 @@ body[data-ui-version="v2"] .gn-v2-data-grid-result-switcher .ant-segmented-item-
 body[data-ui-version="v2"] .gn-v2-data-grid-status-center {
   height: var(--gn-v2-statusbar-control-height);
   min-height: var(--gn-v2-statusbar-control-height);
-  gap: 6px;
+  gap: 4px;
   flex: 0 0 auto;
-  min-width: fit-content;
+  min-width: max-content;
   overflow: visible;
   color: var(--gn-fg-4);
   font-family: var(--gn-font-mono);
@@ -3691,7 +3695,7 @@ body[data-ui-version="v2"] .gn-v2-data-grid-status-center > span:not(:last-child
   display: inline-block;
   width: 1px;
   height: 10px;
-  margin-left: 8px;
+  margin-left: 6px;
   vertical-align: -1px;
   background: var(--gn-br-1);
 }
@@ -3884,18 +3888,6 @@ body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-select-focuse
   box-shadow: none !important;
 }
 
-@media (max-width: 1460px) {
-  body[data-ui-version="v2"] .gn-v2-data-grid-status-center > span:last-child {
-    display: none;
-  }
-}
-
-@media (max-width: 1360px) {
-  body[data-ui-version="v2"] .gn-v2-data-grid-status-center > span:nth-child(2) {
-    display: none;
-  }
-}
-
 body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-btn {
   width: 26px !important;
   height: 26px !important;