fix: tabs not growing to fill all available space (#9161)

Fix an issue where tabs would fill out all available space, now it's left aligned.
Unleash · Jan 28, 2025 · 1fba4e1 · 1fba4e1
1 parent ddf8a02
commit 1fba4e1
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/frontend/src/component/project/Project/Project.styles.ts b/frontend/src/component/project/Project/Project.styles.ts
@@ -74,13 +74,13 @@ export const StyledTabContainer = styled('div')(({ theme }) => ({
 export const StyledTab = styled(Tab)(({ theme }) => ({
     textTransform: 'none',
     fontSize: theme.fontSizes.bodySize,
-    flexGrow: 1,
     flexBasis: 0,
     [theme.breakpoints.down('md')]: {
         paddingLeft: theme.spacing(1),
         paddingRight: theme.spacing(1),
+        minWidth: 170,
     },
     [theme.breakpoints.up('md')]: {
-        minWidth: 160,
+        minWidth: 170,
     },
 }));
diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
@@ -76,7 +76,10 @@ interface ITab {
 const StyledCounterBadge = styled(CounterBadge)(({ theme }) => ({
     '.MuiBadge-badge': {
         backgroundColor: theme.palette.background.alternative,
-        right: '2px',
+        right: '-4px',
+    },
+    [theme.breakpoints.down('md')]: {
+        right: '6px',
     },
     flex: 'auto',
     justifyContent: 'center',