Files
PaperClipAI/ui
scotttongandClaude Opus 5.5 f03522ea8f fix(ui): drop fixed min-height from sidebar account popover (#18117)
<!-- entire-trail-link-start -->
https://entire.com/gh/paperclipai/-/trails/222/changes/paperclip/222
<!-- entire-trail-link-end -->

## Thinking Path

> - Paperclip is the open source app people use to manage AI agents for
work
> - The board UI has an account button at the bottom of the sidebar. It
opens a popover with Settings, Invite, Documentation, and the theme
switch.
> - The popover has a fixed minimum height of 304px. Its content is only
257px tall.
> - Because of this, the popover shows about 50px of empty space below
the last item. It looks broken.
> - This pull request removes the minimum height so the popover fits its
content. It also makes the options padding equal on all sides.
> - The benefit is a tidy menu that ends right after the last item, with
even padding.

## Linked Issues or Issue Description

No public issue exists. This is a bug description.

**What happened?**
The sidebar account popover shows a block of empty space (about 50px)
below "Switch to light mode", the last item.

**Expected behavior**
The popover ends right after the last item. The bottom padding is the
same as the top and side padding.

**Steps to reproduce**
1. Open the board UI.
2. Click the account button at the bottom-left of the sidebar.
3. Look at the space below the last menu item.

**Paperclip version or commit**
`master` at 71f0c0c99.

**Additional context**
The cause is `min-h-(--profile-popover-min-height)` (304px) on the
popover content, plus `flex-1` on the options list, which stretches the
list into the extra space.

## What Changed

- `ui/src/components/SidebarAccountMenu.tsx`: remove
`min-h-(--profile-popover-min-height)` from the popover content, remove
`flex-1` from the options list, and change the options padding from
`px-2.5 pb-2.5 pt-2` to `p-2.5`.
- `ui/src/index.css`: remove the unused `--profile-popover-min-height`
token.
- `ui/src/components/SidebarAccountMenu.test.tsx`: the test now fails if
any `min-h-` class comes back on the popover.

## Verification

- `pnpm check:token-gates`: all gates clean.
- `cd ui && npx vitest run src/components/SidebarAccountMenu.test.tsx`:
36/36 pass.
- Manual: open the account popover in dark and light mode. The gap below
the last item is now 11px (10px padding plus the 1px border). Before the
fix it was 60px. The header, items, and trigger do not change. The items
move down 2px because the top padding is now 10px.
- Snapshot baselines are intentionally not updated. Per-change snapshot
verification is dormant per the `doc/design/DECISION-SHEET.md` entry
"Per-change snapshot verification demoted to dormant (Jul 13 2026)".

## Risks

- Low risk. The change is CSS only, in one component. The popover is now
shorter, so it opens closer to the trigger. If a future item list is
long, the popover grows with its content as before.

## Model Used

- Claude (Anthropic), model ID `claude-opus-5-5` (Opus 5.5), via Claude
Code with tool use and code execution. Standard context window, adaptive
reasoning.

## Checklist

- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have searched GitHub for duplicate or related PRs and linked
them above
- [x] I have either (a) linked existing issues with `Fixes: #` / `Closes
#` / `Refs #` OR (b) described the issue in-PR following the relevant
issue template
- [x] I have not referenced internal/instance-local Paperclip issues or
links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip`
URLs)
- [x] My branch name describes the change (e.g. `docs/...`, `fix/...`)
and contains no internal Paperclip ticket id or instance-derived details
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] All Paperclip CI gates are green
- [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups
- [x] I will address all Greptile and reviewer comments before
requesting merge

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-28 19:38:27 -07:00
..

@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.

Editor dependency identity

Keep the root and workspace overrides for @codemirror/state, @codemirror/view, and @lezer/common aligned. CodeMirror requires shared extension identity, while Lezer parsers and syntax highlighters require shared NodeProp IDs. Multiple Lezer copies can crash code-block highlighting with tags is not iterable. src/lib/codemirror-single-instance.test.ts checks the installed dependency graph and highlights sample code through the editor's real language dependencies. GitHub Actions owns regeneration of pnpm-lock.yaml.