From 7fe9c581b00ec4f94472e5a05aab568d63648e25 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Mon, 27 Apr 2026 22:45:31 +0200
Subject: [PATCH] fix: remove MFA card from tenant settings, constrain card
 widths

MFA enrollment now happens during sign-in. Tenant settings page reduced
to: Tenant Details + Auth Policy side-by-side (max 520px each), Passkeys
full-width below.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/tenant/SettingsPage.tsx | 149 +++++++++++++--------------
 1 file changed, 73 insertions(+), 76 deletions(-)

diff --git a/ui/src/pages/tenant/SettingsPage.tsx b/ui/src/pages/tenant/SettingsPage.tsx
index 2290ed0..dfdb102 100644
--- a/ui/src/pages/tenant/SettingsPage.tsx
+++ b/ui/src/pages/tenant/SettingsPage.tsx
@@ -15,7 +15,6 @@ import {
   useResetServerAdminPassword,
   useTenantAuthSettings, useUpdateTenantAuthSettings,
 } from '../../api/tenant-hooks';
-import { MfaSection } from '../../components/account/MfaSection';
 import { PasskeySection } from '../../components/account/PasskeySection';
 import { useScopes } from '../../auth/useScopes';
 import styles from '../../styles/platform.module.css';
@@ -140,85 +139,83 @@ export function SettingsPage() {
     <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20, overflowY: 'auto', flex: 1 }}>
       <h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600 }}>Settings</h1>
 
-      {/* Card 1: Tenant Details */}
-      <Card title="Tenant Details">
-        <div className={styles.dividerList}>
-          <div className={styles.kvRow}>
-            <span className={styles.kvLabel}>Name</span>
-            <span className={styles.kvValue}>{data.name}</span>
-          </div>
-          <div className={styles.kvRow}>
-            <span className={styles.kvLabel}>Slug</span>
-            <span className={styles.kvValueMono}>{data.slug}</span>
-          </div>
-          <div className={styles.kvRow}>
-            <span className={styles.kvLabel}>Status</span>
-            <Badge label={data.status} color={statusColor(data.status)} />
-          </div>
-          <div className={styles.kvRow}>
-            <span className={styles.kvLabel}>Server Endpoint</span>
-            <span className={styles.kvValueMono}>{data.serverEndpoint ?? '—'}</span>
-          </div>
-          <div className={styles.kvRow}>
-            <span className={styles.kvLabel}>Created</span>
-            <span className={styles.kvValue}>{new Date(data.createdAt).toLocaleDateString()}</span>
-          </div>
-        </div>
-
-        <div style={{ borderTop: '1px solid var(--border)', marginTop: 16, paddingTop: 16 }}>
-          <p className={styles.description} style={{ margin: '0 0 12px' }}>
-            Reset the built-in admin password for your server dashboard (local login at <code>/login?local</code>).
-          </p>
-          <form
-            onSubmit={async (e) => {
-              e.preventDefault();
-              if (serverAdminPw.length < 8) {
-                toast({ title: 'Password must be at least 8 characters', variant: 'error' });
-                return;
-              }
-              try {
-                await resetServerAdmin.mutateAsync(serverAdminPw);
-                toast({ title: 'Server admin password reset successfully', variant: 'success' });
-                setServerAdminPw('');
-              } catch (err) {
-                toast({ title: 'Failed to reset server admin password', description: errorMessage(err), variant: 'error' });
-              }
-            }}
-            style={{ display: 'flex', gap: 8, alignItems: 'flex-end' }}
-          >
-            <div style={{ flex: 1 }}>
-            <FormField label="Server admin password" htmlFor="server-admin-pw">
-              <Input
-                id="server-admin-pw"
-                type="password"
-                value={serverAdminPw}
-                onChange={(e) => setServerAdminPw(e.target.value)}
-                placeholder="Enter new admin password"
-                required
-                minLength={8}
-              />
-            </FormField>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 20 }}>
+        {/* Card 1: Tenant Details */}
+        <div style={{ maxWidth: 520, flex: '1 1 400px' }}>
+        <Card title="Tenant Details">
+          <div className={styles.dividerList}>
+            <div className={styles.kvRow}>
+              <span className={styles.kvLabel}>Name</span>
+              <span className={styles.kvValue}>{data.name}</span>
             </div>
-            <Button type="submit" variant="primary" loading={resetServerAdmin.isPending}>
-              Reset
-            </Button>
-          </form>
-        </div>
-      </Card>
+            <div className={styles.kvRow}>
+              <span className={styles.kvLabel}>Slug</span>
+              <span className={styles.kvValueMono}>{data.slug}</span>
+            </div>
+            <div className={styles.kvRow}>
+              <span className={styles.kvLabel}>Status</span>
+              <Badge label={data.status} color={statusColor(data.status)} />
+            </div>
+            <div className={styles.kvRow}>
+              <span className={styles.kvLabel}>Server Endpoint</span>
+              <span className={styles.kvValueMono}>{data.serverEndpoint ?? '—'}</span>
+            </div>
+            <div className={styles.kvRow}>
+              <span className={styles.kvLabel}>Created</span>
+              <span className={styles.kvValue}>{new Date(data.createdAt).toLocaleDateString()}</span>
+            </div>
+          </div>
 
-      {/* Card 2: Multi-Factor Authentication (MFA + Passkeys combined) */}
-      <Card title="Multi-Factor Authentication">
-        <MfaSection bare />
-        <div style={{ borderTop: '1px solid var(--border)', marginTop: 16, paddingTop: 16 }}>
-          <h3 style={{ margin: '0 0 8px', fontSize: '0.875rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--text-muted)' }}>
-            Passkeys
-          </h3>
-          <PasskeySection bare />
+          <div style={{ borderTop: '1px solid var(--border)', marginTop: 16, paddingTop: 16 }}>
+            <p className={styles.description} style={{ margin: '0 0 12px' }}>
+              Reset the built-in admin password for your server dashboard (local login at <code>/login?local</code>).
+            </p>
+            <form
+              onSubmit={async (e) => {
+                e.preventDefault();
+                if (serverAdminPw.length < 8) {
+                  toast({ title: 'Password must be at least 8 characters', variant: 'error' });
+                  return;
+                }
+                try {
+                  await resetServerAdmin.mutateAsync(serverAdminPw);
+                  toast({ title: 'Server admin password reset successfully', variant: 'success' });
+                  setServerAdminPw('');
+                } catch (err) {
+                  toast({ title: 'Failed to reset server admin password', description: errorMessage(err), variant: 'error' });
+                }
+              }}
+              style={{ display: 'flex', gap: 8, alignItems: 'flex-end' }}
+            >
+              <div style={{ flex: 1 }}>
+              <FormField label="Server admin password" htmlFor="server-admin-pw">
+                <Input
+                  id="server-admin-pw"
+                  type="password"
+                  value={serverAdminPw}
+                  onChange={(e) => setServerAdminPw(e.target.value)}
+                  placeholder="Enter new admin password"
+                  required
+                  minLength={8}
+                />
+              </FormField>
+              </div>
+              <Button type="submit" variant="primary" loading={resetServerAdmin.isPending}>
+                Reset
+              </Button>
+            </form>
+          </div>
+        </Card>
         </div>
-      </Card>
 
-      {/* Card 3: Authentication Policy (org-wide settings) */}
-      <AuthPolicySection />
+        {/* Card 2: Authentication Policy (org-wide settings) */}
+        <div style={{ maxWidth: 520, flex: '1 1 400px' }}>
+          <AuthPolicySection />
+        </div>
+      </div>
+
+      {/* Card 3: Passkeys (full width) */}
+      <PasskeySection />
     </div>
   );
 }