♿️ (Corp UI Accessibility) Limit tabs width to avoid stretching screen.

The rendering engine doesn't seem to respond properly to a limit of 65% for the tabs
area. Though the tab area visually appears to be limited, the parent container is
still using the full extended width of the tabs, causing page stretch. Using 65vw
instead of 65% for maxWidth causes the calculation to be based on the actual page
width so no stretching occurs.

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={{ maxWidth: "65%" }}>
+      <Tabs variant="fullWidth" value={city} onChange={handleChange} sx={{ maxWidth: "65vw" }}>
         {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="scrollable" value={divisionName} onChange={handleChange} sx={{ maxWidth: "65%" }} scrollButtons>
+      <Tabs variant="scrollable" value={divisionName} onChange={handleChange} sx={{ maxWidth: "65vw" }} scrollButtons>
         <Tab label={corporation.name} value={"Overview"} />
         {corporation.divisions.map((div) => (
           <Tab key={div.name} label={div.name} value={div.name} />