Use lg Container width

src/Augmentation/ui/PurchasableAugmentations.tsx

@@ -131,7 +131,7 @@ interface IPurchasableAugsProps {
 export const PurchasableAugmentations = (props: IPurchasableAugsProps): React.ReactElement => {
   return (
     <Container
-      maxWidth="md"
+      maxWidth="lg"
       disableGutters
       sx={{ mx: 0, display: "grid", gridTemplateColumns: "repeat(1, 1fr)", gap: 1 }}
     >
@@ -175,7 +175,7 @@ export function PurchasableAugmentation(props: IPurchasableAugProps): React.Reac
         sx={{
           p: 1,
           display: "grid",
-          gridTemplateColumns: "minmax(0, 3fr) 1fr",
+          gridTemplateColumns: "minmax(0, 4fr) 1fr",
           gap: 1,
           opacity: props.owned ? 0.75 : 1,
         }}
@@ -229,8 +229,7 @@ export function PurchasableAugmentation(props: IPurchasableAugProps): React.Reac
         </Box>
 
         {props.owned || (
-          <Box sx={{ display: "flex", alignItems: "center" }}>
-            <span>
+          <Box sx={{ display: "grid", alignItems: "center", justifyItems: "left" }}>
             <Requirement
               fulfilled={aug.baseCost === 0 || props.parent.player.money > cost}
               value={numeralWrapper.formatMoney(cost)}
@@ -243,11 +242,17 @@ export function PurchasableAugmentation(props: IPurchasableAugProps): React.Reac
                 color={Settings.theme.rep}
               />
             )}
-            </span>
           </Box>
         )}
       </Paper>
-      <PurchaseAugmentationModal open={open} onClose={() => setOpen(false)} faction={props.parent.faction} aug={aug} />
+      {Settings.SuppressBuyAugmentationConfirmation || (
+        <PurchaseAugmentationModal
+          open={open}
+          onClose={() => setOpen(false)}
+          faction={props.parent.faction}
+          aug={aug}
+        />
+      )}
     </>
   );
 }

src/Faction/ui/AugmentationsPage.tsx

@@ -141,7 +141,7 @@ export function AugmentationsPage(props: IProps): React.ReactElement {
 
   return (
     <>
-      <Container disableGutters maxWidth="md" sx={{ mx: 0 }}>
+      <Container disableGutters maxWidth="lg" sx={{ mx: 0 }}>
         <Button onClick={props.routeToMainPage}>Back</Button>
         <Typography variant="h4">Faction Augmentations</Typography>
         <Paper sx={{ p: 1, mb: 1 }}>

src/PersonObjects/Sleeve/ui/SleeveAugmentationsModal.tsx

@@ -34,7 +34,7 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
 
   return (
     <Modal open={props.open} onClose={props.onClose}>
-      <Container component={Paper} disableGutters maxWidth="md" sx={{ mx: 0, mb: 1, p: 1 }}>
+      <Container component={Paper} disableGutters maxWidth="lg" sx={{ mx: 0, mb: 1, p: 1 }}>
         <Typography>
           You can purchase Augmentations for your Duplicate Sleeves. These Augmentations have the same effect as they
           would for you. You can only purchase Augmentations that you have unlocked through Factions.