Fit the picker to the docs iframe

The chart drew into a fixed 1180-wide viewBox, so in the ~760px docs
iframe its labels shrank to about 6px. It now measures its container and
draws at real pixels. Below lg the sentence uses 26px type and tighter
padding, and the hover card is clamped inside the chart.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app/page.tsx

@@ -41,13 +41,13 @@ export default function CalculatorPage() {
     : [];
 
   return (
-    <main className="mx-auto w-full max-w-[1280px] px-10 pb-24 pt-20">
-      <div className="flex flex-wrap items-center gap-2.5">
-        <span className="text-[40px] font-medium leading-[44px] tracking-[-0.04em] text-stone">
+    <main className="mx-auto w-full max-w-[1280px] px-4 pb-6 pt-5 lg:px-10 lg:pb-24 lg:pt-20">
+      <div className="flex flex-wrap items-center gap-x-2 gap-y-1.5 lg:gap-2.5">
+        <span className="text-[26px] font-medium leading-[30px] lg:text-[40px] lg:leading-[44px] tracking-[-0.04em] text-stone">
           I want to run
         </span>
         <ModelInput onResolve={setModel} />
-        <span className="text-[40px] font-medium leading-[44px] tracking-[-0.04em] text-stone">
+        <span className="text-[26px] font-medium leading-[30px] lg:text-[40px] lg:leading-[44px] tracking-[-0.04em] text-stone">
           on
         </span>
         <SentenceCombobox
@@ -58,7 +58,7 @@ export default function CalculatorPage() {
           options={GPUS.map((g) => ({ id: g.id, label: g.label }))}
           onChange={setGpuId}
         />
-        <span className="text-[40px] font-medium leading-[44px] tracking-[-0.04em] text-stone">
+        <span className="text-[26px] font-medium leading-[30px] lg:text-[40px] lg:leading-[44px] tracking-[-0.04em] text-stone">
           quantized
         </span>
         <SentenceSelect
@@ -69,7 +69,7 @@ export default function CalculatorPage() {
         />
       </div>
 
-      <div className="pt-11">
+      <div className="pt-7 lg:pt-11">
         <MemoryBar
           model={model}
           gpu={gpu}

components/MemoryBar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 
 import {
   Model,
@@ -12,11 +12,28 @@ import {
   weightsGB,
 } from "@/lib/data";
 
-const W = 1180;
+/** Width before the container has been measured. */
+const DEFAULT_W = 1180;
 const BAR_H = 55;
 const R = 5.5;
 /** Pointer band around each tick, in viewBox units. */
 const HIT_W = 44;
+/** MethodReceipt's fixed width. */
+const CARD_W = 466;
+
+/**
+ * Where the hover card's left edge goes, in px from the chart's left edge, so
+ * that it reads as hanging from the tick at `anchorX` without running off a
+ * chart `width` px wide. The chart is as narrow as the docs iframe (~730px),
+ * so a card can fail to fit on either side of a tick in the middle.
+ */
+function cardLeft(anchorX: number, width: number, cardW: number): number {
+  // Hang from the tick: rightward if the card fits, else leftward.
+  const hung = anchorX + cardW <= width ? anchorX : anchorX - cardW;
+  // Neither side fits, so slide it into frame. When the chart is narrower than
+  // the card, the left edge wins: overflow to the right can still be scrolled.
+  return Math.max(0, Math.min(hung, width - cardW));
+}
 
 interface Props {
   /** null until a model resolves — the bar renders empty, but to scale */
@@ -46,16 +63,42 @@ function niceCeil(v: number): number {
   return Math.ceil(v / step) * step;
 }
 
+/**
+ * The chart draws in real pixels: the viewBox is as wide as the box it sits
+ * in. A fixed viewBox would scale the 11px captions down with the page, and in
+ * the docs iframe they shrink to about 6px.
+ */
+function useWidth() {
+  const ref = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(DEFAULT_W);
+  // Layout effect, so the first paint is already at the measured width.
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    setWidth(Math.max(1, Math.round(el.clientWidth)));
+    const ro = new ResizeObserver(([entry]) => {
+      setWidth(Math.max(1, Math.round(entry.contentRect.width)));
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  return [ref, width] as const;
+}
+
 export default function MemoryBar(props: Props) {
-  if (!props.model) return <EmptyBar />;
-  return <FilledBar {...props} model={props.model} />;
+  const [ref, W] = useWidth();
+  return (
+    <div ref={ref}>
+      {props.model ? <FilledBar {...props} model={props.model} W={W} /> : <EmptyBar W={W} />}
+    </div>
+  );
 }
 
 /**
  * The card, waiting. Just the empty track, holding the same space the filled
  * bar will take, so nothing moves when a model arrives.
  */
-function EmptyBar() {
+function EmptyBar({ W }: { W: number }) {
   const barTop = 84;
   const barBottom = barTop + BAR_H;
 
@@ -68,7 +111,7 @@ function EmptyBar() {
   );
 }
 
-function FilledBar({ model, gpu, contextTokens, selectedBits, onHoverBits, hoverBits, hoverCard }: Props & { model: Model }) {
+function FilledBar({ model, gpu, contextTokens, selectedBits, onHoverBits, hoverBits, hoverCard, W }: Props & { model: Model; W: number }) {
   const overhead = overheadGB(model, contextTokens);
   const vram = gpu.vram;
 
@@ -146,8 +189,6 @@ function FilledBar({ model, gpu, contextTokens, selectedBits, onHoverBits, hover
   useEffect(() => () => clearTimeout(closeTimer.current), []);
 
   const anchor = ticks.find((t) => t.bits === hoverBits);
-  // Past the midpoint the card would run off, so hang it from its right edge.
-  const flips = anchor ? anchor.x > W * 0.55 : false;
 
   return (
     <div className="relative">
@@ -299,10 +340,9 @@ function FilledBar({ model, gpu, contextTokens, selectedBits, onHoverBits, hover
           onMouseEnter={cancelClose}
           onMouseLeave={scheduleClose}
           style={{
-            left: `${(anchor.x / W) * 100}%`,
+            left: cardLeft(anchor.x, W, CARD_W),
             // Below the whole chart, so it never covers the KV cache caption.
             top: "calc(100% + 6px)",
-            transform: flips ? "translateX(-100%)" : undefined,
           }}
         >
           {hoverCard}

components/ModelInput.tsx

@@ -1,23 +1,32 @@
 "use client";
 
-import { useCallback, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { Model } from "@/lib/data";
 import { elideMiddle } from "./elide";
 
-// The field is a fixed 420px with 14px of padding either side. It does not
-// grow with the name: a field that resized would shove the rest of the
-// sentence around on every keystroke.
-const TEXT_PX = 420 - 28;
-const TRACKING = "-1.6px"; // -0.04em at 40px
+// The field has a fixed width per breakpoint. It does not grow with the name:
+// a field that resized would shove the rest of the sentence around on every
+// keystroke.
+
+interface Metrics {
+  font: string;
+  /** room for text inside the padding */
+  textPx: number;
+  tracking: string;
+}
 
 /**
  * The canvas cannot resolve `var(--font-geist-sans)`, so take the font the
- * browser actually resolved on the field itself.
+ * browser actually resolved on the field itself. Size, width and tracking all
+ * change at the breakpoint, so they are read here too, not hardcoded.
  */
-function fontOf(el: HTMLInputElement | null): string | null {
-  if (!el) return null;
+function metricsOf(el: HTMLInputElement): Metrics {
   const s = getComputedStyle(el);
-  return s.font || `${s.fontWeight} ${s.fontSize} ${s.fontFamily}`;
+  return {
+    font: s.font || `${s.fontWeight} ${s.fontSize} ${s.fontFamily}`,
+    textPx: el.clientWidth - parseFloat(s.paddingLeft) - parseFloat(s.paddingRight),
+    tracking: s.letterSpacing,
+  };
 }
 
 interface Props {
@@ -39,10 +48,15 @@ export default function ModelInput({ onResolve }: Props) {
   const [text, setText] = useState("");
   const [status, setStatus] = useState<Status>({ kind: "empty" });
   const [focused, setFocused] = useState(false);
-  const [font, setFont] = useState<string | null>(null);
-  // A callback ref runs at commit, which is where the resolved font can be read.
-  const attachInput = useCallback((el: HTMLInputElement | null) => {
-    if (el) setFont(fontOf(el));
+  const [metrics, setMetrics] = useState<Metrics | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  // Re-read whenever the field resizes, which is when the breakpoint flips.
+  useEffect(() => {
+    const el = inputRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => setMetrics(metricsOf(el)));
+    ro.observe(el);
+    return () => ro.disconnect();
   }, []);
   const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   // Only the newest lookup may write state; earlier ones lose the race.
@@ -87,13 +101,15 @@ export default function ModelInput({ onResolve }: Props) {
   // middle elided so the tail — the part that names the checkpoint — stays
   // visible. The input keeps the real value throughout.
   const elided =
-    focused || !font ? text : elideMiddle(text, TEXT_PX, font, TRACKING);
+    focused || !metrics
+      ? text
+      : elideMiddle(text, metrics.textPx, metrics.font, metrics.tracking);
   const isElided = elided !== text;
 
   return (
     <span className="relative inline-flex flex-col">
       <input
-        ref={attachInput}
+        ref={inputRef}
         aria-label="Model"
         value={text}
         onChange={(e) => handleChange(e.target.value)}
@@ -104,20 +120,20 @@ export default function ModelInput({ onResolve }: Props) {
         autoCapitalize="off"
         autoComplete="off"
         title={isElided ? text : undefined}
-        className={`h-[52px] w-[420px] rounded-md bg-paper px-3.5 text-[40px] font-medium leading-[44px] tracking-[-0.04em] ring-raised outline-none placeholder:text-ash ${
+        className={`h-[38px] lg:h-[52px] w-[280px] lg:w-[420px] rounded-md bg-paper px-2.5 lg:px-3.5 text-[26px] font-medium leading-[30px] lg:text-[40px] lg:leading-[44px] tracking-[-0.04em] ring-raised outline-none placeholder:text-ash ${
           isElided ? "text-transparent" : "text-obsidian"
         }`}
       />
       {isElided && (
         <span
           aria-hidden
-          className="pointer-events-none absolute inset-y-0 left-3.5 flex items-center text-[40px] font-medium leading-[44px] tracking-[-0.04em] text-obsidian"
+          className="pointer-events-none absolute inset-y-0 left-2.5 lg:left-3.5 flex items-center text-[26px] font-medium leading-[30px] lg:text-[40px] lg:leading-[44px] tracking-[-0.04em] text-obsidian"
         >
           {elided}
         </span>
       )}
       <span
-        className="label absolute top-[56px] left-1 whitespace-nowrap text-graphite"
+        className="label absolute top-[42px] lg:top-[56px] left-1 whitespace-nowrap text-graphite"
         role={status.kind === "error" ? "alert" : undefined}
       >
         {status.kind === "loading" && "Looking up"}

components/SentenceCombobox.tsx

@@ -51,7 +51,7 @@ export default function SentenceCombobox({
     >
       <ComboboxTrigger
         aria-label={ariaLabel}
-        className={`inline-flex h-[52px] items-center gap-2.5 rounded-md bg-paper px-3.5 text-[40px] font-medium leading-[44px] tracking-[-0.04em] ring-raised [&_svg]:text-graphite ${
+        className={`inline-flex h-[38px] lg:h-[52px] items-center gap-2.5 rounded-md bg-paper px-2.5 lg:px-3.5 text-[26px] font-medium leading-[30px] lg:text-[40px] lg:leading-[44px] tracking-[-0.04em] ring-raised [&_svg]:text-graphite ${
           muted ? "text-ash" : "text-obsidian"
         }`}
       >

components/SentenceSelect.tsx

@@ -32,13 +32,13 @@ export default function SentenceSelect({
   return (
     <span
       className={`relative inline-flex items-center gap-2.5 rounded-md bg-paper ring-raised ${
-        display ? "h-[52px] px-3.5" : "h-9 px-3"
+        display ? "h-[38px] px-2.5 lg:h-[52px] lg:px-3.5" : "h-9 px-3"
       }`}
     >
       <span
         className={
           display
-            ? "text-[40px] font-medium leading-[44px] tracking-[-0.04em] text-obsidian"
+            ? "text-[26px] font-medium leading-[30px] lg:text-[40px] lg:leading-[44px] tracking-[-0.04em] text-obsidian"
             : "font-mono text-[13px] text-obsidian"
         }
       >