Skip to content

Fix 'unsaved changes' badge positioning on Edit Feature modal tabs#7007

Closed
talissoncosta wants to merge 1 commit intomainfrom
fix/unread-badge-alignment-6935
Closed

Fix 'unsaved changes' badge positioning on Edit Feature modal tabs#7007
talissoncosta wants to merge 1 commit intomainfrom
fix/unread-badge-alignment-6935

Conversation

@talissoncosta
Copy link
Contributor

@talissoncosta talissoncosta commented Mar 20, 2026 •
edited
Loading

Thanks for submitting a PR! Please check the boxes below:

  • I have read the Contributing Guide.
  • I have added information to docs/ if required so people know about the feature.
  • I have filled in the "Changes" section below.
  • I have filled in the "How did you test this code" section below.

Changes

Closes #6935

The .unread badge (purple *) on the Edit Feature modal tabs was overflowing below the tab underline. The root cause was .tab-nav-full applying flex: 1 to each tab button, stretching them and causing the badge to misalign.

Fix: Replace per-button flex: 1 with justify-content-evenly on the tab container. Tabs still distribute evenly, but buttons keep their natural width so the badge aligns correctly.

  • Remove .tab-nav-full CSS rule and canGrow logic from Tabs.tsx
  • Add justify-content-evenly to the tab items container
  • Clean up unused className prop from TabButton

Before

image

After

image

How did you test this code?

  1. Run ENV=local npm run dev
  2. Open a feature with segment overrides
  3. Toggle or edit a segment override to trigger the unsaved state
  4. Verify the * badge aligns vertically with the tab text
  5. Check other tab bars across the app (permissions, settings) for visual regressions

@talissoncosta @claude
fix: align unsaved changes badge in tab buttons (#6935)
a3de8f1 
Replace per-button `flex: 1` (`tab-nav-full`) with
`justify-content-evenly` on the tab container. This distributes
tabs evenly without stretching individual buttons, which caused
the `.unread` badge to overflow below the tab underline.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@talissoncosta talissoncosta requested a review from a team as a code owner March 20, 2026 18:22
@talissoncosta talissoncosta requested review from Zaimwa9 and removed request for a team March 20, 2026 18:22
claude[bot]
claude bot reviewed Mar 20, 2026
View reviewed changes
Copy link

@claude claude bot left a comment

Choose a reason for hiding this comment

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

⚠️ Code review skipped — your organization's overage spend limit has been reached.

Code review is billed via overage credits. To resume reviews, an organization admin can raise the monthly limit in Settings → Usage.

Once credits are available, reopen this pull request to trigger a review.

@vercel
Copy link

vercel bot commented Mar 20, 2026 •
edited
Loading

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

Project Deployment Actions Updated (UTC)
flagsmith-frontend-preview Ready Ready Preview, Comment Mar 20, 2026 6:24pm
flagsmith-frontend-staging Ready Ready Preview, Comment Mar 20, 2026 6:24pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Mar 20, 2026 6:24pm

Request Review

@github-actions github-actions bot added the front-end Issue related to the React Front End Dashboard label Mar 20, 2026
@github-actions
Copy link
Contributor

github-actions bot commented Mar 20, 2026 •
edited
Loading

Docker builds report

Image Build Status Security report
ghcr.io/flagsmith/flagsmith-api-test:pr-7007 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-e2e:pr-7007 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-api:pr-7007 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith:pr-7007 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-private-cloud:pr-7007 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-frontend:pr-7007 Finished ✅ Results ✅

@github-actions
Copy link
Contributor

github-actions bot commented Mar 20, 2026 •
edited
Loading

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  46.1 seconds
commit  a3de8f1
info  🔄 Run: #15404 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  47.4 seconds
commit  a3de8f1
info  🔄 Run: #15404 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  16 passed

Details

stats  16 tests across 13 suites
duration  54.9 seconds
commit  a3de8f1
info  🔄 Run: #15404 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  44 seconds
commit  a3de8f1
info  🔄 Run: #15404 (attempt 1)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@claude claude[bot] claude[bot] left review comments

@Zaimwa9 Zaimwa9 Awaiting requested review from Zaimwa9 Zaimwa9 is a code owner automatically assigned from Flagsmith/flagsmith-front-end

Assignees

No one assigned

Labels

front-end Issue related to the React Front End Dashboard

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Fix "unsaved changes" badge positioning on Edit Feature modal tabs

1 participant

@talissoncosta