root/goodbuddy
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix: align settings page shell

Browse Source 
Settings Center used different header and content gutters, omitted the standard title divider, and mirrored scrollbar space on the left of its category navigation. The title and two-column content now share responsive page gutters, restore the standard PageHeader boundary, and balance selected rows against the visible scrollport.

Release note: 统一设置中心与其他一级页面的标题分隔线和响应式边距，并修复左侧分类选中高亮在滚动时的视觉偏移。
This commit is contained in:
mesalogo
2026-08-17 00:52:51 +08:00
parent 2df8fb1364
commit 2b556e38bd
3 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/src/WorkspacePrimitives.test.tsx
+8 -2
View File
@@ -209,13 +209,19 @@ describe('WorkspacePrimitives', () => {
it('keeps full-page settings navigation readable and content fluid', () => {
expect(stylesheet).toMatch(
/\.settings-page \.settings-panel__body\s*\{[^}]*grid-template-columns:\s*220px minmax\(0,\s*1fr\);/u
/\.settings-page \.settings-panel__header\s*\{[^}]*padding:\s*var\(--page-gutter\) var\(--page-gutter\) 0;/u
)
expect(stylesheet).toMatch(
/\.settings-page \.settings-panel__header \.page-header\s*\{[^}]*padding-bottom:\s*var\(--space-4\);[^}]*border-bottom:\s*1px solid var\(--border-subtle\);/u
)
expect(stylesheet).toMatch(
/\.settings-page \.settings-panel__body\s*\{[^}]*padding:\s*var\(--space-6\) var\(--page-gutter\) var\(--page-gutter\);[^}]*grid-template-columns:\s*220px minmax\(0,\s*1fr\);/u
)
expect(stylesheet).toMatch(
/@media \(max-width: 1020px\)\s*\{[\s\S]*?\.settings-page \.settings-panel__body\s*\{[^}]*grid-template-columns:\s*196px minmax\(0,\s*1fr\);/u
)
expect(stylesheet).toMatch(
/\.settings-page \.settings-tabs\s*\{[^}]*scrollbar-gutter:\s*stable both-edges;/u
/\.settings-page \.settings-tabs\s*\{[^}]*scrollbar-gutter:\s*auto;/u
)
expect(stylesheet).toMatch(
/\.settings-page \.settings-panel__content\s*\{[^}]*width:\s*min\(100%,\s*var\(--content-standard\)\);/u
src/renderer/src/styles.css
+5 -5
View File
@@ -4914,6 +4914,7 @@ button > svg {
}
.settings-page .settings-panel__header {
padding: var(--page-gutter) var(--page-gutter) 0;
border-bottom: 0;
}
@@ -4927,8 +4928,8 @@ button > svg {
}
.settings-page .settings-panel__header .page-header {
padding-bottom: 0;
border-bottom: 0;
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--border-subtle);
}
.settings-panel__header .page-header__content {
@@ -5013,7 +5014,7 @@ button > svg {
.settings-page .settings-panel__body {
display: grid;
min-height: 0;
padding: 24px 32px 32px;
padding: var(--space-6) var(--page-gutter) var(--page-gutter);
overflow: hidden;
align-items: stretch;
grid-template-columns: 220px minmax(0, 1fr);
@@ -5049,7 +5050,7 @@ button > svg {
align-self: stretch;
flex-direction: column;
grid-template-columns: none;
scrollbar-gutter: stable both-edges;
scrollbar-gutter: auto;
}
.settings-page .settings-panel__content {
@@ -11105,7 +11106,6 @@ details.settings-section > :not(summary) + :not(summary) {
.settings-page .settings-panel__body {
display: grid;
padding: 20px;
overflow: hidden;
align-items: stretch;
grid-template-columns: 196px minmax(0, 1fr);