npm - @remit/web-client - Versions diffs - 0.0.127 → 0.0.128 - Mend

@remit/web-client 0.0.127 → 0.0.128

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/harness/index.html +1 -1
package/index.html +1 -1
package/package.json +1 -1
package/src/components/compose/InlineCompose.tsx +4 -1
package/src/components/compose/MobileComposeSheet.tsx +1 -1
package/src/components/compose/sanitize-quote-html.ts +25 -1
package/src/components/layout/AppShellSkeleton.tsx +1 -1
package/src/components/layout/Drawer.tsx +1 -1
package/src/components/mail/ConversationView.tsx +66 -37
package/src/components/mail/MoveToTrigger.tsx +1 -1
package/src/components/onboarding/OnboardingWizard.tsx +106 -18
package/src/components/ui/ErrorBannerStack.tsx +1 -1
package/src/hooks/useReturnFromRedirect.ts +41 -0
package/src/routes/settings/accounts.tsx +30 -1

package/harness/index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <title>Remit</title>
     <!--
       Installability. This is the template the shipped image builds from; the

package/index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <title>Remit</title>
     <!--
       Installability. Keep in sync with harness/index.html, which is the

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.127",
+  "version": "0.0.128",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/compose/InlineCompose.tsx CHANGED Viewed

@@ -18,7 +18,10 @@ export const InlineCompose = ({
 	sourceMessage,
 	onClose,
 }: InlineComposeProps) => (
-	<div className="border-t border-line bg-canvas max-h-[400px] flex flex-col">
+	// Capped against the viewport as well as in pixels: on a short one — a phone
+	// in landscape, or one with the keyboard up — a flat 400px is taller than
+	// the pane, and the surface's own header scrolls off before its verbs do.
+	<div className="border-t border-line bg-canvas max-h-[min(400px,60dvh)] flex flex-col">
 		<ComposeForm
 			mode={mode}
 			account={account}

package/src/components/compose/MobileComposeSheet.tsx CHANGED Viewed

@@ -87,7 +87,7 @@ export const MobileComposeSheet = () => {
 			<Drawer.Portal>
 				<Drawer.Overlay className="fixed inset-0 z-40 bg-black/40" />
 				<Drawer.Content
-					className="fixed inset-x-0 bottom-0 z-50 flex flex-col bg-canvas rounded-t-lg"
+					className="fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-lg bg-canvas pb-[env(safe-area-inset-bottom,0px)]"
 					style={{ height: "95dvh" }}
 				>
 					<Drawer.Handle className="mx-auto mt-2 mb-1 h-1.5 w-12 rounded-full bg-fg-muted/30" />

package/src/components/compose/sanitize-quote-html.ts CHANGED Viewed

@@ -16,8 +16,32 @@ const QUOTE_ALLOWED_TAGS = [
 const QUOTE_ALLOWED_ATTR = ["href"];
+/**
+ * Quoted mail renders in the app's own document rather than in the reading
+ * pane's sandboxed frame, so a link in it would otherwise navigate the app
+ * window itself to wherever the sender points. Launched from a home screen
+ * there is no address bar and no back button to return from that, so quoted
+ * links leave for a separate context and take no handle on this one with them.
+ *
+ * Its own DOMPurify instance: the hook below must not reach the default
+ * instance any other caller might use.
+ */
+let purifier: ReturnType<typeof DOMPurify> | null = null;
+const quotePurifier = (): ReturnType<typeof DOMPurify> => {
+	if (purifier) return purifier;
+	const instance = DOMPurify();
+	instance.addHook("afterSanitizeAttributes", (node) => {
+		if (node.tagName !== "A") return;
+		node.setAttribute("target", "_blank");
+		node.setAttribute("rel", "noopener noreferrer nofollow");
+	});
+	purifier = instance;
+	return instance;
+};
 export const sanitizeQuoteHtml = (html: string): string =>
-	DOMPurify.sanitize(html, {
+	quotePurifier().sanitize(html, {
 		ALLOWED_TAGS: QUOTE_ALLOWED_TAGS,
 		ALLOWED_ATTR: QUOTE_ALLOWED_ATTR,
 	});

package/src/components/layout/AppShellSkeleton.tsx CHANGED Viewed

@@ -46,7 +46,7 @@ const ListRowsSkeleton = () => (
 );
 export const AppShellSkeleton = () => (
-	<div className="flex h-dvh animate-pulse bg-canvas" aria-hidden="true">
+	<div className="flex h-full animate-pulse bg-canvas" aria-hidden="true">
 		<NavRailSkeleton />
 		<ListRowsSkeleton />
 	</div>

package/src/components/layout/Drawer.tsx CHANGED Viewed

@@ -83,7 +83,7 @@ export const Drawer = ({
 			<div
 				ref={drawerRef}
 				className={cn(
-					"absolute top-0 bottom-0 bg-canvas border-line shadow-xl flex flex-col",
+					"safe-area-frame absolute top-0 bottom-0 bg-canvas border-line shadow-xl flex flex-col",
 					widthClassName,
 					sideClasses,
 				)}

package/src/components/mail/ConversationView.tsx CHANGED Viewed

@@ -57,8 +57,9 @@ interface ConversationViewProps {
 	composeRequest?: ComposeMode | null;
 	/**
 	 * Called once the conversation has acted on `composeRequest` (or
-	 * whenever the inline compose is dismissed). The caller should reset
-	 * `composeRequest` to `null`.
+	 * whenever the inline compose is dismissed). The caller must reset
+	 * `composeRequest` to `null`: a request left standing is read as a fresh
+	 * one on every render.
 	 */
 	onComposeClose?: () => void;
 	/**
@@ -251,7 +252,6 @@ export const ConversationView = ({
 		staleTime: Infinity,
 	});
 	const activeAccount = config?.accounts?.[0];
-	const smtpConfigured = !!activeAccount?.smtpHost;
 	// Mark messages as read immediately when expanded.
 	useMarkAsRead({
@@ -278,14 +278,23 @@ export const ConversationView = ({
 	// locally via r/a/f keyboard shortcuts.
 	const [composeMode, setComposeMode] = useState<ComposeMode | null>(null);
+	// Counts openings rather than tracking the mode: replying from a second
+	// message while compose is already open is the same request again, and the
+	// reader still has to be taken to it.
+	const [composeOpenings, setComposeOpenings] = useState(0);
+	const openCompose = useCallback((mode: ComposeMode) => {
+		setComposeMode(mode);
+		setComposeOpenings((count) => count + 1);
+	}, []);
 	// When the toolbar passes a composeRequest, open the inline compose.
 	useEffect(() => {
 		if (composeRequest && composeRequest !== "new") {
-			setComposeMode(composeRequest);
+			openCompose(composeRequest);
 			// Notify the parent that the request has been consumed.
 			onComposeClose?.();
 		}
-	}, [composeRequest, onComposeClose]);
+	}, [composeRequest, onComposeClose, openCompose]);
 	// Reply and forward act on the latest turn of the conversation, which is the
 	// last message now that the thread reads oldest first.
@@ -296,23 +305,44 @@ export const ConversationView = ({
 		enabled: !!latestMessage && composeMode !== null,
 	});
-	const handleReply = useCallback(() => {
-		setComposeMode("reply");
-	}, []);
+	const handleReply = useCallback(() => openCompose("reply"), [openCompose]);
-	const handleReplyAll = useCallback(() => {
-		setComposeMode("reply_all");
-	}, []);
+	const handleReplyAll = useCallback(
+		() => openCompose("reply_all"),
+		[openCompose],
+	);
-	const handleForward = useCallback(() => {
-		setComposeMode("forward");
-	}, []);
+	const handleForward = useCallback(
+		() => openCompose("forward"),
+		[openCompose],
+	);
 	const handleCloseCompose = useCallback(() => {
 		setComposeMode(null);
 		onComposeClose?.();
 	}, [onComposeClose]);
+	// Single-pane compose opens below the message, which on a long one is several
+	// screens down: without this, replying to it looks like nothing happening.
+	//
+	// Aligned on its bottom edge, where the send and discard verbs are, and held
+	// there while it changes height. It mounts before the message it quotes has
+	// been fetched and grows when that lands, so a single scroll at open time
+	// puts whatever it grows past back below the fold.
+	const composeRef = useRef<HTMLDivElement>(null);
+	useEffect(() => {
+		if (composeMode === null || composeOpenings === 0) return;
+		const surface = composeRef.current;
+		if (!surface) return;
+		const reveal = () =>
+			surface.scrollIntoView({ behavior: "smooth", block: "end" });
+		reveal();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(reveal);
+		observer.observe(surface);
+		return () => observer.disconnect();
+	}, [composeOpenings, composeMode]);
 	// Register keyboard shortcuts
 	useKeyboardNavigation({
 		enabled: !isLoading && messages.length > 0 && composeMode === null,
@@ -323,18 +353,14 @@ export const ConversationView = ({
 			{ key: "ArrowUp", handler: focusPrevious, preventDefault: true },
 			{ key: "Enter", handler: toggleFocusedMessage, preventDefault: true },
 			{ key: "o", handler: toggleFocusedMessage, preventDefault: true },
-			...(smtpConfigured
-				? [
-						{ key: "r", handler: handleReply, preventDefault: true },
-						{
-							key: "R",
-							handler: handleReplyAll,
-							noModifiers: false,
-							preventDefault: true,
-						},
-						{ key: "f", handler: handleForward, preventDefault: true },
-					]
-				: []),
+			{ key: "r", handler: handleReply, preventDefault: true },
+			{
+				key: "R",
+				handler: handleReplyAll,
+				noModifiers: false,
+				preventDefault: true,
+			},
+			{ key: "f", handler: handleForward, preventDefault: true },
 		],
 	});
@@ -367,8 +393,9 @@ export const ConversationView = ({
 	// Message list wrapper — no extra x-padding; each MessageCard handles
 	// its own px-5 inset (matches the AppShell ReadingPane geometry). On mobile
-	// each expanded card owns a per-message action bar; reply verbs are wired
-	// only when SMTP is configured (otherwise the buttons no-op).
+	// each expanded card owns a per-message action bar. Its reply verbs are
+	// wired whatever the account's SMTP state: compose is where an account that
+	// cannot send says so.
 	const renderMessages = (mobile: boolean) => (
 		<div>
 			{messages.map((message, index) => (
@@ -389,9 +416,9 @@ export const ConversationView = ({
 						}
 						accountId={mailboxAccountId}
 						mobile={mobile}
-						onReply={mobile && smtpConfigured ? handleReply : undefined}
-						onReplyAll={mobile && smtpConfigured ? handleReplyAll : undefined}
-						onForward={mobile && smtpConfigured ? handleForward : undefined}
+						onReply={mobile ? handleReply : undefined}
+						onReplyAll={mobile ? handleReplyAll : undefined}
+						onForward={mobile ? handleForward : undefined}
 					/>
 				</div>
 			))}
@@ -434,12 +461,14 @@ export const ConversationView = ({
 				)}
 				{renderMessages(true)}
 				{composeMode !== null && (
-					<InlineCompose
-						mode={composeMode}
-						account={activeAccount}
-						sourceMessage={latestMessageData}
-						onClose={handleCloseCompose}
-					/>
+					<div ref={composeRef}>
+						<InlineCompose
+							mode={composeMode}
+							account={activeAccount}
+							sourceMessage={latestMessageData}
+							onClose={handleCloseCompose}
+						/>
+					</div>
 				)}
 			</MobileReadingPane>
 		);

package/src/components/mail/MoveToTrigger.tsx CHANGED Viewed

@@ -225,7 +225,7 @@ export const MoveToTrigger = ({
 					<Drawer.Portal>
 						<Drawer.Overlay className="fixed inset-0 z-40 bg-black/40" />
 						<Drawer.Content
-							className="fixed inset-x-0 bottom-0 z-50 flex flex-col bg-canvas rounded-t-lg"
+							className="fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-lg bg-canvas pb-[env(safe-area-inset-bottom,0px)]"
 							style={{ maxHeight: "85dvh" }}
 							id={popoverId}
 						>

package/src/components/onboarding/OnboardingWizard.tsx CHANGED Viewed

@@ -43,6 +43,7 @@ import {
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { AtSign, Inbox, Loader2, Mail, Server } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useReturnFromRedirect } from "../../hooks/useReturnFromRedirect.js";
 // useRef is kept for the hasCreatedRef guard — not for DOM refs
 import {
 	type DiscoveryResult,
@@ -274,44 +275,125 @@ function StepConnector({
 function StepMicrosoftEmail({
 	onBack,
-	onRedirecting,
+	onConnected,
 }: {
 	onBack: () => void;
-	onRedirecting: () => void;
+	onConnected: (accountId: string) => void;
 }) {
 	const [email, setEmail] = useState("");
 	const [error, setError] = useState<string | null>(null);
+	const [awaitingReturn, setAwaitingReturn] = useState(false);
+	const [preparing, setPreparing] = useState(false);
+	// The account read is in flight across a step the user can leave — Escape and
+	// Back both unmount it — and it ends in a redirect that would take the whole
+	// window with it.
+	const stepIsMounted = useRef(true);
+	useEffect(() => {
+		stepIsMounted.current = true;
+		return () => {
+			stepIsMounted.current = false;
+		};
+	}, []);
+	// The accounts this instance held when the redirect started. What comes back
+	// is recognised as new against it, so it has to be a real list — against an
+	// empty stand-in every account already here reads as the one just connected.
+	const accountIdsBeforeRedirect = useRef<ReadonlySet<string>>(new Set());
+	const { refetch: refetchConfig } = useQuery(
+		configOperationsGetConfigOptions(),
+	);
 	const startMutation = useMutation({
 		...microsoftOAuthOperationsMicrosoftOAuthStartMutation(),
 		onSuccess: (data) => {
-			onRedirecting();
+			// A step the user left while this was in flight does not get to take the
+			// window with it. `assign` is not synchronous either — the page is still
+			// here while the browser fetches Microsoft's — so the control stays busy
+			// until the window is actually looked at again.
+			if (!stepIsMounted.current) return;
+			setAwaitingReturn(true);
 			window.location.assign(data.authorizationUrl);
 		},
 		onError: (err) => {
+			setPreparing(false);
 			setError(err instanceof Error ? err.message : "Failed to start sign-in");
 		},
 	});
+	// Microsoft's answer comes back to whichever window the platform picks, and
+	// on iOS that is often the browser rather than the app launched from the
+	// home screen. So this window decides on the account list rather than on
+	// having been the one that got the redirect: an account that was not there
+	// before carries the wizard forward.
+	//
+	// Every look at this window is a chance to find that account, not a verdict
+	// on the sign-in — a user who switches back mid-flow to read a password has
+	// not failed anything, so nothing here concludes and the check stays armed
+	// until an account appears or the user leaves the step.
+	useReturnFromRedirect(
+		awaitingReturn,
+		useCallback(() => {
+			// Being looked at again is the proof the redirect is over, however it
+			// ended: the window that was leaving is back, so the button is too.
+			setPreparing(false);
+			void refetchConfig().then(({ data, isError }) => {
+				if (!stepIsMounted.current) return;
+				if (isError || !data) {
+					setError(
+						"Couldn't check whether the sign-in finished. Open Settings › Accounts to see whether the account is connected.",
+					);
+					return;
+				}
+				setError(null);
+				const connected = data.accounts.find(
+					(account) => !accountIdsBeforeRedirect.current.has(account.accountId),
+				);
+				if (connected) onConnected(connected.accountId);
+			});
+		}, [refetchConfig, onConnected]),
+	);
+	// The account list is read first and the redirect goes from what it says, so
+	// the window that comes back has something to recognise a new account
+	// against. A list that cannot be read stops the flow here, where it can be
+	// retried, rather than at the return leg where nothing can be concluded.
+	const redirecting = preparing || startMutation.isPending;
 	const handleSubmit = () => {
+		if (redirecting) return;
 		setError(null);
-		startMutation.mutate({
-			body: { email: email.trim() || undefined },
+		setPreparing(true);
+		void refetchConfig().then(({ data, isError }) => {
+			if (!stepIsMounted.current) return;
+			if (isError || !data) {
+				setPreparing(false);
+				setError(
+					"Couldn't read this instance's accounts, so sign-in can't be tracked. Check your connection and try again.",
+				);
+				return;
+			}
+			accountIdsBeforeRedirect.current = new Set(
+				data.accounts.map((account) => account.accountId),
+			);
+			startMutation.mutate({
+				body: { email: email.trim() || undefined },
+			});
 		});
 	};
-	// Keyboard: Enter submits, Esc goes back
-	// biome-ignore lint/correctness/useExhaustiveDependencies: handleSubmit's identity changes every render; including it would re-run this keydown listener on every render. Omitted to preserve existing behavior (matches the pre-existing eslint-disable). Enter-submit uses a stale handleSubmit — latent, tracked separately.
+	// Keyboard: Enter submits, Esc goes back. The listener reads the submit
+	// through a ref rather than closing over it, so Enter sends the address the
+	// field holds now instead of whatever it held when the listener went on.
+	const submitRef = useRef(handleSubmit);
+	submitRef.current = handleSubmit;
 	useEffect(() => {
 		const handler = (e: KeyboardEvent) => {
-			if (e.key === "Enter" && !startMutation.isPending) handleSubmit();
+			if (e.key === "Enter") submitRef.current();
 			if (e.key === "Escape") onBack();
 		};
 		window.addEventListener("keydown", handler);
 		return () => window.removeEventListener("keydown", handler);
-		// handleSubmit identity changes — intentional dep exclusion here
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [onBack, startMutation.isPending]);
+	}, [onBack]);
 	return (
 		<WizardShell
@@ -327,16 +409,18 @@ function StepMicrosoftEmail({
 					<Button
 						variant="primary"
 						onClick={handleSubmit}
-						disabled={startMutation.isPending}
+						disabled={redirecting}
 						icon={
-							startMutation.isPending ? (
+							redirecting ? (
 								<Loader2 className="size-4 animate-spin" />
 							) : undefined
 						}
 					>
-						{startMutation.isPending
+						{redirecting
 							? "Redirecting…"
-							: "Sign in with Microsoft"}
+							: awaitingReturn
+								? "Start over"
+								: "Sign in with Microsoft"}
 					</Button>
 				</>
 			}
@@ -360,6 +444,12 @@ function StepMicrosoftEmail({
 						Microsoft page.
 					</p>
 				</div>
+				{awaitingReturn && (
+					<Banner tone="info">
+						Waiting for Microsoft. Finish signing in — this window carries on
+						the moment the account is connected, wherever you finished.
+					</Banner>
+				)}
 				{error && <Banner tone="danger">{error}</Banner>}
 			</div>
 		</WizardShell>
@@ -1520,9 +1610,7 @@ export function OnboardingWizard({
 			return (
 				<StepMicrosoftEmail
 					onBack={() => setStep("connector")}
-					onRedirecting={() => {
-						// Full-page redirect is happening — nothing else to do
-					}}
+					onConnected={handleGoToInbox}
 				/>
 			);

package/src/components/ui/ErrorBannerStack.tsx CHANGED Viewed

@@ -15,7 +15,7 @@ export const ErrorBannerStack = ({
 	return (
 		<section
 			aria-label="Notifications"
-			className="pointer-events-none fixed inset-x-0 top-0 z-[60] flex flex-col items-center gap-2 px-4 pt-4 sm:items-end sm:pr-6"
+			className="pointer-events-none fixed inset-x-0 top-0 z-[60] flex flex-col items-center gap-2 px-4 pt-[calc(1rem+env(safe-area-inset-top,0px))] sm:items-end sm:pr-6"
 		>
 			<div className="flex w-full max-w-md flex-col gap-2">
 				{errors.map((entry) => (

package/src/hooks/useReturnFromRedirect.ts ADDED Viewed

@@ -0,0 +1,41 @@
+import { useEffect, useRef } from "react";
+/**
+ * Run `onReturn` every time the app is looked at again while it has a window
+ * out at an external identity provider.
+ *
+ * Microsoft sign-in is the one flow that leaves this origin, and where it comes
+ * back to is not ours to decide: launched from a home screen on iOS the return
+ * leg can land in the browser instead of the app window, which then holds a
+ * view of a sign-in that finished somewhere else. The window being looked at is
+ * the one that has to reconcile, so it asks the server what happened rather
+ * than trusting what it last saw.
+ *
+ * Every look, not just the first: a user who switches back mid-sign-in to read
+ * a password has not finished anything, and a check that spent itself on that
+ * look would miss the return that matters.
+ *
+ * `pageshow` covers the back-forward cache, where a restored page fires no
+ * visibility change.
+ */
+export const useReturnFromRedirect = (
+	active: boolean,
+	onReturn: () => void,
+): void => {
+	const latest = useRef(onReturn);
+	latest.current = onReturn;
+	useEffect(() => {
+		if (!active) return;
+		const handle = () => {
+			if (document.visibilityState !== "visible") return;
+			latest.current();
+		};
+		document.addEventListener("visibilitychange", handle);
+		window.addEventListener("pageshow", handle);
+		return () => {
+			document.removeEventListener("visibilitychange", handle);
+			window.removeEventListener("pageshow", handle);
+		};
+	}, [active]);
+};

package/src/routes/settings/accounts.tsx CHANGED Viewed

@@ -24,6 +24,7 @@ import { OnboardingWizard } from "@/components/onboarding/OnboardingWizard";
 import { AccountFormPanel } from "@/components/settings/AccountFormPanel";
 import { DangerZone } from "@/components/settings/DangerZone";
 import { ErrorState } from "@/components/ui/ErrorState";
+import { useReturnFromRedirect } from "@/hooks/useReturnFromRedirect";
 import { formatRelativeTime } from "@/lib/format";
 import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
@@ -253,6 +254,7 @@ function AccountsSettings() {
 	useEffect(() => {
 		if (!search.oauthError) return;
 		setOauthErrorMessage(mapOauthError(search.oauthError));
+		setReconnectingAccountId(null);
 		navigate({
 			search: {
 				oauthError: undefined,
@@ -264,6 +266,31 @@ function AccountsSettings() {
 		});
 	}, [search.oauthError, navigate]);
+	// Microsoft may hand the finished sign-in back to a different window than the
+	// one that started it, so a reconnect can complete without this page ever
+	// seeing the callback. Once one has been sent off, every look at this window
+	// re-reads the accounts, and the card states what the server says rather
+	// than what this window last saw.
+	useReturnFromRedirect(reconnectingAccountId !== null, () => {
+		queryClient.invalidateQueries({
+			queryKey: configOperationsGetConfigQueryKey(),
+		});
+	});
+	// The account no longer asking to be re-authenticated is the reconnect
+	// landing, wherever it was finished, and that is what the watch above was
+	// waiting for. A muted or otherwise unhealthy account still counts: the
+	// reconnect answered, whatever else is true of the account.
+	// An account that has left the config entirely ends it too: there is nothing
+	// left to reconnect and nothing left to watch for.
+	useEffect(() => {
+		if (!reconnectingAccountId || !config) return;
+		const account = config.accounts.find(
+			(candidate) => candidate.accountId === reconnectingAccountId,
+		);
+		if (!account || !needsReauth(account)) setReconnectingAccountId(null);
+	}, [config, reconnectingAccountId]);
 	const reconnectMutation = useMutation({
 		...microsoftOAuthOperationsMicrosoftOAuthStartMutation(),
 		onSuccess: (data) => {
@@ -447,7 +474,9 @@ function AccountsSettings() {
 				</div>
 			)}
-			{/* Add account wizard — steps 2–7 in a full-screen overlay */}
+			{/* Add account wizard — steps 2–7 in a full-screen overlay. No safe-area
+			    frame: the wizard shell inside owns the device insets, because
+			    /onboarding mounts it with nothing around it. */}
 			{showAddWizard && (
 				<div className="fixed inset-0 z-40 overflow-auto bg-canvas">
 					<OnboardingWizard