Grid-align buttons in location UIs (and options)

src/Locations/ui/CasinoLocation.tsx

@@ -10,6 +10,7 @@ import { CoinFlip } from "../../Casino/CoinFlip";
 import { Roulette } from "../../Casino/Roulette";
 import { SlotMachine } from "../../Casino/SlotMachine";
 import { IPlayer } from "../../PersonObjects/IPlayer";
+import { Box } from "@mui/material";
 
 enum GameType {
   None = "none",
@@ -33,15 +34,12 @@ export function CasinoLocation(props: IProps): React.ReactElement {
   return (
     <>
       {game === GameType.None && (
-        <>
+        <Box sx={{ display: 'grid', width: 'fit-content' }}>
           <Button onClick={() => updateGame(GameType.Coin)}>Play coin flip</Button>
-          <br />
           <Button onClick={() => updateGame(GameType.Slots)}>Play slots</Button>
-          <br />
           <Button onClick={() => updateGame(GameType.Roulette)}>Play roulette</Button>
-          <br />
           <Button onClick={() => updateGame(GameType.Blackjack)}>Play blackjack</Button>
-        </>
+        </Box>
       )}
       {game !== GameType.None && (
         <>

src/Locations/ui/CompanyLocation.tsx

@@ -226,8 +226,12 @@ export function CompanyLocation(props: IProps): React.ReactElement {
           </Box>
           <Typography>-------------------------</Typography>
           <br />
+        </>
+      )}
+      <Box sx={{ display: 'grid', width: 'fit-content' }}>
+        {isEmployedHere && (
+          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
             <Button onClick={work}>Work</Button>
-          &nbsp;&nbsp;&nbsp;&nbsp;
             <Button onClick={() => setQuitOpen(true)}>Quit</Button>
             <QuitJobModal
               locName={props.locName}
@@ -236,9 +240,10 @@ export function CompanyLocation(props: IProps): React.ReactElement {
               open={quitOpen}
               onClose={() => setQuitOpen(false)}
             />
-        </>
+          </Box>
-      )}
+        )
-      <br />
+
+        }
         {company.hasAgentPositions() && (
           <ApplyToJobButton
             company={company}
@@ -328,6 +333,7 @@ export function CompanyLocation(props: IProps): React.ReactElement {
           />
         )}
         {location.infiltrationData != null && <Button onClick={startInfiltration}>Infiltrate Company</Button>}
+      </Box>
     </>
   );
 }

src/Locations/ui/GymLocation.tsx

@@ -16,6 +16,7 @@ import { Server } from "../../Server/Server";
 import { Money } from "../../ui/React/Money";
 import { IRouter } from "../../ui/Router";
 import { serverMetadata } from "../../Server/data/servers";
+import { Box } from "@mui/material";
 
 type IProps = {
   loc: Location;
@@ -56,7 +57,7 @@ export function GymLocation(props: IProps): React.ReactElement {
   const cost = CONSTANTS.ClassGymBaseCost * calculateCost();
 
   return (
-    <>
+    <Box sx={{ display: 'grid', width: 'fit-content' }}>
       <Button onClick={trainStrength}>
         Train Strength (<Money money={cost} player={props.p} /> / sec)
       </Button>
@@ -72,6 +73,6 @@ export function GymLocation(props: IProps): React.ReactElement {
       <Button onClick={trainAgility}>
         Train Agility (<Money money={cost} player={props.p} /> / sec)
       </Button>
-    </>
+    </Box>
   );
 }

src/Locations/ui/SlumsLocation.tsx

@@ -11,6 +11,7 @@ import { Crimes } from "../../Crime/Crimes";
 
 import { numeralWrapper } from "../../ui/numeralFormat";
 import { use } from "../../ui/Context";
+import { Box } from "@mui/material";
 
 export function SlumsLocation(): React.ReactElement {
   const player = use.Player();
@@ -113,73 +114,61 @@ export function SlumsLocation(): React.ReactElement {
   const heistChance = Crimes.Heist.successRate(player);
 
   return (
-    <>
+    <Box sx={{ display: 'grid', width: 'fit-content' }}>
       <Tooltip title={<>Attempt to shoplift from a low-end retailer</>}>
         <Button onClick={shoplift}>
           Shoplift ({numeralWrapper.formatPercentage(shopliftChance)} chance of success)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to commit armed robbery on a high-end store</>}>
         <Button onClick={robStore}>
           Rob store ({numeralWrapper.formatPercentage(robStoreChance)} chance of success)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to mug a random person on the street</>}>
         <Button onClick={mug}>Mug someone ({numeralWrapper.formatPercentage(mugChance)} chance of success)</Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to rob property from someone's house</>}>
         <Button onClick={larceny}>Larceny ({numeralWrapper.formatPercentage(larcenyChance)} chance of success)</Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to deal drugs</>}>
         <Button onClick={dealDrugs}>
           Deal Drugs ({numeralWrapper.formatPercentage(drugsChance)} chance of success)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to forge corporate bonds</>}>
         <Button onClick={bondForgery}>
           Bond Forgery ({numeralWrapper.formatPercentage(bondChance)} chance of success)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to smuggle illegal arms into the city</>}>
         <Button onClick={traffickArms}>
           Traffick illegal Arms ({numeralWrapper.formatPercentage(armsChance)} chance of success)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to murder a random person on the street</>}>
         <Button onClick={homicide}>
           Homicide ({numeralWrapper.formatPercentage(homicideChance)} chance of success)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to commit grand theft auto</>}>
         <Button onClick={grandTheftAuto}>
           Grand theft Auto ({numeralWrapper.formatPercentage(gtaChance)} chance of success)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to kidnap and ransom a high-profile-target</>}>
         <Button onClick={kidnap}>
           Kidnap and Ransom ({numeralWrapper.formatPercentage(kidnapChance)} chance of success)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to assassinate a high-profile target</>}>
         <Button onClick={assassinate}>
           Assassinate ({numeralWrapper.formatPercentage(assassinateChance)} chance of success)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to pull off the ultimate heist</>}>
         <Button onClick={heist}>Heist ({numeralWrapper.formatPercentage(heistChance)} chance of success)</Button>
       </Tooltip>
-      <br />
+    </Box>
-    </>
   );
 }

src/Locations/ui/TechVendorLocation.tsx

@@ -18,6 +18,7 @@ import { Money } from "../../ui/React/Money";
 import { use } from "../../ui/Context";
 import { PurchaseServerModal } from "./PurchaseServerModal";
 import { numeralWrapper } from "../../ui/numeralFormat";
+import { Box } from "@mui/material";
 
 interface IServerProps {
   ram: number;
@@ -70,7 +71,9 @@ export function TechVendorLocation(props: IProps): React.ReactElement {
   return (
     <>
       <br />
+      <Box sx={{ display: 'grid', width: 'fit-content' }}>
         {purchaseServerButtons}
+      </Box>
       <br />
       <Typography>
         <i>"You can order bigger servers via scripts. We don't take custom orders in person."</i>

src/Locations/ui/UniversityLocation.tsx

@@ -15,6 +15,7 @@ import { Server } from "../../Server/Server";
 
 import { Money } from "../../ui/React/Money";
 import { use } from "../../ui/Context";
+import { Box } from "@mui/material";
 
 type IProps = {
   loc: Location;
@@ -72,45 +73,40 @@ export function UniversityLocation(props: IProps): React.ReactElement {
   const earnCharismaExpTooltip = `Gain charisma experience!`;
 
   return (
-    <>
+    <Box sx={{ display: 'grid', width: 'fit-content' }}>
       <Tooltip title={earnHackingExpTooltip}>
         <Button onClick={study}>Study Computer Science (free)</Button>
       </Tooltip>
-      <br />
       <Tooltip title={earnHackingExpTooltip}>
         <Button onClick={dataStructures}>
           Take Data Structures course (
           <Money money={dataStructuresCost} player={player} /> / sec)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={earnHackingExpTooltip}>
         <Button onClick={networks}>
           Take Networks course (
           <Money money={networksCost} player={player} /> / sec)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={earnHackingExpTooltip}>
         <Button onClick={algorithms}>
           Take Algorithms course (
           <Money money={algorithmsCost} player={player} /> / sec)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={earnCharismaExpTooltip}>
         <Button onClick={management}>
           Take Management course (
           <Money money={managementCost} player={player} /> / sec)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={earnCharismaExpTooltip}>
         <Button onClick={leadership}>
           Take Leadership course (
           <Money money={leadershipCost} player={player} /> / sec)
         </Button>
       </Tooltip>
-    </>
+    </Box>
   );
 }

src/ui/React/GameOptionsRoot.tsx

@@ -529,12 +529,12 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
             </>
           )}
         </Grid>
-        <Grid item xs={12} sm={6}>
+        <Box sx={{ display: 'grid', width: 'fit-content', height: 'fit-content' }}>
-          <Box>
+          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
             <Button onClick={() => props.save()}>Save Game</Button>
             <Button onClick={() => setDeleteOpen(true)}>Delete Game</Button>
           </Box>
-          <Box>
+          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
             <Tooltip title={<Typography>Export your game to a text file.</Typography>}>
               <Button onClick={() => props.export()}>
                 <DownloadIcon color="primary" />
@@ -571,7 +571,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
               }
             />
           </Box>
-          <Box>
+          <Box sx={{ display: 'grid' }}>
             <Tooltip
               title={
                 <Typography>
@@ -586,7 +586,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
               <Button onClick={() => props.forceKill()}>Force kill all active scripts</Button>
             </Tooltip>
           </Box>
-          <Box>
+          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
             <Tooltip
               title={
                 <Typography>
@@ -613,7 +613,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
               <Button onClick={() => setDiagnosticOpen(true)}>Diagnose files</Button>
             </Tooltip>
           </Box>
-          <Box>
+          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
             <Button onClick={() => setThemeEditorOpen(true)}>Theme editor</Button>
             <Button onClick={() => setStyleEditorOpen(true)}>Style editor</Button>
           </Box>
@@ -637,7 +637,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
               <Typography>Incremental game plaza</Typography>
             </Link>
           </Box>
-        </Grid>
+        </Box>
       </Grid>
       <FileDiagnosticModal open={diagnosticOpen} onClose={() => setDiagnosticOpen(false)} />
       <ConfirmationModal