From bfb8bc71aeb812338b2d4fed5893add1fdc22993 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 23 Jul 2024 09:24:53 +0200
Subject: [PATCH] Consolidate spacing in containers:

---
 .../feature/FeatureView/Contributors.tsx      |  3 +-
 .../feature/FeatureView/FeatureView.tsx       | 40 +++++++++----------
 2 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/Contributors.tsx b/frontend/src/component/feature/FeatureView/Contributors.tsx
index 7fba565e19..0274ca29fd 100644
--- a/frontend/src/component/feature/FeatureView/Contributors.tsx
+++ b/frontend/src/component/feature/FeatureView/Contributors.tsx
@@ -72,10 +72,9 @@ const Collaborators: FC<CollaboratorListProps> = ({ users }) => {
 const Container = styled('article')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'row',
-    gap: theme.spacing(4),
+    gap: theme.spacing(10),
     alignItems: 'center',
     justifyContent: 'space-between',
-    marginInlineEnd: theme.spacing(4),
     [theme.breakpoints.down('xl')]: {
         display: 'none',
     },
diff --git a/frontend/src/component/feature/FeatureView/FeatureView.tsx b/frontend/src/component/feature/FeatureView/FeatureView.tsx
index 0779f503fe..cd77e18ba6 100644
--- a/frontend/src/component/feature/FeatureView/FeatureView.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureView.tsx
@@ -117,11 +117,9 @@ const StyledSeparator = styled('div')(({ theme }) => ({
 const StyledTabRow = styled('div')(({ theme }) => ({
     display: 'flex',
     flexFlow: 'row nowrap',
-}));
-
-const StyledTabContainer = styled('div')(({ theme }) => ({
-    padding: theme.spacing(0, 4),
-    flex: '1',
+    gap: theme.spacing(4),
+    paddingInline: theme.spacing(4),
+    justifyContent: 'space-between',
 }));
 
 const StyledTabButton = styled(Tab)(({ theme }) => ({
@@ -363,23 +361,21 @@ export const FeatureView = () => {
                 </StyledInnerContainer>
                 <StyledSeparator />
                 <StyledTabRow>
-                    <StyledTabContainer>
-                        <Tabs
-                            value={activeTab.path}
-                            indicatorColor='primary'
-                            textColor='primary'
-                        >
-                            {tabData.map((tab) => (
-                                <StyledTabButton
-                                    key={tab.title}
-                                    label={tab.title}
-                                    value={tab.path}
-                                    onClick={() => navigate(tab.path)}
-                                    data-testid={`TAB-${tab.title}`}
-                                />
-                            ))}
-                        </Tabs>
-                    </StyledTabContainer>
+                    <Tabs
+                        value={activeTab.path}
+                        indicatorColor='primary'
+                        textColor='primary'
+                    >
+                        {tabData.map((tab) => (
+                            <StyledTabButton
+                                key={tab.title}
+                                label={tab.title}
+                                value={tab.path}
+                                onClick={() => navigate(tab.path)}
+                                data-testid={`TAB-${tab.title}`}
+                            />
+                        ))}
+                    </Tabs>
                     <Collaborators collaborators={feature.collaborators} />
                 </StyledTabRow>
             </StyledHeader>