🐛 fix(sidebar): 避免默认显示横向滚动条

Fixes #329
This commit is contained in:
Syngnat
2026-04-11 22:27:26 +08:00
parent 7a2563b83b
commit 1a0ba9a499
3 changed files with 50 additions and 5 deletions

View File

@@ -42,28 +42,32 @@ body, #root {
overflow-y: hidden;
}
.sidebar-tree-scroll-content {
min-width: 100%;
}
.sidebar-tree-scroll-shell .ant-tree {
min-width: 100%;
}
.sidebar-tree-scroll-shell .ant-tree .ant-tree-list-holder,
.sidebar-tree-scroll-shell .ant-tree .ant-tree-list-holder-inner {
min-width: max-content;
min-width: 100%;
}
.sidebar-tree-scroll-shell .ant-tree .ant-tree-treenode {
width: max-content;
width: auto;
min-width: 100%;
}
.sidebar-tree-scroll-shell .ant-tree .ant-tree-node-content-wrapper {
width: max-content !important;
min-width: 100%;
width: auto !important;
min-width: 0;
}
.sidebar-tree-scroll-shell .ant-tree .ant-tree-title {
flex: 0 0 auto;
min-width: max-content;
min-width: 0;
overflow: visible;
text-overflow: clip;
}

17
frontend/src/node-test-shims.d.ts vendored Normal file
View File

@@ -0,0 +1,17 @@
declare module 'node:fs' {
export function readFileSync(path: string | URL, encoding: string): string;
}
declare module 'node:path' {
interface PathModule {
dirname(path: string): string;
resolve(...paths: string[]): string;
}
const path: PathModule;
export default path;
}
declare module 'node:url' {
export function fileURLToPath(url: string | URL): string;
}

View File

@@ -0,0 +1,24 @@
import { describe, expect, it } from 'vitest';
import { readFileSync } from 'node:fs';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const appCss = readFileSync(path.resolve(__dirname, './App.css'), 'utf8');
describe('sidebar tree horizontal scroll css', () => {
it('keeps the virtual tree width anchored to the sidebar by default', () => {
expect(appCss).toMatch(/\.sidebar-tree-scroll-shell\s+\.ant-tree\s+\.ant-tree-list-holder,\s*\.sidebar-tree-scroll-shell\s+\.ant-tree\s+\.ant-tree-list-holder-inner\s*\{[^}]*min-width:\s*100%;/s);
expect(appCss).not.toMatch(/\.sidebar-tree-scroll-shell\s+\.ant-tree\s+\.ant-tree-list-holder,\s*\.sidebar-tree-scroll-shell\s+\.ant-tree\s+\.ant-tree-list-holder-inner\s*\{[^}]*max-content/s);
expect(appCss).toMatch(/\.sidebar-tree-scroll-shell\s+\.ant-tree\s+\.ant-tree-treenode\s*\{[^}]*width:\s*auto;[^}]*min-width:\s*100%;/s);
expect(appCss).not.toMatch(/\.sidebar-tree-scroll-shell\s+\.ant-tree\s+\.ant-tree-treenode\s*\{[^}]*width:\s*max-content/s);
expect(appCss).toMatch(/\.sidebar-tree-scroll-shell\s+\.ant-tree\s+\.ant-tree-node-content-wrapper\s*\{[^}]*width:\s*auto\s*!important;[^}]*min-width:\s*0;/s);
expect(appCss).not.toMatch(/\.sidebar-tree-scroll-shell\s+\.ant-tree\s+\.ant-tree-node-content-wrapper\s*\{[^}]*max-content/s);
expect(appCss).toMatch(/\.sidebar-tree-scroll-shell\s+\.ant-tree\s+\.ant-tree-title\s*\{[^}]*min-width:\s*0;[^}]*overflow:\s*visible;/s);
expect(appCss).not.toMatch(/\.sidebar-tree-scroll-shell\s+\.ant-tree\s+\.ant-tree-title\s*\{[^}]*max-content/s);
});
});