fix: Alignment issues with 'unsaved changes' badge in Feature modal#6949
fix: Alignment issues with 'unsaved changes' badge in Feature modal#6949alveyworld wants to merge 3 commits intoFlagsmith:mainfrom
Conversation
|
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. |
|
@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
bot
added
the
front-end
matthewelwell
changed the title
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
|
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! |
|
I added the screen shots. I hope this is what you were wanting |
|
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! 
|
|
Hey @alveyworld, thanks for the screenshots and for sticking with this! Building on what Kyle mentioned — The root cause of the badge misalignment is actually Here's a nudge on the approach:
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! |
|
@kyle-ssg |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
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.
| <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', { |
There was a problem hiding this comment.
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)
There was a problem hiding this comment.
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.
| key={`button-${i}`} | ||
| isSelected={isSelected} | ||
| className={canGrow ? 'tab-nav-full' : ''} | ||
| className={''} |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
|
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. |
|
Thanks for your help @talissoncosta |
|
Also, it looks like it did not fix similar tabs in areas like the group editor |
|
Hey @alveyworld, good progress — the core fix is correct and addresses the reported issue! A few things to tidy up before this is merge-ready: 1. Remove 2. Clean up
Then in 3. Formatting nit — add a space after the comma: Re: the tabs you mentioned in other areas (like the group editor) — could you share a screenshot showing the specific issue? Those might be pill-style tabs which use a different layout path and wouldn't be affected by this change. |
|
Here is the group tab I mentioned |
3 participants
Thanks for submitting a PR! Please check the boxes below:
docs/if required so people know about the feature.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
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