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.

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,
     },
 }));

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',