GithubBackup/MyGoNavi
1
0
Fork 0
mirror of https://github.com/Syngnat/GoNavi.git synced 2026-06-13 09:59:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

🐛 fix(data-grid): 修复底部状态栏窄屏信息被隐藏

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

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

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

- 补充布局测试断言，防止状态数字再次被隐藏
This commit is contained in:
Syngnat
2026-06-02 12:32:19 +08:00
parent c277791ef3
commit c000bc3c69
2 changed files with 36 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/DataGrid.layout.test.tsx
View File

@@ -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)');

66
frontend/src/v2-theme.css
View File

@@ -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;