From f062ba8fcdbdb6286ddf8df5bd1ecf21c0ade8f3 Mon Sep 17 00:00:00 2001
From: imccyu <276526105+imccyu@users.noreply.github.com>
Date: Thu, 23 Jul 2026 13:30:07 +0800
Subject: [PATCH] fix(gui): keep the label fade and pin the rail icons to one
 axis
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two polish defects from the headless verification pass:

- .newSessionLabel/.footLabel declared their own transition shorthand,
  which replaced .wide's opacity fade entirely (shorthands do not merge) —
  the labels vanished instantly while everything else faded. The fade is
  restated alongside max-width.
- The rail icons drifted off a common vertical axis: the 56px track holds
  a 55px content box (1px column border), and the capsule rows kept their
  1px border-width in the collapsed state, shaving their content to 23px
  and pushing the search icon 2px right. Collapsed capsules now zero the
  border-width (transitioning border, not border-color), the root gives
  back the border pixel via asymmetric padding, and every surviving row
  centers its icon — five glyphs on the track's 28px center.
---
 .../src/client/SidebarRoot.module.css         | 35 +++++++++++++++----
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/packages/client/ui-sidebar/src/client/SidebarRoot.module.css b/packages/client/ui-sidebar/src/client/SidebarRoot.module.css
index c580d47b75..844c406e35 100644
--- a/packages/client/ui-sidebar/src/client/SidebarRoot.module.css
+++ b/packages/client/ui-sidebar/src/client/SidebarRoot.module.css
@@ -17,8 +17,11 @@
   transition: padding var(--ds-transition-duration-slow) var(--ds-ease-in-out);
 }
 
+/* The 56px track paints a 1px column border, leaving a 55px content box;
+   the right padding gives back that pixel so every row holds exactly 24px
+   of content and all five glyphs share the track's 28px center axis. */
 .root.collapsed {
-  padding-top: 14px;
+  padding: 14px 15px 6px 16px;
 }
 
 /* Wide-only content: fades ahead of the geometry (200ms vs 300ms) and
@@ -55,10 +58,16 @@
     margin var(--ds-transition-duration-slow) var(--ds-ease-in-out);
 }
 
+/* Rail axis: every collapsed row centers its surviving icon in the 55px
+   content box (56px track minus the column border), putting all five glyphs
+   on one vertical line; capsule border-widths zero out so they stop taking
+   layout space. While wide content is still fading its flex:1 spans keep
+   absorbing the free space, so justify-content only takes over at unmount. */
 .collapsed .logoRow {
   height: 24px;
   padding: 0;
   margin-bottom: 8px;
+  justify-content: center;
 }
 
 /* Brand group (figma I133:7632): fish + wordmark ride the text ink
@@ -144,7 +153,7 @@
     padding var(--ds-transition-duration-slow) var(--ds-ease-in-out),
     margin var(--ds-transition-duration-slow) var(--ds-ease-in-out),
     gap var(--ds-transition-duration-slow) var(--ds-ease-in-out),
-    border-color var(--ds-transition-duration-slow) var(--ds-ease-in-out),
+    border var(--ds-transition-duration-slow) var(--ds-ease-in-out),
     background-color 200ms var(--ds-ease-in-out);
 }
 
@@ -152,12 +161,14 @@
   background: var(--dsw-alias-button-floating-hover);
 }
 
+/* Border width zeroes with the color: a leftover 1px border inside the
+   border-box would shave the rail row's content below 24px. */
 .collapsed .newSession {
   height: 24px;
   padding: 0;
   margin-bottom: 8px;
   gap: 0;
-  border-color: transparent;
+  border-width: 0;
   background: transparent;
 }
 
@@ -169,7 +180,10 @@
   max-width: 200px;
   overflow: hidden;
   white-space: nowrap;
-  transition: max-width var(--ds-transition-duration-slow) var(--ds-ease-in-out);
+  /* Opacity restated: this shorthand would otherwise replace .wide's fade. */
+  transition:
+    max-width var(--ds-transition-duration-slow) var(--ds-ease-in-out),
+    opacity 200ms var(--ds-ease-in-out);
 }
 
 .collapsed .newSessionLabel {
@@ -201,6 +215,7 @@
   height: 24px;
   padding-left: 0;
   margin-bottom: 8px;
+  justify-content: center;
 }
 
 .sectionLabel {
@@ -236,7 +251,7 @@
     padding var(--ds-transition-duration-slow) var(--ds-ease-in-out),
     margin var(--ds-transition-duration-slow) var(--ds-ease-in-out),
     gap var(--ds-transition-duration-slow) var(--ds-ease-in-out),
-    border-color var(--ds-transition-duration-slow) var(--ds-ease-in-out),
+    border var(--ds-transition-duration-slow) var(--ds-ease-in-out),
     background-color 200ms var(--ds-ease-in-out);
 }
 
@@ -244,13 +259,16 @@
   --dsh-search-input-fill: var(--dsw-static-neutral-bluish-900);
 }
 
+/* Border width zeroes with the color (see .collapsed .newSession); the row
+   centers its surviving icon once the input unmounts. */
 .collapsed .search {
   height: 24px;
   padding: 0;
   margin-bottom: 8px;
   gap: 0;
-  border-color: transparent;
+  border-width: 0;
   background: transparent;
+  justify-content: center;
 }
 
 /* The capsule's leading icon, upgraded to the rail's search control. While
@@ -398,7 +416,10 @@
   max-width: 120px;
   overflow: hidden;
   white-space: nowrap;
-  transition: max-width var(--ds-transition-duration-slow) var(--ds-ease-in-out);
+  /* Opacity restated: this shorthand would otherwise replace .wide's fade. */
+  transition:
+    max-width var(--ds-transition-duration-slow) var(--ds-ease-in-out),
+    opacity 200ms var(--ds-ease-in-out);
 }
 
 .collapsed .footLabel {