Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2025-01-02 03:17:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
ChrissiQ 2022-04-10 12:37:10 -06:00
parent d998ff9f9c
commit 2111c2e3d7
2 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Corporation/ui/CityTabs.tsx
View File

@ -30,7 +30,7 @@ export function CityTabs(props: IProps): React.ReactElement {
} }
return ( 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( {Object.values(division.offices).map(
(office: OfficeSpace | 0) => office !== 0 && <Tab key={office.loc} label={office.loc} value={office.loc} />, (office: OfficeSpace | 0) => office !== 0 && <Tab key={office.loc} label={office.loc} value={office.loc} />,
)} )}

2
src/Corporation/ui/CorporationRoot.tsx
View File

@ -38,7 +38,7 @@ export function CorporationRoot(): React.ReactElement {
return ( return (
<Context.Corporation.Provider value={corporation}> <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"} /> <Tab label={corporation.name} value={"Overview"} />
{corporation.divisions.map((div) => ( {corporation.divisions.map((div) => (
<Tab key={div.name} label={div.name} value={div.name} /> <Tab key={div.name} label={div.name} value={div.name} />