style(client): tighten sidebar layout

This commit is contained in:
_Kerman
2026-08-11 13:20:19 +08:00
parent 8e0cb2bdba
commit 1d4ab4492e
3 changed files with 12 additions and 10 deletions

View File

@@ -20,10 +20,10 @@ export interface Columns { sidebar: number; center: number; details: number }
/** Center column floor; only the final fallback may go below it. */ /** Center column floor; only the final fallback may go below it. */
export const CENTER_MIN = 640 export const CENTER_MIN = 640
/** Sidebar drag clamp floor. */ /** Sidebar drag clamp floor. */
export const SIDEBAR_MIN = 280 export const SIDEBAR_MIN = 264
/** Sidebar drag clamp ceiling. */ /** Sidebar drag clamp ceiling. */
export const SIDEBAR_MAX = 420 export const SIDEBAR_MAX = 420
/** Sidebar width before any user drag (= the drag floor). */ /** Sidebar width before any user drag. */
export const SIDEBAR_DEFAULT = 280 export const SIDEBAR_DEFAULT = 280
/** Closed-sidebar rail: a 24px icon column between 16px horizontal paddings. */ /** Closed-sidebar rail: a 24px icon column between 16px horizontal paddings. */
export const SIDEBAR_COLLAPSED = 56 export const SIDEBAR_COLLAPSED = 56

View File

@@ -1,19 +1,20 @@
/* Settings shell (figma 501:29904 mask context / 501:29947 panel): sidebar /* Settings shell (figma 501:29904 mask context / 501:29947 panel): sidebar
foot trigger row + centered 1080x700 modal panel. The trigger reproduces foot trigger row + centered 1080x700 modal panel. The trigger uses the
the former sidebar foot geometry (49px wide row / 36px rail circle); the sidebar's 38px wide row / 36px rail circle rhythm; the
panel is a two-column layout — 188px nav rail + content column with a panel is a two-column layout — 188px nav rail + content column with a
54px header and the 24px-padded options area. */ 54px header and the 24px-padded options area. */
/* Trigger row (former sidebar foot, figma 133:7668): 49px hover pill. */ /* Trigger row: match the other wide sidebar controls' compact vertical rhythm. */
.trigger { .trigger {
flex: none; flex: none;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
width: 100%; width: 100%;
height: 49px; height: 38px;
margin: 8px 0 0; margin: 4px 0 0;
padding: 0 2px 0 6px; padding: 8px 2px 8px 6px;
box-sizing: border-box;
border: none; border: none;
border-radius: 12px; border-radius: 12px;
background: transparent; background: transparent;
@@ -22,6 +23,7 @@
color: var(--dsw-alias-label-primary); color: var(--dsw-alias-label-primary);
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
line-height: 22px;
} }
.trigger:hover { .trigger:hover {
@@ -32,7 +34,7 @@
.trigger.rail { .trigger.rail {
width: 36px; width: 36px;
height: 36px; height: 36px;
margin: 18px 0 10px; margin: 8px 0 10px;
justify-content: center; justify-content: center;
gap: 0; gap: 0;
padding: 0; padding: 0;

View File

@@ -224,7 +224,7 @@
} }
/* Foot seat: a pure layout socket pinned under the region; the ui-settings /* Foot seat: a pure layout socket pinned under the region; the ui-settings
trigger row inside owns its own geometry (49px wide row / 36px rail trigger row inside owns its own geometry (38px wide row / 36px rail
circle) and hover chrome. */ circle) and hover chrome. */
.footArea { .footArea {
flex: none; flex: none;