Update corp tabs to account for excessively long names

This commit is contained in:
nickofolas 2022-03-07 16:40:22 -06:00
parent 41eac2e775
commit e9033914e1
3 changed files with 15 additions and 2 deletions

@ -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} />,
)}

@ -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} />

@ -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: {