Revert "fix(gui): keep the label fade and pin the rail icons to one axis"

This reverts commit a4ae2f6c21c1eeed2495481a55a39762f4e64ccb.
This commit is contained in:
imccyu
2026-07-23 13:37:54 +08:00
parent f062ba8fcd
commit dd7d198c0d
@@ -17,11 +17,8 @@
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: 14px 15px 6px 16px;
padding-top: 14px;
}
/* Wide-only content: fades ahead of the geometry (200ms vs 300ms) and
@@ -58,16 +55,10 @@
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
@@ -153,7 +144,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 var(--ds-transition-duration-slow) var(--ds-ease-in-out),
border-color var(--ds-transition-duration-slow) var(--ds-ease-in-out),
background-color 200ms var(--ds-ease-in-out);
}
@@ -161,14 +152,12 @@
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-width: 0;
border-color: transparent;
background: transparent;
}
@@ -180,10 +169,7 @@
max-width: 200px;
overflow: hidden;
white-space: nowrap;
/* 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);
transition: max-width var(--ds-transition-duration-slow) var(--ds-ease-in-out);
}
.collapsed .newSessionLabel {
@@ -215,7 +201,6 @@
height: 24px;
padding-left: 0;
margin-bottom: 8px;
justify-content: center;
}
.sectionLabel {
@@ -251,7 +236,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 var(--ds-transition-duration-slow) var(--ds-ease-in-out),
border-color var(--ds-transition-duration-slow) var(--ds-ease-in-out),
background-color 200ms var(--ds-ease-in-out);
}
@@ -259,16 +244,13 @@
--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-width: 0;
border-color: transparent;
background: transparent;
justify-content: center;
}
/* The capsule's leading icon, upgraded to the rail's search control. While
@@ -416,10 +398,7 @@
max-width: 120px;
overflow: hidden;
white-space: nowrap;
/* 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);
transition: max-width var(--ds-transition-duration-slow) var(--ds-ease-in-out);
}
.collapsed .footLabel {