Skip to content

fix: Alignment issues with 'unsaved changes' badge in Feature modal#6949

Open
alveyworld wants to merge 1 commit intoFlagsmith:mainfrom
alveyworld:main
Open

fix: Alignment issues with 'unsaved changes' badge in Feature modal#6949
alveyworld wants to merge 1 commit intoFlagsmith:mainfrom
alveyworld:main

Conversation

@alveyworld
Copy link

@alveyworld alveyworld commented Mar 13, 2026

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

  1. Open any feature (Edit Feature modal)
  2. Click on the "Segment Overrides" tab
  3. Make a change to a segment override (toggle enabled, change value, etc.) — the purple * badge appears
  4. Observe the badge is now vertically centered and not overlapping the baseline of the tabs
  5. 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
Screenshot 2026-03-17 at 8 28 04 AM
After
Screenshot 2026-03-17 at 8 28 49 AM

@alveyworld alveyworld requested a review from a team as a code owner March 13, 2026 23:13
@alveyworld alveyworld requested review from kyle-ssg and removed request for a team March 13, 2026 23:13
@claude
Copy link

claude bot commented Mar 13, 2026

⚠️ 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 13, 2026

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

A member of the Team first needs to authorize it.

@github-actions github-actions bot added the front-end Issue related to the React Front End Dashboard label Mar 13, 2026
@matthewelwell matthewelwell changed the title Update _utils.scss fix: Alignment issues with 'unsaved changes' badge in Feature modal Mar 16, 2026
@vercel
Copy link

vercel bot commented Mar 16, 2026

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 16, 2026 7:05am
flagsmith-frontend-staging Ready Ready Preview, Comment Mar 16, 2026 7:05am
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Preview Mar 16, 2026 7:05am

Request Review

@talissoncosta
Copy link
Contributor

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
Copy link
Author

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

@kyle-ssg
Copy link
Member

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!

image

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

Labels

front-end Issue related to the React Front End Dashboard

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants