Browse Source

style(client): tighten sidebar layout

_Kerman 2 months ago
parent
commit
1d4ab4492e

+ 2 - 2
packages/client/ui-layout/src/client/columns.ts

@@ -20,10 +20,10 @@ export interface Columns { sidebar: number; center: number; details: number }
 /** Center column floor; only the final fallback may go below it. */
 export const CENTER_MIN = 640
 /** Sidebar drag clamp floor. */
-export const SIDEBAR_MIN = 280
+export const SIDEBAR_MIN = 264
 /** Sidebar drag clamp ceiling. */
 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
 /** Closed-sidebar rail: a 24px icon column between 16px horizontal paddings. */
 export const SIDEBAR_COLLAPSED = 56

+ 9 - 7
packages/client/ui-settings/src/client/SettingsRoot.module.css

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

+ 1 - 1
packages/client/ui-sidebar/src/client/SidebarRoot.module.css

@@ -224,7 +224,7 @@
 }
 
 /* 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. */
 .footArea {
   flex: none;