Skip to content

fix(dashboard): correct side nav badge sizing - #3180

Merged
alx-xo merged 4 commits into
mainfrom
alexm/age-2644-bug-side-nav-issue-with-badges
Jun 4, 2026
Merged

fix(dashboard): correct side nav badge sizing#3180
alx-xo merged 4 commits into
mainfrom
alexm/age-2644-bug-side-nav-issue-with-badges

Conversation

@alx-xo

@alx-xo alx-xo commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Removes side-nav badge styles using scaling.
  • Cleans up the remaining stale ReleaseStageBadge size call site.
  • The new badge styles matches the older version that was scaled down to 75%

Root Cause

The use of scale-75 had an unintended side effect with flex spacing and truncation. It would hold the space of the full size of the badge. Even with it smaller it would cause truncation to kick in for nav items. This was surfaced when Device Agent is added.

Untitled

Realated PR

Test Plan

  • pnpm -F dashboard type-check
  • pnpm -F dashboard lint

Summary by cubic

Fixes release-stage badge sizing in the side nav and Observe tabs so preview/beta labels render consistently and no longer cause text truncation. Addresses Linear AGE-2644.

  • Bug Fixes
    • Remove scaling, negative margins, and transforms from badge call sites; use internal Badge with size="sm".
    • Remove the size prop from ReleaseStageBadge and delete call-site usages in side nav and ObserveTabNav.
    • Replace arbitrary z-[1] with z-1 on nav links.

Written for commit 3d8dbfe. Summary will update on new commits.

Review in cubic

@alx-xo
alx-xo requested review from a team as code owners June 3, 2026 20:25
@linear-code

linear-code Bot commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

AGE-2644

@vercel

vercel Bot commented Jun 3, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
gram-docs-redirect Ready Ready Preview, Comment Jun 4, 2026 6:32pm

Request Review

@changeset-bot

changeset-bot Bot commented Jun 3, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 3d8dbfe

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
dashboard Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@alx-xo
alx-xo changed the base branch from main to alexm/chore-update-moonshine-badge June 3, 2026 20:27

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

cubic analysis

No issues found across 5 files

Linked issue analysis

Linked issue: AGE-2644: bug: side nav issue with badges

Status Acceptance criteria Notes
Update @speakeasy-api/moonshine to 1.40.0 so the library size prop can be used package.json and pnpm-lock.yaml show the dependency bumped to 1.40.0, enabling the library Badge size prop used elsewhere.
Remove manual badge scaling/negative margins at side-nav call sites (drop scale-75, -my-1 and size="xs" on call sites) nav-menu.tsx and ObserveTabNav no longer pass size="xs" and have removed classes like 'scale-75' and '-my-1' from ReleaseStageBadge call sites.
Standardize internal ReleaseStageBadge to use Badge size="sm" (use library size prop internally) release-stage-badge.tsx now sets Badge size="sm" internally and the size prop was removed from the component API.
Replace arbitrary Tailwind z-index classes with z-1 in nav items nav-menu.tsx replaces occurrences of 'z-[1]' with 'z-1', removing arbitrary inline z-index values.
Side-nav label truncation is resolved (text has the space it needs when badges are present) The PR removes the manual transforms and sets a consistent library badge size that directly addresses the truncation root cause described in the issue; the code changes necessary for the fix are present in the diff.

Re-trigger cubic

Base automatically changed from alexm/chore-update-moonshine-badge to main June 4, 2026 16:54
@alx-xo
alx-xo force-pushed the alexm/age-2644-bug-side-nav-issue-with-badges branch from 8d9c83e to 3d8dbfe Compare June 4, 2026 18:31
@alx-xo
alx-xo added this pull request to the merge queue Jun 4, 2026
Merged via the queue into main with commit d33c557 Jun 4, 2026
32 checks passed
@alx-xo
alx-xo deleted the alexm/age-2644-bug-side-nav-issue-with-badges branch June 4, 2026 18:43
@github-actions github-actions Bot locked and limited conversation to collaborators Jun 4, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants