From: 7PH <benjamin.raymond@sonarsource.com>
Date: Mon, 29 Jan 2024 17:26:45 +0000 (+0100)
Subject: SONAR-21467 Make new tab navigation component full width
X-Git-Tag: 10.4.0.87286~89
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=cca972d4ef607b255d47f75c3c64b268c6983c78;p=sonarqube.git

SONAR-21467 Make new tab navigation component full width
---

diff --git a/server/sonar-web/design-system/src/components/Tabs.tsx b/server/sonar-web/design-system/src/components/Tabs.tsx
index dd0381f3284..24b071b66a9 100644
--- a/server/sonar-web/design-system/src/components/Tabs.tsx
+++ b/server/sonar-web/design-system/src/components/Tabs.tsx
@@ -82,6 +82,7 @@ export function Tabs<T extends TabValueType>(props: PropsWithChildren<TabsProps<
 
 const TabsContainer = styled.div`
   ${tw`sw-w-full`};
+  ${tw`sw-pl-4`};
   ${tw`sw-flex sw-justify-between`};
   border-bottom: ${themeBorder('default')};
 `;
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/TabsPanel.tsx b/server/sonar-web/src/main/js/apps/overview/branches/TabsPanel.tsx
index 5760185f04c..0f0ace130a2 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/TabsPanel.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/TabsPanel.tsx
@@ -157,14 +157,14 @@ export function TabsPanel(props: React.PropsWithChildren<MeasuresPanelProps>) {
               </FlagMessage>
             </div>
           )}
-          <div className="sw-flex sw-items-center">
+          <div className="sw-flex sw-items-center sw--mx-6">
             <Tabs
               onChange={props.onTabSelect}
               options={tabs}
               value={isNewCode ? MeasuresTabs.New : MeasuresTabs.Overall}
             >
               {isNewCode && leakPeriod && (
-                <LightLabel className="sw-body-sm sw-flex sw-items-center">
+                <LightLabel className="sw-body-sm sw-flex sw-items-center sw-mr-6">
                   <span className="sw-mr-1">{translate('overview.new_code')}:</span>
                   <LeakPeriodInfo leakPeriod={leakPeriod} />
                 </LightLabel>