Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
alveyworld wants to merge 5 commits into from
Closed

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5e866c8
Update _utils.scss
alveyworld Mar 13, 2026
8fadff4
Removed tab-nav-full flex override so tab can adjust with badge applied
alveyworld Mar 23, 2026
00a7be3
Merge branch 'Flagsmith:main' into main
alveyworld Mar 23, 2026
04ccde7
Clean up className variables that are no longer used
alveyworld Mar 24, 2026
ad6d196
Merge branch 'main' of https://github.com/alveyworld/flagsmith
alveyworld Mar 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions frontend/web/components/navigation/TabMenu/Tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ const Tabs: React.FC<TabsProps> = ({
>
<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', {
Copy link

@cursor cursor bot Mar 23, 2026

Choose a reason for hiding this comment

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

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)
Fix in Cursor Fix in Web

Copy link

@cursor cursor bot Mar 23, 2026

Choose a reason for hiding this comment

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

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.

'opacity-0': isMeasuring,
})}
>
Expand All @@ -148,7 +148,7 @@ const Tabs: React.FC<TabsProps> = ({
<TabButton
key={`button-${i}`}
isSelected={isSelected}
className={canGrow ? 'tab-nav-full' : ''}
className={''}
Copy link

@cursor cursor bot Mar 23, 2026

Choose a reason for hiding this comment

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

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.

Fix in Cursor Fix in Web

Copy link

@cursor cursor bot Mar 23, 2026

Choose a reason for hiding this comment

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

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.

noFocus={noFocus}
onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
handleChange(
Expand Down
4 changes: 1 addition & 3 deletions frontend/web/styles/components/_tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,7 @@
}

.tabs-nav {
.tab-nav-full {
flex: 1 !important;
}


position: relative;
display: flex;
Expand Down
Loading