Skip to content

Commit 0cc5332

Browse files
committed
fix(sidebar): keep the collapsed profile chip inside the rail
1 parent a3a887a commit 0cc5332

1 file changed

Lines changed: 15 additions & 5 deletions

File tree

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.tsx

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -151,10 +151,18 @@ export function SidebarFooter({
151151
* so hover highlights only the avatar and name. Collapsed, `fullWidth` fills the
152152
* narrow rail instead. Both mirror the workspace header's chip exactly.
153153
*
154-
* No `min-w-0`: the label already truncates on its own, and letting the chip
155-
* shrink past its avatar is what let the help button ride onto the photo while
156-
* the rail was still narrow (see {@link SidebarFooter}). Its automatic minimum
157-
* is exactly the icon-only chip, so the avatar holds the same spot at any width.
154+
* No `min-w-0` expanded: the label already truncates on its own, and letting the
155+
* chip shrink past its avatar is what let the help button ride onto the photo
156+
* while the rail was still narrow (see {@link SidebarFooter}).
157+
*
158+
* Collapsed it takes `min-w-0`, because the label stays in the layout there — the
159+
* rail hides it with `opacity`, not `display`, so the fade survives a toggle. Its
160+
* empty box still contributes the content row's gap, putting the chip's automatic
161+
* minimum at 38px against a 35px rail: the chip overflowed, the aside clipped its
162+
* right edge, and the hover fill read as a full-width row bleeding off the rail
163+
* instead of the padded pill every other collapsed chip draws. Floored at zero it
164+
* fills exactly the rail, and the avatar keeps the same 8px offset as the help
165+
* glyph above it.
158166
*
159167
* The name is the button's accessible name — no `aria-label`, which would
160168
* override the visible text. Radix contributes the menu role and expanded state.
@@ -167,7 +175,9 @@ export function SidebarFooter({
167175
type='button'
168176
data-item-id='profile'
169177
className={
170-
isCollapsed ? chipVariants({ fullWidth: true }) : cn(chipVariants(), 'max-w-full')
178+
isCollapsed
179+
? cn(chipVariants({ fullWidth: true }), 'min-w-0')
180+
: cn(chipVariants(), 'max-w-full')
171181
}
172182
>
173183
{avatar}

0 commit comments

Comments
 (0)