From f03522ea8fba2dfd3b08229bfc33a753e6cbd82c Mon Sep 17 00:00:00 2001 From: scotttong Date: Wed, 28 Oct 2026 19:38:27 -0700 Subject: [PATCH] fix(ui): drop fixed min-height from sidebar account popover (#18117) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit https://entire.com/gh/paperclipai/-/trails/222/changes/paperclip/222 ## 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 --- ui/src/components/SidebarAccountMenu.test.tsx | 2 +- ui/src/components/SidebarAccountMenu.tsx | 4 ++-- ui/src/index.css | 1 - 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/ui/src/components/SidebarAccountMenu.test.tsx b/ui/src/components/SidebarAccountMenu.test.tsx index 897065b6034..fada5185d75 100644 --- a/ui/src/components/SidebarAccountMenu.test.tsx +++ b/ui/src/components/SidebarAccountMenu.test.tsx @@ -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."); diff --git a/ui/src/components/SidebarAccountMenu.tsx b/ui/src/components/SidebarAccountMenu.tsx index b6aab851f4c..fbf7a297819 100644 --- a/ui/src/components/SidebarAccountMenu.tsx +++ b/ui/src/components/SidebarAccountMenu.tsx @@ -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. */} @@ -235,7 +235,7 @@ export function SidebarAccountMenu({ - +