fix(sidebar): shrink collapsed rail to 48px so chips center without shifting on toggle

Author: j15z

apps/sim/app/_styles/globals.css

@@ -11,7 +11,7 @@
  */
 :root {
   --sidebar-width: 0px; /* 0 outside workspace; blocking script always sets actual value on workspace pages */
-  --sidebar-collapsed-width: 51px; /* icon rail on web; desktop overrides to 0 before first paint */
+  --sidebar-collapsed-width: 48px; /* icon rail on web; desktop overrides to 0 before first paint */
   --sidebar-expanded-width: 238px; /* SIDEBAR_WIDTH.DEFAULT; the width to restore to, held even while collapsed */
   --desktop-title-bar-height: 0px; /* macOS traffic-light lane; desktop overrides before first paint */
   --workspace-content-title-bar-inset: 0px; /* lane the content pane must leave clear; only non-zero when the pane, not the sidebar, sits under it */

apps/sim/app/layout.tsx

@@ -75,7 +75,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 // The macOS desktop shell overlays native traffic lights on the
                 // workspace. Mark it before first paint so the sidebar reserves
                 // its inset title-bar lane without a post-hydration layout shift.
-                var collapsedSidebarWidth = 51;
+                var collapsedSidebarWidth = 48;
                 try {
                   if (window.simDesktop && /Mac/i.test(navigator.userAgent)) {
                     document.documentElement.setAttribute('data-sim-desktop-title-bar', 'inset');

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/constants.ts

@@ -35,27 +35,26 @@ export const SIDEBAR_DIVIDER_PAD_BELOW_CLASS = 'pt-2'
  * marker on the sidebar `aside` (the hover-peek card drops `data-collapsed`,
  * so peeked rows stay expanded). Collapses a full-width row to the natural
  * icon-only chip — 32px, the chip's own `px-2` + 16px glyph, matching the
- * header's Search/Collapse pills — and CENTERS it in the 51px rail:
- * (51 − 32) / 2 = 9.5px per side, the 8px gutter + this 1.5px margin, which
- * puts the glyph on the rail's midline. Padding stays untouched (the glyph is
- * already centered within the chip). Centering costs a 1.5px drift from the
- * expanded rows' glyph column (24px in); margin sits in the transition list
- * so that drift glides on the rail's own curve rather than snapping — the
- * glyph-stationary alternative left the rail visibly left-biased (8px vs
- * 11px insets). Collapsing, width and margin tween on the 175ms curve the
- * rail closes on; expanding targets `auto` width (not interpolable), so the
- * chip snaps to the still-narrow rail's width and stretch-tracks it open
- * while the margin tweens back. The duration is `!important` because the
- * aside zeroes chip transition durations
+ * header's Search/Collapse pills. Only the WIDTH is overridden: the rail is
+ * 48px precisely so that the plain 8px item gutter centers the chip
+ * ((48 − 32) / 2 = 8) and puts the glyph (24px in) on the rail's midline —
+ * the same 24px column the expanded rows use, so NOTHING moves on toggle.
+ * At the previous 51px rail those goals were mutually exclusive by 1.5px
+ * (rail midline 25.5 vs glyph column 24), which produced either a
+ * left-biased rail or a drift on toggle; keep the rail width and this chip
+ * width commensurate (rail = chip + 2 × gutter) if either ever changes.
+ * Collapsing, the width tweens down to 32px on the 175ms curve the rail
+ * closes on; expanding targets `auto` (not interpolable), so the chip snaps
+ * to the still-narrow rail's width and stretch-tracks it open. The duration
+ * is `!important` because the aside zeroes chip transition durations
  * (`[&_.group.cursor-pointer]:duration-0`) for instant hover fills — colors
  * are excluded from the property list here, so hover fills keep snapping.
  */
 export const SIDEBAR_RAIL_CHIP_CLASS = [
-  'transition-[width,margin]',
+  'transition-[width]',
   '![transition-duration:175ms]',
   '[transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)]',
   'motion-reduce:!transition-none',
-  'group-data-[collapsed]/rail:ml-[1.5px]',
   'group-data-[collapsed]/rail:w-[32px]',
 ].join(' ')
 

apps/sim/stores/constants.ts

@@ -26,7 +26,7 @@ export const SIDEBAR_WIDTH = {
   DEFAULT: 238,
   MIN: 238,
   /** Width when sidebar is collapsed to icon-only mode */
-  COLLAPSED: 51,
+  COLLAPSED: 48,
   /** Maximum is 30% of viewport, enforced dynamically */
   MAX_PERCENTAGE: 0.3,
 } as const