fix(web): full-screen HTML pages fit their content and zoom by reflowing

apps/web/src/components/chat/HtmlRenderDialog.browser.test.tsx

@@ -0,0 +1,74 @@
+import { HTML_RENDER_DEFAULT_FONTS, htmlRenderTheme } from "@t3tools/shared/htmlRender";
+import { T3_CODE_DARK_THEME_COLORS } from "@t3tools/shared/themePalettes";
+import { expect, it, vi } from "vite-plus/test";
+import { page, userEvent } from "vite-plus/test/browser";
+
+import "~/index.css";
+import { act, render } from "../../../test/render";
+
+vi.mock(import("~/hooks/useHtmlRenderTheme"), async (original) => ({
+  ...(await original()),
+  useHtmlRenderTheme: () =>
+    htmlRenderTheme(T3_CODE_DARK_THEME_COLORS, "dark", HTML_RENDER_DEFAULT_FONTS),
+}));
+
+import { HtmlRenderDialog } from "./HtmlRenderDialog";
+
+const dialog = (
+  <HtmlRenderDialog
+    src="https://environment.test/page.html"
+    htmlRender={{ attachmentId: "html", title: "Diagram", height: 400 }}
+    onClose={() => {}}
+  />
+);
+
+function frameAndCard() {
+  const frame = document.querySelector<HTMLIFrameElement>('[role="dialog"] iframe')!;
+  let card = frame.parentElement!;
+  while (getComputedStyle(card).overflowY !== "auto") card = card.parentElement!;
+  return { frame, card };
+}
+
+async function reportHeight(frame: HTMLIFrameElement, height: number) {
+  await act(() => {
+    window.dispatchEvent(
+      new MessageEvent("message", {
+        source: frame.contentWindow,
+        data: { jsonrpc: "2.0", method: "ui/notifications/size-changed", params: { height } },
+      }),
+    );
+  });
+}
+
+it("fits the frame to the page's height and scrolls only the card", async () => {
+  await page.viewport(1280, 800);
+  await using _screen = await render(dialog);
+  const { frame, card } = frameAndCard();
+  await reportHeight(frame, 300);
+  expect(frame.getBoundingClientRect().height).toBe(300);
+  expect(card.scrollHeight).toBe(card.clientHeight);
+  await reportHeight(frame, 5000);
+  expect(frame.getBoundingClientRect().height).toBe(5000);
+  expect(card.clientHeight).toBeLessThan(800);
+  expect(card.scrollHeight).toBeGreaterThan(card.clientHeight);
+});
+
+it("zooms by reflowing the page to the card's width instead of overflowing it", async () => {
+  await page.viewport(1280, 800);
+  await using _screen = await render(dialog);
+  const { frame, card } = frameAndCard();
+  await reportHeight(frame, 300);
+  const contentWidth = frame.getBoundingClientRect().width;
+  for (let step = 0; step < 4; step += 1) {
+    await userEvent.click(page.getByRole("button", { name: "Zoom in" }));
+  }
+  expect(frame.getBoundingClientRect().width).toBeCloseTo(contentWidth, 0);
+  expect(frame.getBoundingClientRect().height).toBe(600);
+  expect(card.scrollWidth).toBe(card.clientWidth);
+  await userEvent.click(page.getByRole("button", { name: "Reset zoom" }));
+  for (let step = 0; step < 2; step += 1) {
+    await userEvent.click(page.getByRole("button", { name: "Zoom out" }));
+  }
+  expect(frame.getBoundingClientRect().width).toBeCloseTo(contentWidth, 0);
+  expect(frame.getBoundingClientRect().height).toBe(150);
+});

apps/web/src/components/chat/HtmlRenderDialog.tsx

@@ -1,19 +1,40 @@
 import type { ScopedThreadRef } from "@t3tools/contracts";
+import {
+  HTML_RENDER_COLUMN_WIDTH,
+  htmlRenderFrameHeight,
+  type HtmlRenderReference,
+} from "@t3tools/shared/htmlRender";
 import { MinusIcon, PlusIcon, XIcon } from "lucide-react";
 import { useRef, useState } from "react";
 
+import { observeResize } from "~/lib/observeResize";
+
 import { HtmlRenderDocument } from "../files/BrowserDocumentFrame";
 import { Button } from "../ui/button";
 import { Dialog, DialogPopup, DialogTitle } from "../ui/dialog";
 
 export function HtmlRenderDialog(props: {
   readonly src: string;
-  readonly title: string;
+  readonly htmlRender: HtmlRenderReference;
   readonly threadRef?: ScopedThreadRef | undefined;
   readonly onClose: () => void;
 }) {
+  const { title } = props.htmlRender;
   const [zoom, setZoom] = useState(1);
   const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const [width, setWidth] = useState(HTML_RENDER_COLUMN_WIDTH);
+  // A callback ref, since the popup can mount after this component's first commit.
+  const measureBox = (box: HTMLDivElement) => {
+    setWidth(box.clientWidth);
+    return observeResize(box, ([entry]) => {
+      // Rounded like clientWidth, so the two writes agree at fractional widths.
+      if (entry) setWidth(Math.round(entry.contentRect.width));
+    });
+  };
+  const [contentHeight, setContentHeight] = useState<number>();
+  // Zoom divides the page's layout width, so the page reflows to fill the card
+  // at every level, and the frame is as tall as the page so only the card scrolls.
+  const height = htmlRenderFrameHeight(props.htmlRender, width / zoom, contentHeight);
   return (
     <Dialog open onOpenChange={(open) => !open && props.onClose()}>
       <DialogPopup
@@ -23,8 +44,9 @@ export function HtmlRenderDialog(props: {
         className="row-start-1"
         initialFocus={closeButtonRef}
       >
-        <DialogTitle className="sr-only">Expanded {props.title} preview</DialogTitle>
-        <div className="relative w-[92vw]">
+        <DialogTitle className="sr-only">Expanded {title} preview</DialogTitle>
+        {/* 1144px is the widest the server measures a page; pages are written for the reply column and stretch badly beyond it. */}
+        <div className="relative w-[min(92vw,1176px)]">
           <Button
             ref={closeButtonRef}
             aria-label="Close"
@@ -35,18 +57,21 @@ export function HtmlRenderDialog(props: {
           >
             <XIcon />
           </Button>
-          <div className="h-[min(86vh,calc(100vh-160px))] overflow-auto overscroll-contain rounded-lg bg-background p-4 shadow-2xl ring-1 ring-border/70 [container-type:size]">
-            <div className="h-[100cqh] w-[100cqw]" style={{ zoom }}>
-              <HtmlRenderDocument
-                src={props.src}
-                title={props.title}
-                threadRef={props.threadRef}
-                className="block size-full"
-              />
+          <div className="max-h-[min(86vh,calc(100vh-160px))] overflow-y-auto overscroll-contain rounded-lg bg-background p-4 shadow-2xl ring-1 ring-border/70">
+            <div ref={measureBox}>
+              <div style={{ zoom, height }}>
+                <HtmlRenderDocument
+                  src={props.src}
+                  title={title}
+                  threadRef={props.threadRef}
+                  className="block size-full"
+                  onContentHeight={setContentHeight}
+                />
+              </div>
             </div>
           </div>
           <div className="mt-2 flex min-w-0 items-center justify-center gap-3 text-xs text-white/80">
-            <span className="truncate">{props.title}</span>
+            <span className="truncate">{title}</span>
             <div className="flex shrink-0 items-center gap-1">
               <Button
                 aria-label="Zoom out"

apps/web/src/components/chat/HtmlRenderFrame.tsx

@@ -110,7 +110,7 @@ export function HtmlRenderFrame(props: {
           {expandedSrc !== null ? (
             <HtmlRenderDialog
               src={expandedSrc}
-              title={title}
+              htmlRender={props.htmlRender}
               threadRef={props.threadRef}
               onClose={() => setExpandedSrc(null)}
             />