fix: keep settings fields and long addresses inside the page at large text sizes

components/settings/accessibility-settings.tsx

@@ -134,7 +134,7 @@ export function AccessibilitySettings() {
   return (
     <div className="space-y-8">
       <SettingsSection id="presets" title={t('presets.title')} description={t('presets.description')}>
-        <div className="grid gap-2 sm:grid-cols-2" role="group" aria-label={t('presets.title')}>
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2" role="group" aria-label={t('presets.title')}>
           {ACCESSIBILITY_PRESET_IDS.map((id) => (
             <button
               key={id}
@@ -143,7 +143,7 @@ export function AccessibilitySettings() {
               className="flex items-start gap-3 text-start rounded-md border border-border px-3 py-2.5 hover:bg-muted transition-colors"
             >
               <AccessibilityPresetPreview id={id} />
-              <span className="min-w-0">
+              <span className="min-w-0 wrap-anywhere">
                 <span className="block text-sm font-medium text-foreground">{t(`presets.${id}.label`)}</span>
                 <span className="block text-xs text-muted-foreground mt-0.5">{t(`presets.${id}.description`)}</span>
               </span>

components/settings/delegates/delegates-settings.tsx

@@ -196,7 +196,7 @@ export function DelegatesSettings() {
                       <div className="text-xs text-muted-foreground">{describeSummary(summary, t)}</div>
                     </div>
                   </div>
-                  <div className="flex shrink-0 gap-2 ps-11 sm:ps-0">
+                  <div className="flex flex-wrap shrink-0 gap-2 ps-11 sm:ps-0">
                     <Button variant="outline" size="sm" onClick={() => setDialog({ mode: "change", summary })} disabled={busy || incomplete}>
                       {t("change")}
                     </Button>

components/settings/multi-account-push.tsx

@@ -122,7 +122,7 @@ export function MultiAccountPushSettings({ relayBaseUrl }: { relayBaseUrl?: stri
           <label className="flex items-start gap-2 ps-6 text-sm">
             <input type="checkbox" className="mt-1" disabled={busy} checked={chosen.has(account.id)}
               onChange={e => toggle(account.id, e.target.checked)} />
-            <span>
+            <span className="min-w-0 wrap-anywhere">
               <span className="block">{account.displayName || account.label || account.username}</span>
               <span className="block text-xs text-muted-foreground">
                 <bdi dir="ltr">{account.email || account.username}</bdi> · {enabled[account.id] ? t('state_on') : t('state_off')}

components/settings/settings-section.tsx

@@ -280,7 +280,7 @@ export function SettingItem({ label, description, children, locked, advanced, ne
       </div>
       <SettingLabelContext.Provider value={labelId}>
         {/* The admin's value stays readable; inert keeps mouse and keyboard off it. */}
-        <div ref={controlsRef} className={cn("flex-shrink-0 min-w-0 max-w-full sm:max-w-[70%]", locked && "opacity-60")} inert={locked || undefined}>{children}</div>
+        <div ref={controlsRef} className={cn("flex-shrink-0 min-w-0 max-w-full sm:max-w-[70%] wrap-anywhere", locked && "opacity-60")} inert={locked || undefined}>{children}</div>
       </SettingLabelContext.Provider>
     </div>
   );

components/settings/vacation-settings.tsx

@@ -71,7 +71,7 @@ function utcToLocalDatetime(utcIso: string, timeZone: string): string {
 }
 
 const DATE_FIELD =
-  'px-3 py-1.5 text-sm rounded-md bg-muted border border-border text-foreground focus:outline-hidden transition-colors duration-150 hover:border-muted-foreground';
+  'max-w-full px-3 py-1.5 text-sm rounded-md bg-muted border border-border text-foreground focus:outline-hidden transition-colors duration-150 hover:border-muted-foreground';
 
 // The latest moment the date fields offer: a later year has no room in the
 // four digits a stored date has.
@@ -569,7 +569,7 @@ export function VacationSettings() {
             onChange={(e) => changeTyped(setLocalSubject)(e.target.value)}
             placeholder={t('message.subject_placeholder')}
             aria-invalid={oversize.subject}
-            className="w-64 px-3 py-1.5 text-sm rounded-md bg-muted border border-border text-foreground placeholder:text-muted-foreground focus:outline-hidden transition-colors duration-150 hover:border-muted-foreground"
+            className="w-64 max-w-full px-3 py-1.5 text-sm rounded-md bg-muted border border-border text-foreground placeholder:text-muted-foreground focus:outline-hidden transition-colors duration-150 hover:border-muted-foreground"
           />
         </SettingItem>
         <FieldMessage text={oversize.subject && sizeLimits ? t('warnings.subject_too_long', { max: sizeLimits.subject }) : null} />