Skip to content

fix(sidebar): Move Alpha and Beta badges next to labels#3456

Merged
charlesvien merged 2 commits into
mainfrom
fix/sidebar-badge-alignment
Jul 15, 2026
Merged

fix(sidebar): Move Alpha and Beta badges next to labels#3456
charlesvien merged 2 commits into
mainfrom
fix/sidebar-badge-alignment

Conversation

@charlesvien

@charlesvien charlesvien commented Jul 15, 2026

Copy link
Copy Markdown
Member

Problem

The Alpha and Beta badges on the Home and Inbox nav items were pinned to the right edge of the sidebar while Contexts renders its badge next to the label, so the nav looked out of sync.

Changes

Added a badge slot to SidebarItem that sits next to the label without truncating with it, and moved the Home and Inbox badges into it. Shortcut hints stay right-aligned.

Sidebar with stage badges next to labels

Home is behind the home-tab flag and not visible here; it uses the same slot as Inbox.

How did you test this?

pnpm --filter @posthog/ui typecheck, Biome on the changed files and verified in the running dev app (screenshot above).

Automatic notifications

  • Publish to changelog?
  • Alert Sales and Marketing teams?

@trunk-io

trunk-io Bot commented Jul 15, 2026

Copy link
Copy Markdown

Merging to main in this repository is managed by Trunk.

  • To merge this pull request, check the box to the left or comment /trunk merge below.

After your PR is submitted to the merge queue, this comment will be automatically updated with its status. If the PR fails, failure details will also be posted here

@github-actions

github-actions Bot commented Jul 15, 2026

Copy link
Copy Markdown

React Doctor found no issues in the changed files. 🎉

Reviewed by React Doctor for commit 3c616ee.

@greptile-apps

greptile-apps Bot commented Jul 15, 2026

Copy link
Copy Markdown
Contributor

Reviews (1): Last reviewed commit: "move alpha and beta badges next to label..." | Re-trigger Greptile

Comment thread packages/ui/src/features/sidebar/components/items/HomeItem.tsx Outdated
Comment thread packages/ui/src/features/sidebar/components/items/InboxItem.tsx Outdated
@charlesvien charlesvien added the Stamphog This will request an autostamp by stamphog on small changes label Jul 15, 2026

@github-actions github-actions Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Low-risk presentational fix that correctly moves Alpha/Beta badges to a dedicated prop outside the truncating label span. The bot's truncation concerns are genuinely resolved by the implementation — the badge is a sibling with shrink-0, not nested inside the clipping span.

@charlesvien charlesvien merged commit 7f14e20 into main Jul 15, 2026
32 checks passed
@charlesvien charlesvien deleted the fix/sidebar-badge-alignment branch July 15, 2026 02:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Stamphog This will request an autostamp by stamphog on small changes

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant