From 2111c2e3d723db2d43eb931a5f6b892c4f57c87e Mon Sep 17 00:00:00 2001
From: ChrissiQ <1127719+ChrissiQ@users.noreply.github.com>
Date: Sun, 10 Apr 2022 12:37:10 -0600
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20=20(Corp=20UI=20Accessibil?=
 =?UTF-8?q?ity)=20Limit=20tabs=20width=20to=20avoid=20stretching=20screen.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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        | 2 +-
 src/Corporation/ui/CorporationRoot.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Corporation/ui/CityTabs.tsx b/src/Corporation/ui/CityTabs.tsx
index 498926c14..90b4d0305 100644
--- a/src/Corporation/ui/CityTabs.tsx
+++ b/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} />,
         )}
diff --git a/src/Corporation/ui/CorporationRoot.tsx b/src/Corporation/ui/CorporationRoot.tsx
index 8eeded1d9..bf4766cf0 100644
--- a/src/Corporation/ui/CorporationRoot.tsx
+++ b/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} />