fix(settings): center the content in a 720px column and add a shared --font-mono token

src/app/features/settings/SettingsPage.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
 import { Page, PageContent, PageHeader } from '../../components/page';
+import { SettingsContentCenter } from './styles.css';
 
 type SettingsPageProps = {
   title: ReactNode;
@@ -19,8 +20,11 @@ export function SettingsPage({ title, requestClose, children }: SettingsPageProp
   const { t } = useTranslation();
   return (
     <Page variant="SurfaceVariant">
-      <PageHeader outlined={false}>
+      {/* paddingRight:0 matches PageContent so the header's centered 720 column
-        <Box grow="Yes" gap="200" alignItems="Center">
+          lines up exactly with the content column below (PageHeader defaults to
+          a S200 right pad, which would shift the title ~4px off the content). */}
+      <PageHeader outlined={false} style={{ paddingRight: 0 }}>
+        <Box className={SettingsContentCenter} gap="200" alignItems="Center">
           <Box grow="Yes" alignItems="Center" gap="200">
             <Text size="H3" truncate>
               {title}
@@ -40,7 +44,7 @@ export function SettingsPage({ title, requestClose, children }: SettingsPageProp
       <Box grow="Yes">
         <Scroll hideTrack visibility="Hover">
           <PageContent style={{ paddingBottom: '1rem' }}>
-            <Box direction="Column" gap="500">
+            <Box className={SettingsContentCenter} direction="Column" gap="500">
               {children}
             </Box>
           </PageContent>

src/app/features/settings/styles.css.ts

@@ -40,7 +40,15 @@ export const SettingRow = style({
 // JetBrains Mono for technical values — mxid, device ids, version, tokens —
 // the same stack the DM stream / bot surfaces use for handles & timestamps.
 export const Mono = style({
-  fontFamily:
+  fontFamily: 'var(--font-mono)',
-    '"JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
   fontVariantNumeric: 'tabular-nums',
 });
+
+// Centre the settings content as a calm reading column on wide desktop so it
+// stops stretching edge-to-edge. width:100% + margin:auto means it degrades to
+// full-width inside the narrower mobile settings sheet (no visible cap there).
+export const SettingsContentCenter = style({
+  maxWidth: toRem(720),
+  width: '100%',
+  margin: 'auto',
+});

src/index.css

@@ -50,6 +50,12 @@
 
   --font-emoji: 'Twemoji_DISABLED';
   --font-secondary: 'InterVariable', var(--font-emoji), sans-serif;
+  /* Single shared mono stack for technical metadata (mxid, aliases,
+     timestamps, device ids, version, shortcodes, command sigs). JetBrains
+     Mono Variable is imported globally in index.tsx; this var lets every
+     surface point at one stack instead of repeating it. */
+  --font-mono: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    monospace;
 }
 
 .dark-theme {