fix: Alignment issues with 'unsaved changes' badge in Feature modal by alveyworld · Pull Request #6949 · Flagsmith/flagsmith

alveyworld · 2026-03-13T23:13:56Z

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 issue #6935

In the .unread selector, simply changing the bottom attribute to a positive 9px brought the * badge up to vertical center without moving the position or size of the tab.

How did you test this code?

Steps to reproduce

Open any feature (Edit Feature modal)
Click on the "Segment Overrides" tab
Make a change to a segment override (toggle enabled, change value, etc.) — the purple * badge appears
Observe the badge is now vertically centered and not overlapping the baseline of the tabs
Switch to "Identity Overrides" tab — the badge still shows under the now-inactive "Segment Overrides" tab

I followed these steps to recreate and visually fixed the css issue. I resized the window to extreme small and large sized and the badge remained in place. At smaller sizes it naturally jumps up to the right of the tab.

Before

After

claude · 2026-03-13T23:14:00Z

⚠️ 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 · 2026-03-13T23:14:08Z

@alveyworld is attempting to deploy a commit to the Flagsmith Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2026-03-16T07:02:54Z

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

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview, Comment	Mar 16, 2026 7:05am
flagsmith-frontend-staging	Ready	Preview, Comment	Mar 16, 2026 7:05am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored	Preview	Mar 16, 2026 7:05am

talissoncosta · 2026-03-17T13:23:29Z

Hey @alveyworld , thanks for picking this up! 🙏

Could you add before/after screenshots to the PR description? It'll help us validate the fix visually and speed up the review.

Thanks again for the contribution!

alveyworld · 2026-03-17T14:31:37Z

I added the screen shots. I hope this is what you were wanting

kyle-ssg · 2026-03-18T11:52:40Z

Thanks for this @alveyworld! I think actually you might have spotted a regression whereby the real fix is to add a flex-wrap no wrap. Happy to merge this if we get that done!

talissoncosta · 2026-03-20T18:33:11Z

Hey @alveyworld, thanks for the screenshots and for sticking with this!

Building on what Kyle mentioned — .unread in _utils.scss is a global class used across the app (navbar badges, table filters, diff counters), so the bottom: 9px change there would affect those places too.

The root cause of the badge misalignment is actually .tab-nav-full in _tabs.scss — it applies flex: 1 to each tab button, stretching them and causing the badge to overflow below the underline.

Here's a nudge on the approach:

web/styles/components/_tabs.scss — remove the .tab-nav-full rule
web/components/navigation/TabMenu/Tabs.tsx — remove canGrow and the tab-nav-full className, then add justify-content-evenly to the inner container's className (line 141) to keep tabs distributed evenly
web/components/navigation/TabMenu/TabButton.tsx — clean up the now-unused className prop
web/styles/project/_utils.scss — revert bottom back to -1px

Here's what the expected result should look like:

This way tabs still spread out nicely, but buttons keep their natural width so the badge stays aligned. Happy to answer any questions!

talissoncosta · 2026-03-20T18:47:04Z

@kyle-ssg .tabs-nav already has flex-wrap: nowrap (line 70 of _tabs.scss) and buttons have flex: 0 0 auto (line 77). The issue is .tab-nav-full overriding that with flex: 1 !important — that's what stretches the buttons and causes both the badge misalignment and the wrapping in your screenshot.

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Bugbot Autofix is kicking off a free cloud agent to fix these issues. This run is complimentary, but you can enable autofix for all future PRs in the Cursor dashboard.}

cursor · 2026-03-23T22:57:44Z

frontend/web/components/navigation/TabMenu/Tabs.tsx

        <div
          ref={itemsContainerRef}
-          className={classNames('d-flex align-items-center flex-1', 'gap-2', {
+          className={classNames('justify-content-evenly','d-flex align-items-center flex-1', 'gap-2', {


Global tab layout changed by justify-content-evenly addition

High Severity

Adding justify-content-evenly to the items container in the Tabs component and removing the tab-nav-full class affects every tab instance across the app (EditPermissions, PermissionsTabs, DiffFeature, DiffSegment, etc.), not just the Feature modal tabs targeted by this fix. Previously tabs were packed at the start with optional flex: 1 growing; now they're evenly distributed across the full width regardless of context. As the reviewers noted, the root cause is .tab-nav-full overriding flex, and a scoped fix is needed rather than a global layout change.

Additional Locations (1)

frontend/web/styles/components/_tabs.scss#L65-L68

Bugbot Autofix determined this is a false positive.

The current Tabs implementation does not add justify-content-evenly and still applies tab-nav-full conditionally, so the reported global layout regression is not present.

_{This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.}

cursor · 2026-03-23T22:57:44Z

frontend/web/components/navigation/TabMenu/Tabs.tsx

                key={`button-${i}`}
                isSelected={isSelected}
-                className={canGrow ? 'tab-nav-full' : ''}
+                className={''}


Variable canGrow computed but never used

Low Severity

The canGrow variable (line 107) is still computed but no longer referenced anywhere. It was previously used to conditionally apply the tab-nav-full class, but now className is hardcoded to ''. This is dead code that will likely trigger lint warnings.

Bugbot Autofix determined this is a false positive.

canGrow is actively used to set each TabButton class (tab-nav-full) in Tabs.tsx, so it is not dead code.

_{This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.}

cursor · 2026-03-23T22:58:52Z

You have used all of your free Bugbot PR reviews.

To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

alveyworld · 2026-03-23T23:08:15Z

Thanks for your help @talissoncosta
I made your suggested changes and got the desired results from the screen shot with the badges inline with the tab instead of underneath. Cursor is reporting some deadcode on this PR so I will need to clean that up.

alveyworld · 2026-03-23T23:28:50Z

Also, it looks like it did not fix similar tabs in areas like the group editor

Update _utils.scss

5e866c8

alveyworld requested a review from a team as a code owner March 13, 2026 23:13

alveyworld requested review from kyle-ssg and removed request for a team March 13, 2026 23:13

github-actions bot added the front-end Issue related to the React Front End Dashboard label Mar 13, 2026

matthewelwell changed the title ~~Update _utils.scss~~ fix: Alignment issues with 'unsaved changes' badge in Feature modal Mar 16, 2026

vercel bot deployed to Preview – flagsmith-frontend-staging March 16, 2026 07:05 View deployment

vercel bot deployed to Preview – flagsmith-frontend-preview March 16, 2026 07:05 View deployment

kyle-ssg mentioned this pull request Mar 18, 2026

fix: Fix "unsaved changes" badge positioning on Edit Feature modal tabs #6969

Open

Removed tab-nav-full flex override so tab can adjust with badge applied

8fadff4

cursor bot reviewed Mar 23, 2026

View reviewed changes

Merge branch 'Flagsmith:main' into main

00a7be3

Conversation

alveyworld commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

How did you test this code?

Uh oh!

claude bot commented Mar 13, 2026

Uh oh!

vercel bot commented Mar 13, 2026

Uh oh!

vercel bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

talissoncosta commented Mar 17, 2026

Uh oh!

alveyworld commented Mar 17, 2026

Uh oh!

kyle-ssg commented Mar 18, 2026

Uh oh!

talissoncosta commented Mar 20, 2026

Uh oh!

talissoncosta commented Mar 20, 2026

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Mar 23, 2026

Choose a reason for hiding this comment

Global tab layout changed by justify-content-evenly addition

Uh oh!

cursor bot Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

cursor bot Mar 23, 2026

Choose a reason for hiding this comment

Variable canGrow computed but never used

Uh oh!

cursor bot Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

cursor bot commented Mar 23, 2026

Uh oh!

alveyworld commented Mar 23, 2026

Uh oh!

alveyworld commented Mar 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

alveyworld commented Mar 13, 2026 •

edited

Loading

vercel bot commented Mar 16, 2026 •

edited

Loading

Global tab layout changed by `justify-content-evenly` addition

Variable `canGrow` computed but never used