From b4eba0448f174cec59f174bb707cb40c80231efc Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Tue, 24 Mar 2026 17:35:10 -0300
Subject: [PATCH 1/2] fix: align unsaved changes badge in tab buttons across
 all modals

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
---
 .../web/components/modals/CreateGroup.tsx     |  6 ++---
 .../web/components/modals/CreateSegment.tsx   | 26 +++++++------------
 .../modals/create-experiment/index.js         | 17 ++++--------
 .../navigation/TabMenu/TabButton.tsx          |  2 +-
 frontend/web/styles/components/_tabs.scss     |  8 ++++++
 5 files changed, 26 insertions(+), 33 deletions(-)

diff --git a/frontend/web/components/modals/CreateGroup.tsx b/frontend/web/components/modals/CreateGroup.tsx
index 8c1c233aad3b..8db113aef89d 100644
--- a/frontend/web/components/modals/CreateGroup.tsx
+++ b/frontend/web/components/modals/CreateGroup.tsx
@@ -456,15 +456,15 @@ const CreateGroup: FC<CreateGroupType> = ({ group, orgId, roles }) => {
     <Tabs uncontrolled className='px-0'>
       <TabItem
         tabLabel={
-          <div>
+          <>
             General
             {!!edited && <span className='unread'>*</span>}
-          </div>
+          </>
         }
       >
         {editGroupEl}
       </TabItem>
-      <TabItem tabLabel={<div>Permissions</div>}>{editPermissionsEl}</TabItem>
+      <TabItem tabLabel='Permissions'>{editPermissionsEl}</TabItem>
     </Tabs>
   ) : (
     editGroupEl
diff --git a/frontend/web/components/modals/CreateSegment.tsx b/frontend/web/components/modals/CreateSegment.tsx
index a00465d4bb33..9baf2a792e23 100644
--- a/frontend/web/components/modals/CreateSegment.tsx
+++ b/frontend/web/components/modals/CreateSegment.tsx
@@ -503,10 +503,10 @@ const CreateSegment: FC<CreateSegmentType> = ({
           <TabItem
             tabLabelString='General'
             tabLabel={
-              <Row className='justify-content-center flex-nowrap'>
-                General{' '}
-                {valueChanged && <div className='unread ml-2 px-1'>{'*'}</div>}
-              </Row>
+              <>
+                General
+                {valueChanged && <span className='unread'>{'*'}</span>}
+              </>
             }
           >
             <div className='my-4'>
@@ -564,12 +564,12 @@ const CreateSegment: FC<CreateSegmentType> = ({
             <TabItem
               tabLabelString='Custom Fields'
               tabLabel={
-                <Row className='justify-content-center flex-nowrap'>
+                <>
                   Custom Fields
                   {metadataValueChanged && (
-                    <div className='unread ml-2 px-1 pt-2'>{'*'}</div>
+                    <span className='unread'>{'*'}</span>
                   )}
-                </Row>
+                </>
               }
             >
               <div className='my-4'>{MetadataTab}</div>
@@ -579,10 +579,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
       )}
       {!(isEdit && !condensed) && metadataEnable && segmentContentType?.id && (
         <Tabs value={tab} onChange={(tab: UserTabs) => setTab(tab)}>
-          <TabItem
-            tabLabelString='Basic configuration'
-            tabLabel={'Basic configuration'}
-          >
+          <TabItem tabLabel='Basic configuration'>
             <div className={className || 'my-3 mx-4'}>
               <CreateSegmentRulesTabForm
                 save={save}
@@ -610,12 +607,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
               />
             </div>
           </TabItem>
-          <TabItem
-            tabLabelString='Custom Fields'
-            tabLabel={
-              <Row className='justify-content-center'>Custom Fields</Row>
-            }
-          >
+          <TabItem tabLabel='Custom Fields'>
             <div className={className || 'my-3 mx-4'}>{MetadataTab}</div>
           </TabItem>
         </Tabs>
diff --git a/frontend/web/components/modals/create-experiment/index.js b/frontend/web/components/modals/create-experiment/index.js
index 808c3f545a2a..13c7dbf5dccd 100644
--- a/frontend/web/components/modals/create-experiment/index.js
+++ b/frontend/web/components/modals/create-experiment/index.js
@@ -468,14 +468,12 @@ const Index = class extends Component {
                                     data-test='value'
                                     tabLabelString='Value'
                                     tabLabel={
-                                      <Row className='justify-content-center'>
-                                        Value{' '}
+                                      <>
+                                        Value
                                         {this.state.valueChanged && (
-                                          <div className='unread ml-2 px-1'>
-                                            {'*'}
-                                          </div>
+                                          <span className='unread'>{'*'}</span>
                                         )}
-                                      </Row>
+                                      </>
                                     }
                                   >
                                     <FeatureValueTab
@@ -540,12 +538,7 @@ const Index = class extends Component {
                                   </TabItem>
                                   <TabItem
                                     data-test='results'
-                                    tabLabelString='Results'
-                                    tabLabel={
-                                      <Row className='justify-content-center'>
-                                        Results
-                                      </Row>
-                                    }
+                                    tabLabel='Results'
                                   >
                                     <ExperimentResultsTab
                                       environmentId={this.props.environmentId}
diff --git a/frontend/web/components/navigation/TabMenu/TabButton.tsx b/frontend/web/components/navigation/TabMenu/TabButton.tsx
index 55344750b09d..a34676257ff4 100644
--- a/frontend/web/components/navigation/TabMenu/TabButton.tsx
+++ b/frontend/web/components/navigation/TabMenu/TabButton.tsx
@@ -27,7 +27,7 @@ const TabButton = React.forwardRef<HTMLButtonElement | null, TabButtonProps>(
           isSelected ? ' tab-active' : ''
         } ${className}`}
       >
-        {child.props.tabLabel}
+        <span className='btn-tab__label'>{child.props.tabLabel}</span>
       </Button>
     )
   },
diff --git a/frontend/web/styles/components/_tabs.scss b/frontend/web/styles/components/_tabs.scss
index aa767187f230..5c97a0bad944 100644
--- a/frontend/web/styles/components/_tabs.scss
+++ b/frontend/web/styles/components/_tabs.scss
@@ -159,6 +159,14 @@
 
 .btn-tab {
   position: relative;
+
+  .btn-tab__label {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 4px;
+  }
+
   .unread {
     padding-left: 0 !important;
     padding-right: 0 !important;

From ebb9004e8fa231ee88d4d25c09ca69b42a3c5cbd Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Wed, 25 Mar 2026 08:37:40 -0300
Subject: [PATCH 2/2] fix: align unsaved changes badge in Edit Feature modal
 tabs

The create-feature modal was refactored from .js to .tsx on main,
so the original fix was lost during rebase. Apply the same fix:
remove Row wrappers and redundant padding classes from tab labels,
letting .btn-tab__label handle alignment.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../modals/create-feature/index.tsx           | 45 ++++++-------------
 1 file changed, 14 insertions(+), 31 deletions(-)

diff --git a/frontend/web/components/modals/create-feature/index.tsx b/frontend/web/components/modals/create-feature/index.tsx
index cef28d85c1d1..9252d0c425ec 100644
--- a/frontend/web/components/modals/create-feature/index.tsx
+++ b/frontend/web/components/modals/create-feature/index.tsx
@@ -571,12 +571,10 @@ const CreateFeatureModal: FC<CreateFeatureModalProps> = (props) => {
                     data-test='value'
                     tabLabelString='Value'
                     tabLabel={
-                      <Row className='justify-content-center'>
-                        Value{' '}
-                        {valueChanged && (
-                          <div className='unread ml-2 px-1'>{'*'}</div>
-                        )}
-                      </Row>
+                      <>
+                        Value
+                        {valueChanged && <div className='unread'>*</div>}
+                      </>
                     }
                   >
                     <FeatureValueTab
@@ -615,16 +613,10 @@ const CreateFeatureModal: FC<CreateFeatureModalProps> = (props) => {
                         data-test='segment_overrides'
                         tabLabelString='Segment Overrides'
                         tabLabel={
-                          <Row
-                            className={`justify-content-center ${
-                              segmentsChanged ? 'pr-1' : ''
-                            }`}
-                          >
-                            Segment Overrides{' '}
-                            {segmentsChanged && (
-                              <div className='unread ml-2 px-2'>*</div>
-                            )}
-                          </Row>
+                          <>
+                            Segment Overrides
+                            {segmentsChanged && <div className='unread'>*</div>}
+                          </>
                         }
                       >
                         <SegmentOverridesTab
@@ -660,12 +652,7 @@ const CreateFeatureModal: FC<CreateFeatureModalProps> = (props) => {
                     </TabItem>
                   )}
                   {(!Project.disableAnalytics || hasCodeReferences) && (
-                    <TabItem
-                      tabLabelString='Usage'
-                      tabLabel={
-                        <Row className='justify-content-center'>Usage</Row>
-                      }
-                    >
+                    <TabItem tabLabelString='Usage' tabLabel='Usage'>
                       <UsageTab
                         projectId={projectId}
                         featureId={projectFlag.id}
@@ -691,9 +678,7 @@ const CreateFeatureModal: FC<CreateFeatureModalProps> = (props) => {
                     <TabItem
                       data-test='external-resources-links'
                       tabLabelString='Links'
-                      tabLabel={
-                        <Row className='justify-content-center'>Links</Row>
-                      }
+                      tabLabel='Links'
                     >
                       <ExternalResourcesLinkTab
                         githubId={githubId}
@@ -719,12 +704,10 @@ const CreateFeatureModal: FC<CreateFeatureModalProps> = (props) => {
                       data-test='settings'
                       tabLabelString='Settings'
                       tabLabel={
-                        <Row className='justify-content-center'>
-                          Settings{' '}
-                          {settingsChanged && (
-                            <div className='unread ml-2 px-1'>{'*'}</div>
-                          )}
-                        </Row>
+                        <>
+                          Settings
+                          {settingsChanged && <div className='unread'>*</div>}
+                        </>
                       }
                     >
                       <FeatureSettings