@remit/ui 0.0.122 → 0.0.123

package/src/components/isolated-email-frame.tsx

@@ -1,6 +1,9 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useMatchMedia } from "../lib/use-match-media.js";
-import { buildEmailSrcDoc, type EmailFrameVariant } from "./email-frame-css.js";
+import {
+	type AuthorDeclarations,
+	buildEmailSrcDoc,
+	type EmailFrameVariant,
+} from "./email-frame-css.js";
 
 export interface IsolatedEmailFrameProps {
 	/**
@@ -26,6 +29,13 @@ export interface IsolatedEmailFrameProps {
 	 * or apply the smart-invert.
 	 */
 	isDark?: boolean;
+	/**
+	 * What the mail declares about its own presentation, from the sanitizer. A
+	 * declared background renders as authored; where the mail declares none the
+	 * frame's ground is the reading pane's own colour. A mail that declares no
+	 * padding or margin is given breathing room inside that ground.
+	 */
+	declares?: AuthorDeclarations;
 	className?: string;
 }
 
@@ -34,36 +44,21 @@ export interface IsolatedEmailFrameProps {
 // preferable to letting a hostile sender allocate unbounded layout.
 const MAX_HEIGHT_PX = 50_000;
 
-// Same spirit as MAX_HEIGHT_PX for the horizontal axis. Fixed-width newsletters
-// top out around 900px; well past that a hostile sender is the likely cause.
-const MAX_WIDTH_PX = 10_000;
-
-// Below this we are on a phone: a wide fixed-layout email that cannot reflow is
-// scaled down to fit the container instead of being clipped (#727). Wider
-// viewports keep the content-width pin so multi-column newsletters render at
-// their native width and the pane scrolls horizontally.
-const NARROW_QUERY = "(max-width: 640px)";
-
-// Don't scale below this — a heavily fixed-width newsletter on a tiny phone
-// would otherwise shrink to unreadable. At the floor we accept that the email
-// is downscaled as far as we'll go and the wrapper still clips the remainder
-// (text stays larger and legible, edge content is sacrificed over a 3x shrink).
-const MIN_SCALE = 0.4;
-
 // sandbox flags: scripts blocked (DOMPurify already strips them; defence in
 // depth), forms blocked, top navigation blocked. `allow-popups` +
 // `allow-popups-to-escape-sandbox` lets `target="_blank"` links open in a new
 // tab. `allow-same-origin` is required so the parent can read
-// `contentDocument.body` to size the iframe to its content — safe without
+// `contentDocument.body` to give the frame its content's height — safe without
 // `allow-scripts` since there is no JS in the frame to exploit it.
 const SANDBOX = "allow-same-origin allow-popups allow-popups-to-escape-sandbox";
 
 /**
- * Pin an iframe axis to its content's scroll size: take the larger of the body
- * and documentElement scroll sizes, round UP so a fractional content size never
- * leaves a 1px phantom overflow, and cap at `max` so a hostile sender can't
- * allocate unbounded layout. Returned value is the explicit px the iframe is
- * sized to on that axis.
+ * Pin the frame's height to its content's scroll size: take the larger of the
+ * body and documentElement scroll sizes, round UP so a fractional content size
+ * never leaves a 1px phantom overflow, and cap at `max` so a hostile sender
+ * can't allocate unbounded layout. Returned value is the explicit px the iframe
+ * is sized to. A seamless inline frame has to auto-size vertically; the width is
+ * the pane's and is never read off the mail.
  */
 export const measureContentAxis = (
 	bodyScroll: number,
@@ -71,22 +66,6 @@ export const measureContentAxis = (
 	max: number,
 ): number => Math.min(Math.ceil(Math.max(bodyScroll, rootScroll)), max);
 
-/**
- * The fit-to-width scale for a phone: downscale-only, so content already inside
- * the container renders 1:1 and only genuinely-wider content shrinks. Floored at
- * `MIN_SCALE` so a pathologically wide email doesn't shrink to unreadable. A
- * non-positive or unknown width yields `1` (no scale) so we never divide by zero
- * or upscale before the first measurement lands.
- */
-export const computeFitScale = (
-	contentWidth: number,
-	containerWidth: number,
-): number => {
-	if (contentWidth <= 0 || containerWidth <= 0) return 1;
-	if (contentWidth <= containerWidth) return 1;
-	return Math.max(MIN_SCALE, containerWidth / contentWidth);
-};
-
 /** Named (non-character) keys worth replaying: moving around and closing. */
 const FORWARDED_NAMED_KEYS = new Set([
 	"Enter",
@@ -143,53 +122,37 @@ const forwardKeyDown = (event: KeyboardEvent) => {
 };
 
 /**
- * Render untrusted (sanitized) email HTML in a sandboxed iframe that fits the
- * viewport width on mobile and isolates the email's CSS from the app chrome.
+ * Render untrusted (sanitized) email HTML in a sandboxed iframe that is exactly
+ * as wide as the pane holding it and isolates the email's CSS from the app
+ * chrome.
  *
- * Presentational: HTML + treatment + theme come in via props; the component
- * owns the srcDoc assembly, the content-sizing, and the fit-to-viewport
- * decision in one place. The frame sizes itself to its content via a
- * ResizeObserver so it grows no internal scrollbars — vertical scrolling and
- * (on desktop) horizontal scrolling of genuinely wide email are delegated to
- * the surrounding pane.
+ * Presentational: HTML + treatment + theme come in via props; the component owns
+ * the srcDoc assembly and the height. The width is the app's layout and nothing
+ * else — the frame is never widened to fit the mail, so no measurement of the
+ * email can move a box the reader can see. Content that genuinely cannot wrap (a
+ * fixed-width table, an oversized image, a `pre` the author pinned) scrolls
+ * inside the document, where it lives; the pane and the page never learn about
+ * it.
  *
- * On a phone a fixed-layout email that *can't* reflow (an inline
- * `min-width:600px` on a `<td>` beats the sanitizer's clamp) is rendered at its
- * natural width and the whole iframe is CSS-scaled down to fit the container —
- * the email stays whole and readable instead of being clipped (#727).
+ * Height is the one axis the frame reads off its content: a seamless inline
+ * frame has to grow to the mail it shows or it would scroll internally against
+ * the page's own scrollbar.
  */
 export const IsolatedEmailFrame = ({
 	html,
 	variant = "framed",
 	isDark = false,
+	declares,
 	className,
 }: IsolatedEmailFrameProps) => {
-	const hostRef = useRef<HTMLDivElement>(null);
 	const ref = useRef<HTMLIFrameElement>(null);
 	const [height, setHeight] = useState(0);
-	const [width, setWidth] = useState(0);
-	const [containerWidth, setContainerWidth] = useState(0);
-
-	const isNarrow = useMatchMedia(NARROW_QUERY);
 
 	const srcDoc = useMemo(
-		() => buildEmailSrcDoc(html, variant, isDark),
-		[html, variant, isDark],
+		() => buildEmailSrcDoc(html, variant, isDark, declares),
+		[html, variant, isDark, declares],
 	);
 
-	useEffect(() => {
-		const host = hostRef.current;
-		if (!host) return;
-		const measure = () =>
-			setContainerWidth((prev) =>
-				prev === host.clientWidth ? prev : host.clientWidth,
-			);
-		measure();
-		const observer = new ResizeObserver(measure);
-		observer.observe(host);
-		return () => observer.disconnect();
-	}, []);
-
 	useEffect(() => {
 		const iframe = ref.current;
 		if (!iframe) return;
@@ -198,29 +161,39 @@ export const IsolatedEmailFrame = ({
 			const doc = iframe.contentDocument;
 			if (!doc?.body) return;
 			const root = doc.documentElement;
-			const nextHeight = measureContentAxis(
+			const next = measureContentAxis(
 				doc.body.scrollHeight,
 				root?.scrollHeight ?? 0,
 				MAX_HEIGHT_PX,
 			);
-			setHeight((prev) => (prev === nextHeight ? prev : nextHeight));
-			const nextWidth = measureContentAxis(
-				doc.body.scrollWidth,
-				root?.scrollWidth ?? 0,
-				MAX_WIDTH_PX,
-			);
-			setWidth((prev) => (prev === nextWidth ? prev : nextWidth));
+			setHeight((prev) => (prev === next ? prev : next));
 		};
 
 		let observer: ResizeObserver | undefined;
 		let keyDoc: Document | undefined;
 		const handleLoad = () => {
 			measure();
+			// The srcDoc is rebuilt whenever the mail, theme or treatment changes,
+			// so this fires again for a new document; the observer watching the old
+			// one has to go with it.
+			observer?.disconnect();
+			observer = undefined;
+			keyDoc?.removeEventListener("keydown", forwardKeyDown);
+			keyDoc?.removeEventListener("load", measure, true);
+			keyDoc = undefined;
 			const doc = iframe.contentDocument;
 			if (!doc?.body) return;
 			observer = new ResizeObserver(measure);
 			observer.observe(doc.body);
 			if (doc.documentElement) observer.observe(doc.documentElement);
+			// A ResizeObserver watches the body's BOX, which reflows with the pane
+			// but not with its own content. Content that arrives late — an image, a
+			// webfont that re-flows the text taller — changes the scroll size
+			// underneath a box that never moves, so without these the frame keeps a
+			// height it took before the mail finished laying out and clips the
+			// difference.
+			doc.addEventListener("load", measure, true);
+			doc.fonts?.ready.then(measure);
 			doc.addEventListener("keydown", forwardKeyDown);
 			keyDoc = doc;
 		};
@@ -229,51 +202,23 @@ export const IsolatedEmailFrame = ({
 		return () => {
 			iframe.removeEventListener("load", handleLoad);
 			keyDoc?.removeEventListener("keydown", forwardKeyDown);
+			keyDoc?.removeEventListener("load", measure, true);
 			observer?.disconnect();
 		};
 	}, []);
 
-	// The fit-to-viewport decision, owned in one place:
-	// - Phone (`isNarrow`): render the iframe at its natural content width and
-	//   CSS-scale the whole frame down to the container, so a fixed-width
-	//   newsletter that can't reflow fits the phone whole instead of being
-	//   clipped (#727). Content already within the container renders 1:1.
-	// - Desktop framed: `max(100%, content)` so a narrow-max-width newsletter
-	//   (Substack's 640px body) fills the reading column while a genuinely wide
-	//   fixed-layout email grows past the pane and lets the pane scroll.
-	// - Plain / pre-measurement: pin to measured content width, 100% until known.
-	const scale = isNarrow ? computeFitScale(width, containerWidth) : 1;
-	const scaled = scale < 1;
-
-	const frameWidth = scaled
-		? `${width}px`
-		: isNarrow
-			? "100%"
-			: variant === "framed" && width > 0
-				? `max(100%, ${width}px)`
-				: width === 0
-					? "100%"
-					: `${width}px`;
-
-	const frameHeight = height === 0 ? "1px" : `${height}px`;
-
-	const iframe = (
+	return (
 		<iframe
 			ref={ref}
 			title="Email content"
 			sandbox={SANDBOX}
 			srcDoc={srcDoc}
-			className={scaled ? undefined : className}
-			scrolling="no"
+			className={className}
 			style={{
-				width: frameWidth,
-				maxWidth: scaled ? "none" : undefined,
+				width: "100%",
 				border: "none",
 				display: "block",
-				height: frameHeight,
-				overflow: "hidden",
-				transform: scaled ? `scale(${scale})` : undefined,
-				transformOrigin: scaled ? "top left" : undefined,
+				height: height === 0 ? "1px" : `${height}px`,
 				// Both branches carry their own color-scheme (and, for the framed
 				// dark-invert case, the darkening filter) in the injected base CSS,
 				// so the iframe element stays "normal" rather than pinning a scheme
@@ -282,26 +227,4 @@ export const IsolatedEmailFrame = ({
 			}}
 		/>
 	);
-
-	// When scaled, the iframe's layout box stays its natural (un-transformed)
-	// size, so it must sit in a wrapper sized to the SCALED footprint and clip
-	// the overflow — otherwise the surrounding pane sees the natural width and
-	// grows a scrollbar.
-	return (
-		<div ref={hostRef} className={scaled ? className : undefined}>
-			{scaled ? (
-				<div
-					style={{
-						width: "100%",
-						height: `${Math.ceil(height * scale)}px`,
-						overflow: "hidden",
-					}}
-				>
-					{iframe}
-				</div>
-			) : (
-				iframe
-			)}
-		</div>
-	);
 };

package/src/components/message-body-view.stories.tsx

@@ -1,5 +1,6 @@
 import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
 import { MessageBodyView } from "./message-body-view.js";
+import { ExpandedMessage } from "./reading-pane.js";
 
 /**
  * `MessageBodyView` is the single source of truth for rendering an email body:
@@ -7,7 +8,7 @@ import { MessageBodyView } from "./message-body-view.js";
  * as framed (designed mail) or plain (theme-aware), and hands the result to the
  * sandboxed `IsolatedEmailFrame`. The app's `MessageBody` and the kit reading
  * panes both compose it, so Storybook renders email exactly as the app does
- * (#940) — sandbox, flush layout and #727 scale-to-fit all visible.
+ * (#940) — sandbox, flush layout and in-document overflow all visible.
  *
  * Unlike the `IsolatedEmailFrame` stories, these fixtures pass RAW author HTML:
  * the component runs the real sanitizer, so the layout-clamp `<style>` and the
@@ -43,6 +44,44 @@ const PLAIN = `
 </div>
 `;
 
+// Formatted HTML mail that declares nothing: no background, no padding, no
+// width. The app supplies the ground, so the ground must be the pane's own and
+// the breathing room must sit inside it — one surface with comfortable margins,
+// not a lighter rectangle seamed into the pane.
+const UNSTYLED_HTML = `
+<div>
+	<p>Hoi allemaal,</p>
+	<p>De repetitie van donderdag gaat door. We beginnen met het nieuwe stuk en
+	repeteren om 20.00 uur verder aan het programma voor het najaarsconcert.</p>
+	<p><b>Neem je eigen partituur mee</b> — er zijn geen reservekopieën.</p>
+	<p>Groeten,<br>Ingrid</p>
+</div>
+`;
+
+// The same mail with a nowrap its author never expected a client to honour:
+// flowing text pinned to one line would scroll sideways forever, so the clamp
+// wraps it to the frame instead.
+const UNSTYLED_HTML_NOWRAP = `
+<div style="white-space:nowrap">
+	<p>Hoi allemaal,</p>
+	<p>De repetitie van donderdag gaat door. We beginnen met het nieuwe stuk en repeteren om 20.00 uur verder aan het programma voor het najaarsconcert.</p>
+	<p>Groeten,<br>Ingrid</p>
+</div>
+`;
+
+// A short plain-text message: no HTML part at all. It is not an email document
+// and has no ground of its own, so it keeps the reading pane's gutter rather
+// than running to the pane edge the way a sandboxed frame does.
+const PLAIN_TEXT = `Hoi allemaal,
+
+De repetitie van donderdag gaat door. We beginnen met het nieuwe stuk en
+repeteren om 20.00 uur verder aan het programma voor het najaarsconcert.
+
+Neem je eigen partituur mee - er zijn geen reservekopieen.
+
+Groeten,
+Ingrid`;
+
 // Marketing mail with two remote images — with images blocked the sanitizer
 // swaps them for placeholders and the privacy notice slot reports the count.
 const WITH_REMOTE_IMAGES = `
@@ -54,18 +93,91 @@ const WITH_REMOTE_IMAGES = `
 </div>
 `;
 
+// A short personal note: a few lines of text, nowhere near the width of the
+// reading column. Nothing here can overflow, so the pane must show no
+// horizontal scrollbar at any column width.
+const SHORT_NOTE = `
+<div>
+	<p>Booked. See you at 3.</p>
+</div>
+`;
+
+// Real mail that genuinely does not fit: a report table whose inline min-width
+// beats the sanitizer's clamp (an inline style outranks its `* { min-width: 0 }`),
+// so the table stays 1200px wide however narrow the column is and has to be
+// reachable from inside the frame.
+const WIDE_TABLE = `
+<div style="font-family: Helvetica, Arial, sans-serif; color:#1a1a1a;">
+	<h1 style="font-size:20px;margin:0 0 12px;">Q2 regional breakdown</h1>
+	<table cellpadding="8" cellspacing="0" style="min-width:1200px;border-collapse:collapse;">
+		<tr style="background:#efefef;">
+			<th style="min-width:200px;text-align:left;">Region</th>
+			<th style="min-width:200px;text-align:left;">Pipeline</th>
+			<th style="min-width:200px;text-align:left;">Closed won</th>
+			<th style="min-width:200px;text-align:left;">Closed lost</th>
+			<th style="min-width:200px;text-align:left;">Forecast</th>
+			<th style="min-width:200px;text-align:left;">Owner</th>
+		</tr>
+		<tr>
+			<td>Benelux</td><td>€1.2M</td><td>€480k</td><td>€120k</td><td>€1.6M</td><td>Sanne de Vries</td>
+		</tr>
+		<tr style="background:#f8f8f8;">
+			<td>DACH</td><td>€2.4M</td><td>€910k</td><td>€300k</td><td>€3.1M</td><td>Jonas Brandt</td>
+		</tr>
+		<tr>
+			<td>Nordics</td><td>€780k</td><td>€260k</td><td>€90k</td><td>€1.0M</td><td>Elin Karlsson</td>
+		</tr>
+	</table>
+	<p>Full detail in the attached sheet.</p>
+</div>
+`;
+
 const COLUMN: Decorator = (Story) => (
 	<div style={{ width: 720 }}>
 		<Story />
 	</div>
 );
 
+// A reading column on a fractional boundary — a flex pane at 720.5px, or any
+// browser zoom off 100%. This is where a frame that took its width from its own
+// content used to overflow its pane by a subpixel and grow a full-width scroll
+// track under mail that plainly fits. The outline marks the column edge.
+const FRACTIONAL_COLUMN: Decorator = (Story) => (
+	<div style={{ width: 720.5, outline: "1px dashed rgba(120,120,120,0.6)" }}>
+		<Story />
+	</div>
+);
+
 const PHONE: Decorator = (Story) => (
 	<div style={{ width: 390 }}>
 		<Story />
 	</div>
 );
 
+// The message the pane puts the body under. Only the header reads it — the body
+// is the story.
+const PANE_MESSAGE = {
+	id: "pane-1",
+	fromName: "Ingrid Bakker",
+	fromEmail: "ingrid@example.com",
+	toLabel: "the choir list",
+	dateLabel: "Today, 20:04",
+	snippet: "De repetitie van donderdag gaat door.",
+	bodyHtml: "",
+};
+
+// The reading pane's own arrangement, composed from the component that owns it:
+// the pane's canvas, the message gutter and the sandboxed frame running back out
+// of that gutter. The story states the pane's width and nothing else — the
+// inset, and the cancel that matches it, stay in `ExpandedMessage` where the app
+// reads them from. Any seam between the email's ground and the pane around it
+// shows up here.
+const PANE: Decorator = (Story) => (
+	<div className="w-[720px] bg-canvas">
+		<ExpandedMessage message={PANE_MESSAGE} body={<Story />} />
+	</div>
+);
+
 const meta: Meta<typeof MessageBodyView> = {
 	title: "Components/MessageBodyView",
 	component: MessageBodyView,
@@ -86,7 +198,8 @@ export const Newsletter: Story = {
 	decorators: [COLUMN],
 };
 
-/** The same newsletter on a phone width — #727 scale-to-fit keeps it whole. */
+/** The same newsletter on a phone width — it reflows to the frame, and what
+ *  cannot reflow scrolls inside the frame's own document. */
 export const NewsletterMobile: Story = {
 	args: { html: NODE_WEEKLY, category: "newsletter", allowImages: true },
 	decorators: [PHONE],
@@ -139,6 +252,91 @@ export const ImagesLoaded: Story = {
 	decorators: [COLUMN],
 };
 
+/** A two-line note in a column whose width is not a whole pixel: the body must
+ *  show no horizontal scrollbar, because nothing overflows. */
+export const NarrowBodyNoScrollbar: Story = {
+	args: { html: SHORT_NOTE, category: "personal", allowImages: true },
+	decorators: [FRACTIONAL_COLUMN],
+};
+
+/** The same for a fixed-width newsletter that fills the column exactly — it
+ *  fits, so the pane stays put. */
+export const NewsletterFillsColumnNoScrollbar: Story = {
+	args: { html: NODE_WEEKLY, category: "newsletter", allowImages: true },
+	decorators: [FRACTIONAL_COLUMN],
+};
+
+/** A 1200px table that genuinely cannot fit: it scrolls horizontally inside the
+ *  frame's own document, and neither the pane nor the page moves sideways. */
+export const WideTableScrollsInPlace: Story = {
+	args: { html: WIDE_TABLE, category: "newsletter", allowImages: true },
+	decorators: [COLUMN],
+};
+
+/** The same wide table on a phone: the same in-document scroll, one behaviour
+ *  at every width. */
+export const WideTableMobile: Story = {
+	args: { html: WIDE_TABLE, category: "newsletter", allowImages: true },
+	decorators: [PHONE],
+};
+
+/** Formatted HTML mail that declares no background and no padding. The app
+ *  supplies both: the ground is the pane's own colour, so there is no seam and
+ *  no inner rectangle, and the breathing room sits inside that ground, so the
+ *  text is inset while the surface still reaches both pane edges. */
+export const UnstyledHtmlIsOneSurface: Story = {
+	args: { html: UNSTYLED_HTML, category: "personal", allowImages: true },
+	decorators: [PANE],
+};
+
+/** The same mail on the dark pane: the ground is still the pane's, never a
+ *  lighter slab, and the inset still reads as margin rather than a colour
+ *  change. */
+export const UnstyledHtmlIsOneSurfaceDark: Story = {
+	args: {
+		html: UNSTYLED_HTML,
+		category: "personal",
+		allowImages: true,
+		isDark: true,
+	},
+	parameters: { theme: "dark" },
+	decorators: [PANE],
+};
+
+/** A newsletter that lays out its own container: it keeps its own background
+ *  and its own 24px padding, and is given no second helping. */
+export const SelfStyledNewsletterKeepsItsOwnPadding: Story = {
+	args: { html: NODE_WEEKLY, category: "newsletter", allowImages: true },
+	decorators: [PANE],
+};
+
+/** The same newsletter on the dark pane: its design is its own and is darkened
+ *  as authored, not repainted. */
+export const SelfStyledNewsletterKeepsItsOwnPaddingDark: Story = {
+	args: {
+		html: NODE_WEEKLY,
+		category: "newsletter",
+		allowImages: true,
+		isDark: true,
+	},
+	parameters: { theme: "dark" },
+	decorators: [PANE],
+};
+
+/** A plain-text message. There is no email document to run flush, so it keeps
+ *  the message gutter and stays readable against the pane edge. */
+export const PlainTextKeepsTheGutter: Story = {
+	args: { text: PLAIN_TEXT },
+	decorators: [PANE],
+};
+
+/** Author `nowrap` on flowing text: the clamp wraps it to the frame instead of
+ *  pinning a line the frame can only cut. */
+export const NowrapTextStillWraps: Story = {
+	args: { html: UNSTYLED_HTML_NOWRAP, category: "personal", allowImages: true },
+	decorators: [PANE],
+};
+
 /** No body content: the empty-state fallback. */
 export const Empty: Story = {
 	args: { html: undefined, text: undefined },