Tweak

web/apps/auth/src/pages/share.tsx

@@ -147,7 +147,7 @@ const Page: React.FC = () => {
                                 backgroundColor: "#1c1c1e",
                             }),
                             borderRadius: "10px",
-                            paddingBottom: "20px",
+                            pb: "20px",
                             position: "relative",
                         })}
                     >

web/apps/photos/src/components/FixCreationTime.tsx

@@ -82,11 +82,11 @@ export const FixCreationTime: React.FC<FixCreationTimeProps> = ({
                 onClose();
             }}
         >
-            <DialogTitle sx={{ marginBlockStart: "4px" }}>{title}</DialogTitle>
+            <DialogTitle sx={{ mt: "4px" }}>{title}</DialogTitle>
             <DialogContent
-                style={{
+                sx={{
                     minWidth: "310px",
-                    paddingBlockStart: "6px",
+                    pt: "6px",
                     display: "flex",
                     flexDirection: "column",
                     ...(step == "running" ? { alignItems: "center" } : {}),
@@ -181,7 +181,7 @@ const OptionsForm: React.FC<OptionsFormProps> = ({
                         name={"option"}
                         value={values.option}
                         onChange={handleChange}
-                        sx={{ paddingBlockStart: 1 }}
+                        sx={{ pt: 1 }}
                     >
                         <FormControlLabel
                             value={"date-time-original"}

web/packages/base/components/MiniDialog.tsx

@@ -316,7 +316,7 @@ export const AttributedMiniDialog: React.FC<
                 )}
                 {children}
                 <Stack
-                    sx={{ paddingBlockStart: "24px", gap: "8px" }}
+                    sx={{ pt: 3, gap: 1 }}
                     direction={attributes.buttonDirection ?? "column"}
                 >
                     {phase == "failed" && <InlineErrorIndicator />}

web/packages/base/components/OverflowMenu.tsx

@@ -144,7 +144,7 @@ export const OverflowMenuOption: React.FC<
                     // Fill our container.
                     width: "100%",
                     // MUI has responsive padding, use a static value instead.
-                    paddingBlock: 1,
+                    py: 1,
                 }}
             >
                 {startIcon}

web/packages/base/components/SingleInputDialog.tsx

@@ -36,10 +36,10 @@ export const SingleInputDialog: React.FC<SingleInputDialogProps> = ({
             onClose={onClose}
             maxWidth="xs"
             fullWidth
-            slotProps={{ paper: { sx: { padding: "8px 4px 4px 4px" } } }}
+            slotProps={{ paper: { sx: { p: "8px 4px 4px 4px" } } }}
         >
             <DialogTitle>{title}</DialogTitle>
-            <DialogContent sx={{ "&&&": { paddingBlockStart: 0 } }}>
+            <DialogContent sx={{ "&&&": { pt: 0 } }}>
                 <SingleInputForm
                     onCancel={onClose}
                     onSubmit={handleSubmit}

web/packages/new/photos/components/FileViewer.tsx

@@ -71,7 +71,7 @@ export const ConfirmDeleteFileDialog: React.FC<
             <Typography sx={{ color: "text.muted" }}>
                 {t("trash_file_message")}
             </Typography>
-            <Stack sx={{ paddingBlockStart: "24px", gap: "8px" }}>
+            <Stack sx={{ pt: 3, gap: 1 }}>
                 {phase == "failed" && <InlineErrorIndicator />}
                 <LoadingButton
                     loading={phase == "loading"}

web/packages/new/photos/components/gallery/PeopleHeader.tsx

@@ -744,11 +744,7 @@ const SuggestionOrChoiceList: React.FC<SuggestionOrChoiceListProps> = ({
         {items.map((item) => (
             <ListItem
                 key={item.id}
-                sx={{
-                    paddingInline: 0,
-                    paddingBlockEnd: "24px",
-                    justifyContent: "space-between",
-                }}
+                sx={{ px: 0, pb: "24px", justifyContent: "space-between" }}
             >
                 <Stack sx={{ gap: "10px" }}>
                     <Typography variant="small" sx={{ color: "text.muted" }}>

web/packages/new/photos/pages/duplicates.tsx

@@ -1,5 +1,5 @@
 import { useRedirectIfNeedsCredentials } from "@/accounts/components/utils/use-redirect";
-import { CenteredFill } from "@/base/components/containers";
+import { CenteredFill, SpacedRow } from "@/base/components/containers";
 import { ActivityErrorIndicator } from "@/base/components/ErrorIndicator";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
@@ -570,12 +570,9 @@ const ListItem: React.FC<ListChildComponentProps<DuplicatesListItemData>> =
                     checked ? { opacity: 1 } : { opacity: 0.8 },
                 ]}
             >
-                <Stack
-                    direction="row"
+                <SpacedRow
                     sx={{
-                        justifyContent: "space-between",
-                        alignItems: "center",
-                        marginInline: 1,
+                        mx: 1,
                         paddingInline: "var(--et-padding-inline)",
                         paddingBlock: "24px 0px",
                     }}
@@ -585,7 +582,7 @@ const ListItem: React.FC<ListChildComponentProps<DuplicatesListItemData>> =
                     </Typography>
                     {/* The size of this Checkbox is 42px. */}
                     <Checkbox {...{ checked, onChange }} />
-                </Stack>
+                </SpacedRow>
                 <Divider
                     variant="middle"
                     sx={[