Provide our own h6 instead of relying on the implicit one

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

@@ -34,8 +34,6 @@ export const CollectionMappingChoiceDialog: React.FC<
         PaperProps={{ sx: { maxWidth: "360px", padding: "12px" } }}
     >
         <DialogTitle
-            variant="large"
-            fontWeight={"bold"}
             sx={{
                 "&&&": { padding: "4px 4px 0 16px" },
                 display: "flex",

web/packages/shared/themes/mui-theme.d.ts

@@ -51,7 +51,7 @@ declare module "@mui/material/Typography" {
         tiny: true;
         h4: true;
         h5: false;
-        h6: false;
+        h6: true;
         subtitle1: false;
         subtitle2: false;
         body1: false;

web/packages/shared/themes/typography.ts

@@ -17,6 +17,15 @@ export const typography: TypographyOptions = {
         fontSize: "22px",
         lineHeight: "27px",
     },
+    // h6 is the default variant used by MUI's DialogTitle.
+    h6: {
+        // The font size and line height belows is the same as large.
+        fontSize: "18px",
+        lineHeight: "22px",
+        // Browser default is bold, but MUI resets it to 500 which is too light
+        // for our chosen font.
+        fontWeight: "bold"
+    },
     large: {
         fontSize: "18px",
         lineHeight: "22px",