Merge pull request #3087 from nickofolas/improvement/tabs

#2710 Addendum

src/Corporation/ui/CityTabs.tsx

@@ -30,7 +30,7 @@ export function CityTabs(props: IProps): React.ReactElement {
   }
   return (
     <>
-      <Tabs variant="fullWidth" value={city} onChange={handleChange} sx={{ minWidth: 'fit-content', maxWidth: '65%' }}>
+      <Tabs variant="fullWidth" value={city} onChange={handleChange} sx={{ maxWidth: '65%' }}>
         {Object.values(division.offices).map(
           (office: OfficeSpace | 0) => office !== 0 && <Tab key={office.loc} label={office.loc} value={office.loc} />,
         )}

src/Corporation/ui/CorporationRoot.tsx

@@ -38,7 +38,7 @@ export function CorporationRoot(): React.ReactElement {
 
   return (
     <Context.Corporation.Provider value={corporation}>
-      <Tabs variant="fullWidth" value={divisionName} onChange={handleChange} sx={{ minWidth: 'fit-content', maxWidth: '65%' }}>
+      <Tabs variant="scrollable" value={divisionName} onChange={handleChange} sx={{ maxWidth: '65%' }} scrollButtons>
         <Tab label={corporation.name} value={"Overview"} />
         {corporation.divisions.map((div) => (
           <Tab key={div.name} label={div.name} value={div.name} />

src/Themes/ui/Theme.tsx

@@ -348,6 +348,19 @@ export function refreshTheme(): void {
         },
       },
       MuiTabs: {
+        styleOverrides: {
+          scrollButtons: {
+            backgroundColor: Settings.theme.backgroundsecondary,
+            color: Settings.theme.secondary,
+            margin: '3px',
+            opacity: 1,
+            width: 'fit-content',
+
+            "&.Mui-disabled": {
+              opacity: 0.5
+            }
+          }
+        },
         defaultProps: {
           TabIndicatorProps: {
             style: {