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>
This commit is contained in:
scotttongandClaude Opus 5.5 authored and GitHub committed 2026-10-28 19:38:27 -07:00
1 parent b294de546b
commit f03522ea8f
3 files changed
+3 -4

No files matched your search

@@ -448,7 +448,7 @@ describe("SidebarAccountMenu", () => {
expect(document.body.querySelector('[data-slot="popover-content"]')?.className)
.toContain("rounded-xl");
expect(document.body.querySelector('[data-slot="popover-content"]')?.className)
.toContain("min-h-(--profile-popover-min-height)");
.not.toContain("min-h-");
expect(document.body.querySelector('a[href="/company/settings"]')?.className)
.not.toContain("bg-muted");
expect(document.body.textContent).not.toContain("Manage company and instance settings.");
+2 -2
View File
@@ -199,7 +199,7 @@ export function SidebarAccountMenu({
side="top"
align="start"
sideOffset={10}
className="min-h-(--profile-popover-min-height) w-(--profile-popover-width) max-w-(--sz-calc-24) overflow-hidden rounded-xl border-border bg-popover p-0 shadow-(--shadow-profile-popover)"
className="w-(--profile-popover-width) max-w-(--sz-calc-24) overflow-hidden rounded-xl border-border bg-popover p-0 shadow-(--shadow-profile-popover)"
>
{/* The profile link is a stretched overlay so the staging SHA anchor can sit beside the email without nesting anchors. */}
<FlyoutHeader data-flyout-profile data-marquee-surface className="relative flex h-(--profile-popover-header-height) shrink-0 items-center gap-2.5 px-3.5">
@@ -235,7 +235,7 @@ export function SidebarAccountMenu({
</div>
</FlyoutHeader>
<FlyoutOptions className="flex flex-1 flex-col gap-0.5 border-t border-border px-2.5 pb-2.5 pt-2">
<FlyoutOptions className="flex flex-col gap-0.5 border-t border-border p-2.5">
<MenuAction
label="Settings"
icon={Settings}
-1
View File
@@ -537,7 +537,6 @@
--shadow-task-composer: 0 2px 8px -2px color-mix(in oklab, var(--foreground) 7%, transparent),
0 12px 32px -8px color-mix(in oklab, var(--foreground) 12%, transparent);
--profile-popover-width: 248px;
--profile-popover-min-height: 304px;
--profile-popover-header-height: 76px;
--profile-popover-row-height: 38px;
--profile-popover-row-gap: 9px;