Skip to content

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

Open
talissoncosta wants to merge 1 commit intomainfrom
fix/tab-badge-alignment-6935
Open

fix: Alignment issues with 'unsaved changes' badge in Feature modal#7038
talissoncosta wants to merge 1 commit intomainfrom
fix/tab-badge-alignment-6935

Conversation

@talissoncosta
Copy link
Contributor

@talissoncosta talissoncosta commented Mar 24, 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 #6935
Supersedes #6949 — thanks to @alveyworld for the initial investigation and for flagging the group editor issue.

  • Replaced <Row> and <div> wrappers in tab labels with fragments, removing block-level elements that interfered with flex layout
  • Added a .btn-tab__label wrapper in TabButton with inline-flex and flex-wrap: nowrap to keep text and badge on the same line
  • Removed redundant tabLabelString where tabLabel is already a plain string

Screenshots

image image

How did you test this code?

Manually verified the following:

  • Feature modal — Value, Segment Overrides, and Settings tabs with unsaved changes (* badge stays inline)
  • Edit Group modal — General tab with unsaved changes (* badge stays inline)
  • Create Segment modal — General and Custom Fields tabs
  • Pill tabs (e.g. Members/Groups/Roles) — still stretch to fill width
  • Overflow dropdown tabs — still render correctly

Replace <Row> and <div> wrappers in tab labels with fragments, and add
a .btn-tab__label flex container in TabButton to keep text and badge
inline. Remove redundant tabLabelString where tabLabel is already a
plain string. Restore tab-nav-full for pill tab width.

Closes #6935
@talissoncosta talissoncosta requested a review from a team as a code owner March 24, 2026 20:41
@talissoncosta talissoncosta requested review from Zaimwa9 and removed request for a team March 24, 2026 20:41
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 24, 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 24, 2026 8:43pm
flagsmith-frontend-staging Ready Ready Preview, Comment Mar 24, 2026 8:43pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Mar 24, 2026 8:43pm

Request Review

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

github-actions bot commented Mar 24, 2026

Docker builds report

Image Build Status Security report
ghcr.io/flagsmith/flagsmith-e2e:pr-7038 Finished ✅ Skipped

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

Labels

fix front-end Issue related to the React Front End Dashboard

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

1 participant