🎯 fix: Center Collapsed Sidebar Icons and Unclip Sidebar Focus Rings

[dustinhealy]

Summary

Three sidebar polish issues, all pre-existing (introduced by the sidebar collapse refactor in #6, not by the click-ui 0.9.1 bump):

1. In the collapsed rail, icons (logo, nav icons, avatar) sat left of center. The labels stay mounted for the slide animation, but the gap-2.5 between icon and label never collapsed and the truncated label spans kept a shrink-to-fit sliver of width, so justify-center had nothing to center. Collapsed rows now use gap-0 with justify-center, and every label span (logo title, nav labels, user-row name/email container) becomes w-0 flex-none overflow-hidden while collapsed so no residual width or flex-1 growth can absorb the free space. Measured result: icon centers moved from x=26.0 (logo x=20.0) to exactly x=27.5, the true center of the 55px inner rail.
2. The user-profile button's focus ring was clipped instead of forming a full circle. The global focus convention draws a 1px ring at outline-offset: 2px outside the box, and the row wrapper's overflow-hidden cut it on all sides. The wrapper clip is removed; the labels already truncate and the aside still clips during the width transition.
3. The collapse toggle at the bottom showed only the top edge of its focus ring: the button is flush with the aside's clipped left/right edges and the viewport bottom. A scoped .sidebar-toggle:focus-visible rule draws the ring inset (outline-offset: -2px), following the existing scoped-override convention in styles.css.

Change Type

• Bug fix (non-breaking change which fixes an issue)

Testing

New Sidebar.test.tsx (3 cases) asserts the collapsed-state classes (justify-center, gap-0, no overflow-hidden on the user row, sidebar-toggle on the toggle) and that the expanded state restores gap-2.5. Geometry itself is not assertable in jsdom; visual verification below.

Manually verified in the app: collapsed icons center in the rail, the avatar focus ring is a full circle, and tabbing to the collapse toggle shows a complete ring.

Before/after proof:

Test Configuration:

• bunx tsc --noEmit, bunx eslint src/ --max-warnings 0, bunx vitest run (802/802), bun run build: all green
• Local dev server against local LibreChat backend

Checklist

• My code adheres to this project's style guidelines
• I have performed a self-review of my own code
• My changes do not introduce new warnings
• I have written tests demonstrating that my changes are effective or that my feature works
• Local unit tests pass with my changes