mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-10-27 02:44:50 +01:00
DottaandPaperclip
73f629de46
Two behavioral fixes for the collapsible sidebar so collapsing/expanding is
instant and the icons never move between states:
- Instant, not animated: drop the `transition-[width]` on the SidebarShell
panel so the rail/expanded widths snap with no sliding motion.
- Icons must not move (1:1 across states). Three drift sources fixed:
1. SidebarSection: the collapsed-rail header (a thin divider) was ~13px tall
vs the ~36px expanded header, shifting every icon below it. The rail header
now mirrors the expanded footprint (`px-3 py-1.5` + `min-h-6`).
2. Row labels used `sr-only`, which is `position:absolute` and removes the
label's line-height from flow, so each rail row was ~3-4px shorter than
expanded and the offset accumulated down the list. Labels are now kept in
flow but zero-width/clipped/transparent (SIDEBAR_RAIL_HIDDEN_LABEL), so the
row stays exactly as tall as expanded while remaining in the a11y tree.
3. The rail wrapped each NavLink directly in `TooltipTrigger asChild`; Radix
Slot drops React Router's *function* className, stripping `flex` off the
<a> (it rendered as a block) so the in-flow label stacked under the icon.
The tooltip now anchors to a plain wrapper element, keeping the <a> flex.
Verified by rendering the real Sidebar (new SidebarIconAlignment story) and
measuring every nav/project/agent icon's bounding box in both states: dX=0 and
dY within ±1px (rounding); a red/green overlay shows the icon glyphs perfectly
superimposed. Tests updated accordingly (56 sidebar tests pass).
Co-Authored-By: Paperclip <noreply@paperclip.ing>
@paperclipai/ui
Published static assets for the Paperclip board UI.
What gets published
The npm package contains the production build under dist/. It does not ship the UI source tree or workspace-only dependencies.
Storybook
Storybook config, stories, and fixtures live under ui/storybook/.
pnpm --filter @paperclipai/ui storybook
pnpm --filter @paperclipai/ui build-storybook
Typical use
Install the package, then serve or copy the built files from node_modules/@paperclipai/ui/dist.