diff --git a/DECISIONS.md b/DECISIONS.md
index ee857d2..cadfe58 100644
--- a/DECISIONS.md
+++ b/DECISIONS.md
@@ -974,9 +974,9 @@ in both themes.
 The y axis is not zero-based: `niceDomain()` rounds outward from the data, with 2.5 in its
 progression so a 5-to-26 spread does not step by 10.
 
-Each dot is a plain SVG `<a>`, not `next/link`. Below ~560px the chart scrolls inside
-`overflow-x-auto`. The card renders when empty, unlike `ServiceDueCard`: missing pressures or an
-average depth are something the diver can fix.
+Each dot is a plain SVG `<a>`, not `next/link`. Below 560px the chart narrows its viewBox rather
+than scrolling (`fittedChartWidth`). The card renders when empty, unlike `ServiceDueCard`: missing
+pressures or an average depth are something the diver can fix.
 
 ## The chart windows to All/Year/Month, but scales itself from the whole series
 
@@ -1004,8 +1004,8 @@ point: the same state drives the dot's enlarge-and-brighten, so dot and card can
 It is positioned in percentages of the chart box (the SVG scales uniformly in a wrapper of its own
 size) through the `style` prop, an inline attribute the CSP allows
 (`style-src-attr 'unsafe-inline'`). It flips to stay inside the box — below the dot in the top
-third, edge-aligned within 18% of either side — because `overflow-x: auto` on the scroll container
-computes `overflow-y` to `auto` and clips.
+third, edge-aligned within 18% of either side — and `useKeepInside` pulls in whatever a phone-width
+chart still leaves past an edge, where it would scroll the page sideways.
 
 Each dot has an invisible `r=7` hit circle with `fill="transparent"`, not `fill="none"`, which takes
 no pointer events. The card is `pointer-events-none` so it cannot steal the hover, has no accessible
@@ -1050,8 +1050,7 @@ maps the cursor to an instant on the profile's millisecond axis once and each ch
 own sample with `nearestSampleIndex`. Readouts are real readings, never interpolations.
 
 `tooltipVerticalAnchor` pins the card to the plot's top or bottom edge, whichever keeps it off the
-readings: card height depends on channel count, so offsetting from a point overflows the clipping
-scroll container.
+readings: card height depends on channel count, so offsetting from a point overflows the chart.
 
 Keyboard scrubbing is out of scope. The `aria-label` uses `formatDurationHoursMinutes`, not `MM:SS`.
 `--pressure` is a third theme-stable token in `globals.css`, violet.
@@ -1923,8 +1922,9 @@ The anchor is the start of a day with diving in it, so `periodRange`, `periodLab
 `availablePeriods`, `stepPeriod` and `resolveAnchor` live in `lib/chart-period.ts`.
 `GET /user/dive-activity` returns one row per day and `activityBars` sums into months and years
 client-side, so scope switches need no request (reasoning under _"Dives-per-day is counted in
-Python"_ in `opendiving-api/DECISIONS.md`). `MAX_X_LABELS` is 20 for years, 12 for months, 31 for
-days.
+Python"_ in `opendiving-api/DECISIONS.md`). `X_LABEL_SPACING` gives a label 33 units for years, 26
+for months and 21 for days: twenty years, all twelve months and every day at the design width, fewer
+on a phone.
 
 ## Every chart control names its own card, because the two cards draw the same row
 
@@ -1974,11 +1974,10 @@ label size reads as a rendering fault.
 
 ## The two chart cards stack, and gas leads - both measured, not assumed
 
-Each plot carries `min-w-[560px]`, which keeps twelve month labels and a y axis legible.
-`lg:grid-cols-2` on the dashboard's `max-w-6xl` gives 482px (546px at `max-w-7xl`), and three things
-break: both charts clip and grow a horizontal scrollbar, the axis text halves (16.6px to 8.6px,
-since the svg scales uniformly), and the gas header goes from 50px to 114px as its toggle and
-stepper drop below the description. Clearing all three needs about 1220px.
+Below 560px each plot narrows its viewBox instead of shrinking, so its axis text stops at 8.6px
+(`fittedChartWidth`). `lg:grid-cols-2` on the dashboard's `max-w-6xl` gives 482px (546px at
+`max-w-7xl`), and two things break: the axis text halves (16.6px to 8.6px), and the gas header goes
+from 50px to 114px as its toggle and stepper drop below the description.
 `RecentDivesCard`/`RecentTripsCard` pair up fine below: their content reflows instead of scaling.
 
 Gas consumption leads because it can change how you dive tomorrow; activity records what already
diff --git a/src/components/dashboard/dashboard-page-frame.tsx b/src/components/dashboard/dashboard-page-frame.tsx
index 7cb5155..1e6c597 100644
--- a/src/components/dashboard/dashboard-page-frame.tsx
+++ b/src/components/dashboard/dashboard-page-frame.tsx
@@ -247,11 +247,10 @@ export function DashboardPageFrame({
           already happened - and it's the harder-won number, since it needs dives that
           recorded pressures and an average depth.
 
-          Stacked, not side by side, and that was measured rather than assumed: each
-          plot needs 560px to keep twelve month labels legible, and a two-column grid
-          gives it 482px even on a widened page. Both charts clip, their axis text
-          halves, and the gas card's header doubles in height when its controls can no
-          longer share a line with its description. See DECISIONS.md. */}
+          Stacked, not side by side, and that was measured rather than assumed: a
+          two-column grid gives each plot 482px even on a widened page, where their
+          axis text halves and the gas card's header doubles in height when its
+          controls can no longer share a line with its description. See DECISIONS.md. */}
       {hasDives && <GasUseCard />}
       {hasDives && <DiveActivityCard />}
 
diff --git a/src/components/dives/chart-skeleton.tsx b/src/components/dives/chart-skeleton.tsx
index 3e9e0ce..7a42e9c 100644
--- a/src/components/dives/chart-skeleton.tsx
+++ b/src/components/dives/chart-skeleton.tsx
@@ -5,7 +5,8 @@ import { Skeleton } from "@/components/ui/skeleton";
  * summary figures over a `720 x 240` SVG drawn at `w-full h-auto`, so the
  * placeholder reserves the same `3:1` box - a card that collapsed to a spinner
  * and then grew back to chart height was most of what made arriving at the
- * dashboard feel jumpy.
+ * dashboard feel jumpy. Below 560px the charts keep the height they have there
+ * (see `fittedChartWidth`), and so does this.
  *
  * `legend` covers the one difference between them: the gas chart carries a
  * `text-xs` legend under its plot (it doubles as the control for which series
@@ -29,7 +30,7 @@ export function ChartSkeleton({
           </div>
         ))}
       </div>
-      <Skeleton className="aspect-[3/1] w-full" />
+      <Skeleton className="aspect-[3/1] min-h-[calc(560px/3)] w-full" />
       {legend && <Skeleton className="mt-2 h-4 w-64" />}
     </div>
   );
diff --git a/src/components/dives/dive-activity-chart.browser.test.tsx b/src/components/dives/dive-activity-chart.browser.test.tsx
new file mode 100644
index 0000000..5354b3c
--- /dev/null
+++ b/src/components/dives/dive-activity-chart.browser.test.tsx
@@ -0,0 +1,102 @@
+import { describe, expect, it } from "vitest";
+import { fireEvent, render } from "@testing-library/react";
+
+import { DiveActivityChart } from "./dive-activity-chart";
+import type { DiveActivityPoint } from "@/lib/api/dive-stats";
+import type { ChartScope } from "@/lib/chart-period";
+import { activityBars, barCeiling } from "@/lib/dive-activity";
+import {
+  overlappingLabels,
+  sidewaysScrollers,
+  withinSides,
+} from "@/test/chart-layout";
+
+// Load-bearing, as in `dive-profile-chart.browser.test.tsx`, whose first test
+// fails without it: without the app's Tailwind a `min-w-*` class computes to
+// nothing, so a chart wider than its container would pass everything below.
+import "@/app/globals.css";
+
+// Twenty-five years of diving, and a 2025 with a dive in every month and on
+// every day of August: the widest each scope's axis gets.
+const POINTS: DiveActivityPoint[] = [
+  ...Array.from({ length: 25 }, (_, index) => ({
+    year: 2002 + index,
+    month: 6,
+    day: 15,
+    dives: 1 + (index % 4),
+  })),
+  ...Array.from({ length: 12 }, (_, index) => ({
+    year: 2025,
+    month: index + 1,
+    day: 3,
+    dives: 2,
+  })),
+  ...Array.from({ length: 31 }, (_, index) => ({
+    year: 2025,
+    month: 8,
+    day: index + 1,
+    dives: 1 + (index % 3),
+  })),
+];
+
+const ANCHOR = Date.UTC(2025, 7, 10);
+
+// The chart's width on the dashboard at a 375 px and a 320 px viewport, and at
+// 1024 px.
+const WIDTHS = { phone: 293, smallPhone: 238, desktop: 910 };
+const SCOPES: ChartScope[] = ["all", "year", "month"];
+
+const CASES = Object.entries(WIDTHS).flatMap(([name, width]) =>
+  SCOPES.map((scope) => [name, scope, width] as const),
+);
+
+function renderAt(width: number, scope: ChartScope) {
+  const { container } = render(
+    <div style={{ width }}>
+      <DiveActivityChart
+        bars={activityBars(POINTS, scope, ANCHOR)}
+        ceiling={barCeiling(POINTS, scope)}
+        scope={scope}
+      />
+    </div>,
+  );
+  const frame = container.firstElementChild as HTMLElement;
+  const svg = frame.querySelector("svg") as SVGSVGElement;
+  return { frame, svg };
+}
+
+describe("the dive activity chart's layout", () => {
+  it.each(CASES)(
+    "draws no label over another at %s width, scope %s",
+    (_, scope, width) => {
+      const { svg } = renderAt(width, scope);
+
+      expect(overlappingLabels(svg)).toEqual([]);
+    },
+  );
+
+  it.each(CASES)(
+    "fits %s width without scrolling sideways, scope %s",
+    (_, scope, width) => {
+      const { frame, svg } = renderAt(width, scope);
+
+      expect(sidewaysScrollers(svg, frame)).toEqual([]);
+    },
+  );
+
+  it.each(SCOPES)(
+    "keeps the hover card inside a phone-width chart, scope %s",
+    (scope) => {
+      const { frame, svg } = renderAt(WIDTHS.smallPhone, scope);
+      const columns = [...svg.querySelectorAll('rect[fill="transparent"]')];
+
+      for (const column of [columns[0], columns[columns.length - 1]]) {
+        fireEvent.mouseEnter(column);
+        const card = frame.querySelector('[role="presentation"]') as Element;
+
+        expect(withinSides(card, frame)).toBe(true);
+        fireEvent.mouseLeave(column);
+      }
+    },
+  );
+});
diff --git a/src/components/dives/dive-activity-chart.tsx b/src/components/dives/dive-activity-chart.tsx
index 3c168bc..eaac714 100644
--- a/src/components/dives/dive-activity-chart.tsx
+++ b/src/components/dives/dive-activity-chart.tsx
@@ -1,11 +1,13 @@
 "use client";
 
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { barPath } from "@/lib/chart-path";
-import { axisTicks, countDomain } from "@/lib/chart-scale";
+import { axisTicks, countDomain, labelCapacity } from "@/lib/chart-scale";
 import type { ChartScope } from "@/lib/chart-period";
 import type { ActivityBar } from "@/lib/dive-activity";
 import { cn } from "@/lib/utils";
+import { useChartWidth } from "@/hooks/useChartWidth";
+import { useKeepInside } from "@/hooks/useKeepInside";
 
 // Hand-rolled SVG, for the reasons `gas-use-chart.tsx` sets out at length: the
 // app ships a strict nonce-based CSP that a `<style>`-injecting charting library
@@ -19,12 +21,12 @@ import { cn } from "@/lib/utils";
 // grey in dark, does not.
 
 // The viewBox coordinate space, matched to the gas chart's so the two cards'
-// plots line up down the dashboard rather than being a few units out.
+// plots line up down the dashboard rather than being a few units out - and, like
+// it, the design width, narrowed on a phone by `useChartWidth`.
 const WIDTH = 720;
 const HEIGHT = 240;
 const PADDING = { top: 12, right: 14, bottom: 28, left: 42 };
 
-const PLOT_WIDTH = WIDTH - PADDING.left - PADDING.right;
 const PLOT_HEIGHT = HEIGHT - PADDING.top - PADDING.bottom;
 
 // How much of its slot a bar fills. The rest is the gap, and the gap is what
@@ -38,24 +40,24 @@ const MAX_BAR_WIDTH = 52;
 
 const BAR_RADIUS = 3;
 
-// How many x labels the axis carries before it starts skipping them, per scope.
+// The room each x label gets before the axis starts skipping them, per scope, in
+// viewBox units.
 //
-// Higher than the gas chart's twelve, and deliberately: there, labels sit at
+// Tighter than the gas chart's years, and deliberately: there, labels sit at
 // whatever x the data lands on and can crowd each other locally; here they are
 // one per evenly spaced slot, so the only thing that matters is the arithmetic -
-// how wide a label is against the 664-unit plot it has to divide.
+// how wide a label is against the plot it has to divide.
 //
-// A four-digit year at `fontSize={11}` is about 24 units wide, and twenty slots
-// are 33 units each - eight units of air either side. Twelve left a fourteen-year
-// career labeling every other year, which is a thinner axis than it needs. A
-// three-letter month is about 20 units and there are only ever twelve of them, at
-// 55 units each. A one- or two-digit day is about 12, and 31 slots are 21 units
-// each - nine units of air, so a full month can label every day rather than
-// counting down from the 31st in twos, which is how a thinned day axis reads.
-const MAX_X_LABELS: Record<ChartScope, number> = {
-  all: 20,
-  year: 12,
-  month: 31,
+// A four-digit year at `fontSize={11}` is about 27 units wide, so 33 fits twenty
+// of them across the design width's 664-unit plot. A three-letter month is at
+// most 22 ("May"), and 26 still labels all twelve on a 375 px phone. A one- or
+// two-digit day is about 13, and 21 labels every day of a month at the design
+// width rather than counting down from the 31st in twos, which is how a thinned
+// day axis reads.
+const X_LABEL_SPACING: Record<ChartScope, number> = {
+  all: 33,
+  year: 26,
+  month: 21,
 };
 
 export interface DiveActivityChartProps {
@@ -68,8 +70,8 @@ export interface DiveActivityChartProps {
   // `bars`. Scaling to the visible year would make every year's busiest month
   // full height and the arrows compare nothing - see `barCeiling`.
   ceiling: number;
-  // The chart's accessible description, and how many x labels the axis can carry
-  // (see `MAX_X_LABELS`). Nothing about the plot's own geometry depends on it -
+  // The chart's accessible description, and how much room each x label needs
+  // (see `X_LABEL_SPACING`). Nothing about the plot's own geometry depends on it -
   // that all follows from `bars.length`.
   scope: ChartScope;
 }
@@ -84,6 +86,7 @@ export function DiveActivityChart({
   // can ever be open, and shared state means the lit bar and the card it
   // describes cannot disagree.
   const [hovered, setHovered] = useState<number | null>(null);
+  const [chartRef, width] = useChartWidth(WIDTH);
 
   const total = bars.reduce((sum, bar) => sum + bar.dives, 0);
 
@@ -106,7 +109,7 @@ export function DiveActivityChart({
 
   const domain = countDomain(ceiling);
 
-  const slot = PLOT_WIDTH / bars.length;
+  const slot = (width - PADDING.left - PADDING.right) / bars.length;
   const barWidth = Math.min(slot * BAR_FILL, MAX_BAR_WIDTH);
   const baseline = PADDING.top + PLOT_HEIGHT;
 
@@ -117,139 +120,142 @@ export function DiveActivityChart({
   // Thinned from the right, so the most recent year always keeps its label -
   // it's the one the eye goes to, and dropping it to keep 1998's would be the
   // wrong half of the axis to preserve.
-  const labelStride = Math.ceil(bars.length / MAX_X_LABELS[scope]);
+  const labelStride = Math.ceil(
+    bars.length /
+      labelCapacity(
+        width - PADDING.left - PADDING.right,
+        X_LABEL_SPACING[scope],
+      ),
+  );
   const labelled = (index: number) =>
     (bars.length - 1 - index) % labelStride === 0;
 
   return (
     <div>
-      {/* Wide content scrolls in its own container rather than shrinking the
-          whole chart to phone width, where the labels would become unreadable -
-          the same treatment the gas chart and the mixtures table get. */}
-      <div className="overflow-x-auto">
-        {/* Sized to exactly the chart, and the positioning context the tooltip's
-            percentage offsets are resolved against. */}
-        <div className="relative min-w-[560px]">
-          <svg
-            viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
-            className="w-full h-auto"
-            // `img`, not the gas chart's `group`: there is nothing focusable
-            // inside this one. The bars aren't links - a month is not a page -
-            // so the summary below plus the visually hidden list after it carry
-            // the whole picture.
-            role="img"
-            aria-label={describeBars(bars, scope, total)}
-          >
-            {/* Gridlines and the y scale, `aria-hidden` because `role="img"`
+      {/* Sized to exactly the chart, and the positioning context the tooltip's
+          percentage offsets are resolved against. It never scrolls:
+          `useChartWidth` narrows the viewBox to fit a phone instead. */}
+      <div ref={chartRef} className="relative">
+        <svg
+          viewBox={`0 0 ${width} ${HEIGHT}`}
+          className="w-full h-auto"
+          // `img`, not the gas chart's `group`: there is nothing focusable
+          // inside this one. The bars aren't links - a month is not a page -
+          // so the summary below plus the visually hidden list after it carry
+          // the whole picture.
+          role="img"
+          aria-label={describeBars(bars, scope, total)}
+        >
+          {/* Gridlines and the y scale, `aria-hidden` because `role="img"`
                 does not reliably keep bare `<text>` out of the accessibility
                 tree - the same note the profile chart carries. Dashed, so they
                 support the bars rather than compete with them. */}
-            {axisTicks(domain).map((tick) => (
-              <g key={tick} aria-hidden className="text-border">
-                <line
-                  x1={PADDING.left}
-                  x2={WIDTH - PADDING.right}
-                  y1={baseline - height(tick)}
-                  y2={baseline - height(tick)}
-                  stroke="currentColor"
-                  strokeWidth={1}
-                  strokeDasharray="2 4"
-                />
-                <text
-                  x={PADDING.left - 8}
-                  y={baseline - height(tick)}
-                  textAnchor="end"
-                  dominantBaseline="middle"
-                  fontSize={11}
-                  fill="currentColor"
-                  className="text-muted-foreground"
-                >
-                  {tick}
-                </text>
-              </g>
-            ))}
+          {axisTicks(domain).map((tick) => (
+            <g key={tick} aria-hidden className="text-border">
+              <line
+                x1={PADDING.left}
+                x2={width - PADDING.right}
+                y1={baseline - height(tick)}
+                y2={baseline - height(tick)}
+                stroke="currentColor"
+                strokeWidth={1}
+                strokeDasharray="2 4"
+              />
+              <text
+                x={PADDING.left - 8}
+                y={baseline - height(tick)}
+                textAnchor="end"
+                dominantBaseline="middle"
+                fontSize={11}
+                fill="currentColor"
+                className="text-muted-foreground"
+              >
+                {tick}
+              </text>
+            </g>
+          ))}
 
-            {/* The axis itself - solid, so the bars have a floor to stand on
+          {/* The axis itself - solid, so the bars have a floor to stand on
                 rather than another dashed rule to be confused with. */}
-            <line
-              x1={PADDING.left}
-              x2={WIDTH - PADDING.right}
-              y1={baseline}
-              y2={baseline}
-              stroke="currentColor"
-              strokeWidth={1}
-              className="text-border"
-            />
+          <line
+            x1={PADDING.left}
+            x2={width - PADDING.right}
+            y1={baseline}
+            y2={baseline}
+            stroke="currentColor"
+            strokeWidth={1}
+            className="text-border"
+          />
 
-            {bars.map((bar, index) => (
-              <g key={bar.key}>
-                {/* The whole column is the hover target, not just the bar. A
+          {bars.map((bar, index) => (
+            <g key={bar.key}>
+              {/* The whole column is the hover target, not just the bar. A
                     quiet January is a few units tall and an empty one has no
                     bar at all, and "how many dives was that month" is exactly
                     the question you'd point at them to ask. `transparent`
                     rather than `fill="none"`, which takes no pointer events. */}
-                <rect
-                  x={slotStart(index)}
-                  y={PADDING.top}
-                  width={slot}
-                  height={PLOT_HEIGHT}
-                  fill="transparent"
-                  onMouseEnter={() => setHovered(index)}
-                  onMouseLeave={() => setHovered(null)}
-                />
-                <path
-                  d={barPath(
-                    center(index) - barWidth / 2,
-                    baseline - height(bar.dives),
-                    barWidth,
-                    height(bar.dives),
-                    BAR_RADIUS,
-                  )}
-                  fill="currentColor"
-                  // Faded by default and lit on hover, so a row of bars reads as
-                  // one series and the hovered one as the one being described -
-                  // the same treatment the gas chart's dots get. `pointer-events
-                  // -none` so the bar never steals its own column's hover and
-                  // flickers along the top edge.
-                  className={cn(
-                    "pointer-events-none text-teal transition-opacity",
-                    hovered === index ? "opacity-100" : "opacity-70",
-                  )}
-                />
-              </g>
-            ))}
-
-            {bars.map((bar, index) =>
-              labelled(index) ? (
-                <text
-                  key={bar.key}
-                  aria-hidden
-                  x={center(index)}
-                  y={HEIGHT - 8}
-                  textAnchor="middle"
-                  fontSize={11}
-                  fill="currentColor"
-                  className={cn(
-                    "transition-colors",
-                    hovered === index
-                      ? "text-foreground"
-                      : "text-muted-foreground",
-                  )}
-                >
-                  {bar.label}
-                </text>
-              ) : null,
-            )}
-          </svg>
+              <rect
+                x={slotStart(index)}
+                y={PADDING.top}
+                width={slot}
+                height={PLOT_HEIGHT}
+                fill="transparent"
+                onMouseEnter={() => setHovered(index)}
+                onMouseLeave={() => setHovered(null)}
+              />
+              <path
+                d={barPath(
+                  center(index) - barWidth / 2,
+                  baseline - height(bar.dives),
+                  barWidth,
+                  height(bar.dives),
+                  BAR_RADIUS,
+                )}
+                fill="currentColor"
+                // Faded by default and lit on hover, so a row of bars reads as
+                // one series and the hovered one as the one being described -
+                // the same treatment the gas chart's dots get. `pointer-events
+                // -none` so the bar never steals its own column's hover and
+                // flickers along the top edge.
+                className={cn(
+                  "pointer-events-none text-teal transition-opacity",
+                  hovered === index ? "opacity-100" : "opacity-70",
+                )}
+              />
+            </g>
+          ))}
 
-          {hovered !== null && (
-            <DiveActivityTooltip
-              bar={bars[hovered]}
-              cx={center(hovered)}
-              cy={baseline - height(bars[hovered].dives)}
-            />
+          {bars.map((bar, index) =>
+            labelled(index) ? (
+              <text
+                key={bar.key}
+                aria-hidden
+                x={center(index)}
+                y={HEIGHT - 8}
+                textAnchor="middle"
+                fontSize={11}
+                fill="currentColor"
+                className={cn(
+                  "transition-colors",
+                  hovered === index
+                    ? "text-foreground"
+                    : "text-muted-foreground",
+                )}
+              >
+                {bar.label}
+              </text>
+            ) : null,
           )}
-        </div>
+        </svg>
+
+        {hovered !== null && (
+          <DiveActivityTooltip
+            bar={bars[hovered]}
+            cx={center(hovered)}
+            cy={baseline - height(bars[hovered].dives)}
+            chartWidth={width}
+          />
+        )}
       </div>
 
       {/* The figures themselves, for a screen reader. The chart's own label is a
@@ -312,32 +318,35 @@ function DiveActivityTooltip({
   bar,
   cx,
   cy,
+  chartWidth,
 }: {
   bar: ActivityBar;
   cx: number;
   cy: number;
+  chartWidth: number;
 }) {
-  // Flipped and nudged so the card always lands inside the chart box, which it
-  // has to: the scroll container clips (an `overflow-x` of `auto` makes
-  // `overflow-y` compute to `auto` too), so anything past the top edge would be
-  // cut off or add a stray scrollbar. A full-height bar's top is at the very top
-  // of the plot, so this flips more often than the gas chart's does.
+  // Flipped and nudged so the card lands inside the chart box, as the gas
+  // chart's does. A full-height bar's top is at the very top of the plot, so this
+  // flips more often than that one.
+  const cardRef = useRef<HTMLDivElement>(null);
+  useKeepInside(cardRef);
   const below = cy < HEIGHT * 0.35;
   const translateY = below ? "12px" : "calc(-100% - 12px)";
   const translateX =
-    cx < WIDTH * 0.18
+    cx < chartWidth * 0.18
       ? "-12px"
-      : cx > WIDTH * 0.82
+      : cx > chartWidth * 0.82
         ? "calc(-100% + 12px)"
         : "-50%";
 
   return (
     <div
+      ref={cardRef}
       // Never a hover target itself - it sits over the column that opened it,
       // and letting it take the pointer would make it flicker.
       className="pointer-events-none absolute z-10 whitespace-nowrap rounded-md border border-white/10 bg-tooltip px-3 py-2 text-tooltip-foreground shadow-lg"
       style={{
-        left: `${(cx / WIDTH) * 100}%`,
+        left: `${(cx / chartWidth) * 100}%`,
         top: `${(cy / HEIGHT) * 100}%`,
         transform: `translate(${translateX}, ${translateY})`,
       }}
diff --git a/src/components/dives/dive-profile-chart.browser.test.tsx b/src/components/dives/dive-profile-chart.browser.test.tsx
new file mode 100644
index 0000000..bc47b5e
--- /dev/null
+++ b/src/components/dives/dive-profile-chart.browser.test.tsx
@@ -0,0 +1,119 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render } from "@testing-library/react";
+
+import { DiveProfileChart } from "./dive-profile-chart";
+import type { DiveProfile } from "@/lib/api/dives";
+import { CHART_FULL_WIDTH_PX } from "@/lib/chart-scale";
+import {
+  overlappingLabels,
+  sidewaysScrollers,
+  withinSides,
+} from "@/test/chart-layout";
+
+// Load-bearing: the browser project loads none of this app's Tailwind, and
+// without it a `min-w-*` class computes to nothing, so a chart wider than its
+// container would pass every assertion below. The first test fails loudly if
+// this import goes.
+import "@/app/globals.css";
+
+vi.mock("@/contexts/AuthContext", () => ({
+  useAuth: () => ({ user: { uuid: "user-1", units: "metric" } }),
+}));
+
+// A 19 m dive with a full deco panel. Depth's axis ends on 20 and the NDL row's
+// begins at 100 min, which is the pair that touched; the ppO₂ and percent rows
+// put two more row boundaries under it, and temperature labels the right edge.
+const times = Array.from({ length: 11 }, (_, index) => index * 300_000);
+const PROFILE: DiveProfile = {
+  duration: 3_000_000,
+  depth: {
+    times,
+    values: [0, 1200, 1900, 1900, 1800, 1700, 1500, 1200, 800, 500, 0],
+  },
+  temperature: {
+    times,
+    values: [260, 250, 240, 235, 232, 230, 230, 232, 238, 245, 252],
+  },
+  pressures: [],
+  ndl: {
+    times,
+    values: [5940, 3600, 1800, 1500, 1500, 1600, 1900, 2400, 3600, 5940, 5940],
+  },
+  tts: { times, values: [0, 60, 120, 180, 180, 120, 60, 60, 0, 0, 0] },
+  ppo2: { times, values: [21, 45, 61, 61, 59, 57, 53, 46, 38, 31, 21] },
+  cns: { times, values: [0, 2, 4, 6, 8, 9, 10, 11, 12, 12, 12] },
+  gradient_factor: {
+    times,
+    values: [0, 10, 25, 38, 45, 52, 58, 60, 55, 40, 20],
+  },
+  events: [],
+};
+
+// The chart's width on a dive page at a 375 px and a 320 px viewport, and at
+// 1024 px, where the page gets its sidebar.
+const WIDTHS = { phone: 293, smallPhone: 238, desktop: 582 };
+
+function renderAt(width: number) {
+  const { container } = render(
+    <div style={{ width }}>
+      <DiveProfileChart profile={PROFILE} />
+    </div>,
+  );
+  const frame = container.firstElementChild as HTMLElement;
+  const svg = frame.querySelector("svg") as SVGSVGElement;
+  return { frame, svg };
+}
+
+describe("the dive profile chart's layout", () => {
+  it("is laid out by the app's stylesheet", () => {
+    // What makes the rest of this file mean anything - see the import above.
+    const { svg } = renderAt(WIDTHS.phone);
+
+    expect(getComputedStyle(svg.parentElement as Element).position).toBe(
+      "relative",
+    );
+  });
+
+  it.each(Object.entries(WIDTHS))(
+    "draws no label over another at %s width",
+    (_, width) => {
+      const { svg } = renderAt(width);
+
+      expect(overlappingLabels(svg)).toEqual([]);
+    },
+  );
+
+  it.each(Object.entries(WIDTHS))(
+    "fits %s width without scrolling sideways",
+    (_, width) => {
+      const { frame, svg } = renderAt(width);
+
+      expect(sidewaysScrollers(svg, frame)).toEqual([]);
+    },
+  );
+
+  it("keeps the type at the size it has at the full-width breakpoint", () => {
+    // Fitting a phone by shrinking the whole drawing would pass both tests
+    // above with labels a third of their size.
+    const { svg } = renderAt(WIDTHS.phone);
+    const scale = svg.getBoundingClientRect().width / svg.viewBox.baseVal.width;
+
+    expect(scale).toBeCloseTo(CHART_FULL_WIDTH_PX / 720);
+  });
+
+  it("keeps the hover card inside the chart wherever the crosshair is", () => {
+    const { frame, svg } = renderAt(WIDTHS.phone);
+    const target = svg.querySelector('rect[fill="transparent"]') as Element;
+    const box = target.getBoundingClientRect();
+
+    for (let step = 0; step <= 50; step++) {
+      fireEvent.mouseMove(target, {
+        clientX: box.left + (box.width * step) / 50,
+        clientY: box.top + box.height / 3,
+      });
+      const card = frame.querySelector('[role="presentation"]') as Element;
+
+      expect(withinSides(card, frame), `at ${step * 2}%`).toBe(true);
+    }
+  });
+});
diff --git a/src/components/dives/dive-profile-chart.render.test.tsx b/src/components/dives/dive-profile-chart.render.test.tsx
index 3d28d00..3cd8b9e 100644
--- a/src/components/dives/dive-profile-chart.render.test.tsx
+++ b/src/components/dives/dive-profile-chart.render.test.tsx
@@ -459,8 +459,9 @@ describe("DiveProfileChart crosshair over a short deco obligation", () => {
   it("names a marker the crosshair is on, and none when it is away from one", () => {
     // The other half of the same class of wiring: `nearestEvent` is covered in
     // `lib`, but the tolerance the chart hands it -
-    // `(duration / PLOT_WIDTH) * EVENT_HOVER_UNITS`, about 38 s on this dive - is
-    // a fact about this file and nothing asserted it.
+    // `(duration / plotWidth) * EVENT_HOVER_UNITS`, about 38 s on this dive at the
+    // design width jsdom always draws - is a fact about this file and nothing
+    // asserted it.
     render(
       <DiveProfileChart
         profile={longProfile({ events: [{ time: 900_000, type: "bookmark" }] })}
diff --git a/src/components/dives/dive-profile-chart.tsx b/src/components/dives/dive-profile-chart.tsx
index a48dfe3..1ae199d 100644
--- a/src/components/dives/dive-profile-chart.tsx
+++ b/src/components/dives/dive-profile-chart.tsx
@@ -4,6 +4,7 @@ import {
   useEffect,
   useId,
   useMemo,
+  useRef,
   useState,
   useSyncExternalStore,
 } from "react";
@@ -12,7 +13,12 @@ import type {
   DiveProfileEvent,
   DiveProfileEventType,
 } from "@/lib/api/dives";
-import { axisTicks, niceDomain, type Domain } from "@/lib/chart-scale";
+import {
+  axisTicks,
+  labelCapacity,
+  niceDomain,
+  type Domain,
+} from "@/lib/chart-scale";
 import { buildAreaPath } from "@/lib/chart-path";
 import {
   type ChannelSeries,
@@ -21,6 +27,7 @@ import {
   type ProfileChannelKey,
   type ProfileSeriesKey,
   type ProfileViewKey,
+  ELAPSED_TICK_TARGET,
   EVENTS_LABEL,
   PANEL_AXES,
   PROFILE_CHANNELS,
@@ -56,6 +63,8 @@ import {
   writeSeriesVisibility,
 } from "@/lib/chart-series-view";
 import { cn } from "@/lib/utils";
+import { useChartWidth } from "@/hooks/useChartWidth";
+import { useKeepInside } from "@/hooks/useKeepInside";
 import { useUnits } from "@/hooks/useUnits";
 import type { UnitSystem } from "@/lib/units";
 
@@ -73,16 +82,22 @@ import type { UnitSystem } from "@/lib/units";
 // grey in dark, which left the gas chart's trend line barely visible.
 
 // The viewBox coordinate space. Not pixels: the SVG scales to its container, so
-// these are only ever ratios to each other.
+// these are only ever ratios to each other. This is the design width; a phone
+// draws into a narrower one (see `useChartWidth`), so only the heights below are
+// fixed.
 const WIDTH = 720;
 // Wider on both sides than the gas chart: depth is on the left and temperature
 // and pressure share the right, so both margins carry axis labels.
 const PADDING = { top: 14, right: 46, bottom: 28, left: 44 };
 
-const PLOT_WIDTH = WIDTH - PADDING.left - PADDING.right;
 const PLOT_HEIGHT = 238;
 const PLOT_BOTTOM = PADDING.top + PLOT_HEIGHT;
 
+// The room each elapsed-time label gets on the x axis: "999:00" is 37.5 units
+// wide in 11-unit Inter, plus air. At the design width the axis is never short of
+// it, so this only thins the labels on a phone.
+const ELAPSED_LABEL_SPACING = 44;
+
 // The deco panel: one short plot per unit the depth plot's two edges cannot
 // carry, stacked under it and sharing its elapsed-time axis. See
 // `profileScalePlacement` for why the split is forced rather than chosen.
@@ -91,7 +106,10 @@ const PLOT_BOTTOM = PADDING.top + PLOT_HEIGHT;
 // edges are untouched by anything the diver switches on down here, and every
 // curve on the chart is drawn against numbers that belong to it.
 const PANEL_HEIGHT = 46;
-const PANEL_GAP = 12;
+// The labels either side of a gap each sit centred on their own rule, so the gap
+// has to hold half of each: 11- and 10-unit type is about 1.2 em tall, 12.6 units
+// between them, and 16 leaves a few units of air.
+const PANEL_GAP = 16;
 
 const panelTop = (index: number) =>
   PLOT_BOTTOM + PANEL_GAP + index * (PANEL_HEIGHT + PANEL_GAP);
@@ -232,6 +250,8 @@ export function DiveProfileChart({ profile }: DiveProfileChartProps) {
   // fragment that has to resolve it. What survives the strip is still the part
   // that differs between two ids on one page.
   const clipPrefix = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [chartRef, width] = useChartWidth(WIDTH);
+  const plotWidth = width - PADDING.left - PADDING.right;
   // One hovered *time*, not one hovered sample, and one piece of state for the
   // whole chart - the same call `GasUseChart` makes, for the same reason. It
   // can't be an index here: the channels are independently sampled and don't
@@ -282,7 +302,7 @@ export function DiveProfileChart({ profile }: DiveProfileChartProps) {
 
   const duration = profile.duration;
   const x = (at: number) =>
-    PADDING.left + (duration > 0 ? at / duration : 0) * PLOT_WIDTH;
+    PADDING.left + (duration > 0 ? at / duration : 0) * plotWidth;
 
   // Markers that land inside the plot, which is this chart's job rather than the
   // API's and is stated as such at the other end: `_rebase_events` clamps the low
@@ -748,7 +768,7 @@ export function DiveProfileChart({ profile }: DiveProfileChartProps) {
       : nearestEvent(
           events,
           hoveredMs,
-          (duration / PLOT_WIDTH) * EVENT_HOVER_UNITS,
+          (duration / plotWidth) * EVENT_HOVER_UNITS,
         );
 
   // One binary search per channel, not one shared index lookup: the channels are
@@ -800,43 +820,28 @@ export function DiveProfileChart({ profile }: DiveProfileChartProps) {
 
   return (
     <div>
-      {/* Wide content scrolls in its own container rather than shrinking the
-          whole chart to phone width, where three axes' labels would become
-          unreadable - the same treatment the gas chart and the gas mixtures
-          table get. The legend deliberately sits *outside* it: it's text, so it
-          should wrap to the screen rather than scroll sideways with the plot,
-          and on a phone the container's own horizontal scrollbar is drawn
-          across the bottom of whatever it contains - straight through the
-          legend. */}
-      {/* `relative` at the *viewport's* width rather than the plot's, which is
-          what the empty-plot message below is positioned against. Centring it on
-          the 560-unit plot box instead puts it at x≈280 of a box that is wider
-          than a phone, so on a 375 px screen the sentence starts near the right
-          edge and runs off it - and the one thing that has to be readable
-          without scrolling is the sentence explaining why there is nothing to
-          scroll to. */}
-      <div className="relative">
-        <div className="overflow-x-auto">
-          {/* Sized to exactly the chart, and the positioning context the
-              tooltip's percentage offsets are resolved against. */}
-          <div className="relative min-w-[560px]">
-            <svg
-              viewBox={`0 0 ${WIDTH} ${height}`}
-              className="w-full h-auto"
-              role="img"
-              // Only what's on screen. A summary naming a temperature range the
-              // diver has hidden describes a chart nobody is looking at.
-              aria-label={describeProfile({
-                readings: shownValues,
-                // Emptied rather than filtered, since the toggle is
-                // all-or-nothing - and this is the same "only what's on screen"
-                // rule the channels go through `shownValues` for.
-                events: eventsShown ? events : [],
-                duration,
-                units,
-              })}
-            >
-              {/* One clip per panel row, because a panel row's axis can declare a
+      {/* Sized to exactly the chart, and what the tooltip's percentage offsets
+          and the empty-plot message are resolved against. It never scrolls:
+          `useChartWidth` narrows the viewBox to fit a phone instead. The legend
+          sits outside it, as text that wraps to the screen. */}
+      <div ref={chartRef} className="relative">
+        <svg
+          viewBox={`0 0 ${width} ${height}`}
+          className="w-full h-auto"
+          role="img"
+          // Only what's on screen. A summary naming a temperature range the
+          // diver has hidden describes a chart nobody is looking at.
+          aria-label={describeProfile({
+            readings: shownValues,
+            // Emptied rather than filtered, since the toggle is
+            // all-or-nothing - and this is the same "only what's on screen"
+            // rule the channels go through `shownValues` for.
+            events: eventsShown ? events : [],
+            duration,
+            units,
+          })}
+        >
+          {/* One clip per panel row, because a panel row's axis can declare a
               ceiling its readings overrun - see `axisDomain`, and DECISIONS.md's
               *"The percent axis stops at 200 %"*.
 
@@ -863,20 +868,20 @@ export function DiveProfileChart({ profile }: DiveProfileChartProps) {
               hides what leaves the viewBox and happily draws what merely leaves a
               plot. That distinction is already recorded, under *"Markers are
               clipped to the plot"*. */}
-              <defs aria-hidden>
-                {placement.panels.map((axis, index) => (
-                  <clipPath key={axis} id={`${clipPrefix}-panel-${index}`}>
-                    <rect
-                      x={PADDING.left}
-                      y={panelTop(index)}
-                      width={PLOT_WIDTH}
-                      height={PANEL_HEIGHT}
-                    />
-                  </clipPath>
-                ))}
-              </defs>
+          <defs aria-hidden>
+            {placement.panels.map((axis, index) => (
+              <clipPath key={axis} id={`${clipPrefix}-panel-${index}`}>
+                <rect
+                  x={PADDING.left}
+                  y={panelTop(index)}
+                  width={plotWidth}
+                  height={PANEL_HEIGHT}
+                />
+              </clipPath>
+            ))}
+          </defs>
 
-              {/* Horizontal gridlines, from the left-hand axis, so every rule
+          {/* Horizontal gridlines, from the left-hand axis, so every rule
               lines up with a labelled value rather than floating between two.
               `currentColor` throughout, so light/dark is inherited from the
               surrounding text colors rather than hardcoded per theme.
@@ -886,236 +891,242 @@ export function DiveProfileChart({ profile }: DiveProfileChartProps) {
               reliably keep bare `<text>` out of the accessibility tree - it
               surfaces as a run of unlabelled numbers ahead of anything useful.
               `describeProfile` on the svg says what they say, in a sentence. */}
-              {leftChannel &&
-                axisTicks(leftChannel.domain).map((tick) => (
+          {leftChannel &&
+            axisTicks(leftChannel.domain).map((tick) => (
+              <line
+                key={tick}
+                aria-hidden
+                className="text-border"
+                x1={PADDING.left}
+                x2={width - PADDING.right}
+                y1={leftChannel.y(tick)}
+                y2={leftChannel.y(tick)}
+                stroke="currentColor"
+                strokeWidth={1}
+              />
+            ))}
+
+          {/* The primary scale, labelled in the colour of whichever channel
+              is holding it - see `leftChannel` for which one that is and why
+              it is never nothing while a curve is on the plot. */}
+          {leftChannel &&
+            axisTicks(leftChannel.domain).map((tick) => (
+              <text
+                key={tick}
+                aria-hidden
+                x={PADDING.left - 6}
+                y={leftChannel.y(tick)}
+                textAnchor="end"
+                dominantBaseline="middle"
+                fontSize={11}
+                fill="currentColor"
+                className={leftChannel.series.channel.colorClass}
+              >
+                {tick}
+              </text>
+            ))}
+
+          {/* The second scale, where the selection holds one - see
+              `rightChannel`. */}
+          {rightChannel &&
+            axisTicks(rightChannel.domain).map((tick) => (
+              <text
+                key={tick}
+                aria-hidden
+                x={width - PADDING.right + 6}
+                y={rightChannel.y(tick)}
+                textAnchor="start"
+                dominantBaseline="middle"
+                fontSize={11}
+                fill="currentColor"
+                className={rightChannel.series.channel.colorClass}
+              >
+                {tick}
+              </text>
+            ))}
+
+          {/* The deco panel's rows: two rules and two numbers each, the
+              upper one carrying the unit. Deliberately thinner than the depth
+              plot's axis - `axisTicks` would put four or five labels in 46
+              units, where 11-unit type collides with itself - and deliberately
+              **not** coloured after a channel: three curves in different colours
+              can share one of these rows, so numbers in any one of them would be
+              claiming the scale for that curve. The depth plot's coloured-edge
+              rule holds where it was written, on an edge one channel owns. */}
+          {placement.panels.map((axis) => {
+            const row = shown.find((channel) => channel.axis === axis);
+            if (!row) return null;
+            const suffix = axisUnitSuffix(axis, units);
+            // The domain's own ends, taken through `axisTicks` rather than
+            // read off `domain` directly: that is where the fractional-step
+            // rounding lives, and without it a ppO₂ row is labelled
+            // `1.4000000000000001`.
+            const ticks = axisTicks(row.domain);
+            const bounds = [ticks[ticks.length - 1], ticks[0]];
+
+            return (
+              <g key={axis} data-deco-panel={axis} aria-hidden>
+                {bounds.map((tick) => (
                   <line
                     key={tick}
-                    aria-hidden
                     className="text-border"
                     x1={PADDING.left}
-                    x2={WIDTH - PADDING.right}
-                    y1={leftChannel.y(tick)}
-                    y2={leftChannel.y(tick)}
+                    x2={width - PADDING.right}
+                    y1={row.y(tick)}
+                    y2={row.y(tick)}
                     stroke="currentColor"
                     strokeWidth={1}
                   />
                 ))}
-
-              {/* The primary scale, labelled in the colour of whichever channel
-              is holding it - see `leftChannel` for which one that is and why
-              it is never nothing while a curve is on the plot. */}
-              {leftChannel &&
-                axisTicks(leftChannel.domain).map((tick) => (
+                {bounds.map((tick, position) => (
                   <text
                     key={tick}
-                    aria-hidden
                     x={PADDING.left - 6}
-                    y={leftChannel.y(tick)}
+                    y={row.y(tick)}
                     textAnchor="end"
                     dominantBaseline="middle"
-                    fontSize={11}
+                    fontSize={10}
                     fill="currentColor"
-                    className={leftChannel.series.channel.colorClass}
+                    className="text-muted-foreground"
                   >
-                    {tick}
+                    {position === 0 ? `${tick}${suffix}` : tick}
                   </text>
                 ))}
+              </g>
+            );
+          })}
+
+          {elapsedTicks(
+            duration,
+            Math.min(
+              ELAPSED_TICK_TARGET,
+              labelCapacity(plotWidth, ELAPSED_LABEL_SPACING),
+            ),
+          ).map((tick) => (
+            <text
+              key={tick}
+              aria-hidden
+              x={x(tick)}
+              y={height - 8}
+              textAnchor="middle"
+              fontSize={11}
+              fill="currentColor"
+              className="text-muted-foreground"
+            >
+              {formatElapsed(tick)}
+            </text>
+          ))}
 
-              {/* The second scale, where the selection holds one - see
-              `rightChannel`. */}
-              {rightChannel &&
-                axisTicks(rightChannel.domain).map((tick) => (
-                  <text
-                    key={tick}
-                    aria-hidden
-                    x={WIDTH - PADDING.right + 6}
-                    y={rightChannel.y(tick)}
-                    textAnchor="start"
-                    dominantBaseline="middle"
-                    fontSize={11}
-                    fill="currentColor"
-                    className={rightChannel.series.channel.colorClass}
-                  >
-                    {tick}
-                  </text>
-                ))}
-
-              {/* The deco panel's rows: two rules and two numbers each, the
-              upper one carrying the unit. Deliberately thinner than the depth
-              plot's axis - `axisTicks` would put four or five labels in 46
-              units, where 11-unit type collides with itself - and deliberately
-              **not** coloured after a channel: three curves in different colours
-              can share one of these rows, so numbers in any one of them would be
-              claiming the scale for that curve. The depth plot's coloured-edge
-              rule holds where it was written, on an edge one channel owns. */}
-              {placement.panels.map((axis) => {
-                const row = shown.find((channel) => channel.axis === axis);
-                if (!row) return null;
-                const suffix = axisUnitSuffix(axis, units);
-                // The domain's own ends, taken through `axisTicks` rather than
-                // read off `domain` directly: that is where the fractional-step
-                // rounding lives, and without it a ppO₂ row is labelled
-                // `1.4000000000000001`.
-                const ticks = axisTicks(row.domain);
-                const bounds = [ticks[ticks.length - 1], ticks[0]];
-
-                return (
-                  <g key={axis} data-deco-panel={axis} aria-hidden>
-                    {bounds.map((tick) => (
-                      <line
-                        key={tick}
-                        className="text-border"
-                        x1={PADDING.left}
-                        x2={WIDTH - PADDING.right}
-                        y1={row.y(tick)}
-                        y2={row.y(tick)}
-                        stroke="currentColor"
-                        strokeWidth={1}
-                      />
-                    ))}
-                    {bounds.map((tick, position) => (
-                      <text
-                        key={tick}
-                        x={PADDING.left - 6}
-                        y={row.y(tick)}
-                        textAnchor="end"
-                        dominantBaseline="middle"
-                        fontSize={10}
-                        fill="currentColor"
-                        className="text-muted-foreground"
-                      >
-                        {position === 0 ? `${tick}${suffix}` : tick}
-                      </text>
-                    ))}
-                  </g>
-                );
-              })}
-
-              {elapsedTicks(duration).map((tick) => (
-                <text
-                  key={tick}
-                  aria-hidden
-                  x={x(tick)}
-                  y={height - 8}
-                  textAnchor="middle"
-                  fontSize={11}
-                  fill="currentColor"
-                  className="text-muted-foreground"
-                >
-                  {formatElapsed(tick)}
-                </text>
-              ))}
-
-              {/* Depth is the chart's subject, so it gets a filled area under the
+          {/* Depth is the chart's subject, so it gets a filled area under the
               curve - which also makes "which side is the water" unambiguous on
               an inverted axis - and everything else is a bare line on top. The
               fill is what marks it out, not a heavier stroke: every channel is
               drawn at the same weight. One per run, so the fill breaks wherever
               the line does. */}
-              {depthAreas.map((area, index) => (
-                <path
-                  key={index}
-                  d={area}
-                  fill="currentColor"
-                  className={`${PROFILE_CHANNELS.depth.colorClass} opacity-15`}
-                />
-              ))}
-
-              {/* Over the depth fill, not under it: the ceiling zone is a subset
+          {depthAreas.map((area, index) => (
+            <path
+              key={index}
+              d={area}
+              fill="currentColor"
+              className={`${PROFILE_CHANNELS.depth.colorClass} opacity-15`}
+            />
+          ))}
+
+          {/* Over the depth fill, not under it: the ceiling zone is a subset
               of the water column by construction - a ceiling is always
               shallower than the depth it was computed at - so underneath it
               would be invisible. Denser than depth's 15% for the same reason it
               is red: this is the one region on the chart that is a rule rather
               than a reading. */}
-              {ceilingAreas.map((area, index) => (
-                <path
+          {ceilingAreas.map((area, index) => (
+            <path
+              key={index}
+              d={area}
+              fill="currentColor"
+              className={`${PROFILE_CHANNELS.ceiling.colorClass} opacity-25`}
+            />
+          ))}
+
+          {shown.map((channel) => (
+            <g
+              key={channel.key}
+              className={channel.series.channel.colorClass}
+              clipPath={
+                channel.panelIndex >= 0
+                  ? `url(#${clipPrefix}-panel-${channel.panelIndex})`
+                  : undefined
+              }
+            >
+              {channel.segments.map((segment, index) => (
+                <polyline
                   key={index}
-                  d={area}
-                  fill="currentColor"
-                  className={`${PROFILE_CHANNELS.ceiling.colorClass} opacity-25`}
-                />
-              ))}
-
-              {shown.map((channel) => (
-                <g
-                  key={channel.key}
-                  className={channel.series.channel.colorClass}
-                  clipPath={
-                    channel.panelIndex >= 0
-                      ? `url(#${clipPrefix}-panel-${channel.panelIndex})`
-                      : undefined
+                  points={segment
+                    .map(
+                      (position) =>
+                        `${x(channel.series.t[position])},${channel.y(channel.series.values[position])}`,
+                    )
+                    .join(" ")}
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={1.5}
+                  // From the channel rather than from this line's key, so the
+                  // legend swatch below can read the same flag - see `dashed`
+                  // on `ProfileChannel` for why the dash is load-bearing.
+                  strokeDasharray={
+                    channel.series.channel.dashed ? "5 3" : undefined
                   }
-                >
-                  {channel.segments.map((segment, index) => (
-                    <polyline
-                      key={index}
-                      points={segment
-                        .map(
-                          (position) =>
-                            `${x(channel.series.t[position])},${channel.y(channel.series.values[position])}`,
-                        )
-                        .join(" ")}
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth={1.5}
-                      // From the channel rather than from this line's key, so the
-                      // legend swatch below can read the same flag - see `dashed`
-                      // on `ProfileChannel` for why the dash is load-bearing.
-                      strokeDasharray={
-                        channel.series.channel.dashed ? "5 3" : undefined
-                      }
-                      strokeLinejoin="round"
-                      strokeLinecap="round"
-                    />
-                  ))}
-                </g>
+                  strokeLinejoin="round"
+                  strokeLinecap="round"
+                />
               ))}
+            </g>
+          ))}
 
-              {/* Event markers, on the axis rather than on the depth curve, and
+          {/* Event markers, on the axis rather than on the depth curve, and
               behind a switch of their own in the legend. They are still not a
               channel - no axis, no unit, nothing to scale - and the switch does
               not make them one; what it grants is that a dive with a dozen of
               them can be read without them, which "annotations are cheap enough
               to always draw" was the wrong answer to. See `PROFILE_VIEW_KEYS`
               for why they are a separate list rather than one more channel. */}
-              {eventsShown &&
-                events.map((event, index) => (
-                  <EventMarker
-                    key={`${event.time}-${event.type}-${index}`}
-                    event={event}
-                    cx={x(event.time)}
-                    hovered={event === hoveredEvent}
-                  />
-                ))}
+          {eventsShown &&
+            events.map((event, index) => (
+              <EventMarker
+                key={`${event.time}-${event.type}-${index}`}
+                event={event}
+                cx={x(event.time)}
+                hovered={event === hoveredEvent}
+              />
+            ))}
 
-              {/* Through the deco panel as well as the depth plot: it is one
+          {/* Through the deco panel as well as the depth plot: it is one
               instant of one dive, and a crosshair that stopped at the depth
               plot's baseline would leave the diver reading a panel dot with no
               line to place it on. */}
-              {hoveredMs !== null && (
-                <line
-                  x1={x(hoveredMs)}
-                  x2={x(hoveredMs)}
-                  y1={PADDING.top}
-                  y2={chartFoot}
-                  stroke="currentColor"
-                  strokeWidth={1}
-                  className="text-muted-foreground"
-                />
-              )}
-
-              {dots.map((readout) => (
-                <circle
-                  key={readout.key}
-                  cx={x(readout.at)}
-                  cy={readout.cy}
-                  r={3.5}
-                  fill="currentColor"
-                  className={readout.channel.colorClass}
-                />
-              ))}
-
-              {/* One transparent hit target over the whole plot. The gas chart hangs
+          {hoveredMs !== null && (
+            <line
+              x1={x(hoveredMs)}
+              x2={x(hoveredMs)}
+              y1={PADDING.top}
+              y2={chartFoot}
+              stroke="currentColor"
+              strokeWidth={1}
+              className="text-muted-foreground"
+            />
+          )}
+
+          {dots.map((readout) => (
+            <circle
+              key={readout.key}
+              cx={x(readout.at)}
+              cy={readout.cy}
+              r={3.5}
+              fill="currentColor"
+              className={readout.channel.colorClass}
+            />
+          ))}
+
+          {/* One transparent hit target over the whole plot. The gas chart hangs
               its hover off per-dot `<a>` elements; a continuous line has no dots
               to hang anything off, so the analogue is a rect that turns the
               cursor's x into a time. `transparent` rather than `none` -
@@ -1126,48 +1137,45 @@ export function DiveProfileChart({ profile }: DiveProfileChartProps) {
               focus for free from the links its dots already are, and there is no
               equivalent here without inventing a focus model for a polyline. The
               `aria-label` above carries the summary instead. */}
-              <rect
-                x={PADDING.left}
-                y={PADDING.top}
-                width={PLOT_WIDTH}
-                height={chartFoot - PADDING.top}
-                fill="transparent"
-                onMouseMove={(event) => {
-                  const bounds = event.currentTarget.getBoundingClientRect();
-                  const ratio = (event.clientX - bounds.left) / bounds.width;
-                  setHoveredMs(
-                    Math.min(duration, Math.max(0, ratio * duration)),
-                  );
-                }}
-                onMouseLeave={() => setHoveredMs(null)}
-              />
-            </svg>
-
-            {hoveredMs !== null && (readouts.length > 0 || hoveredEvent) && (
-              <ProfileTooltip
-                at={hoveredMs}
-                readouts={readouts}
-                event={hoveredEvent}
-                cx={x(hoveredMs)}
-                // The box the card's percentage offsets are resolved against,
-                // which grows with the panel: a card positioned as a fraction
-                // of a height it no longer has lands somewhere else entirely.
-                chartHeight={height}
-                // The topmost of the dots being described, which is only used to
-                // decide which end of the plot the card sits at - see
-                // `tooltipVerticalAnchor`. `PLOT_BOTTOM` is the degenerate
-                // fallback for a card with no dot to hang off - an event on its
-                // own, or readings that are all off their rows' axes - which
-                // puts it at the top, clear of the marker on the baseline.
-                topmostY={
-                  dots.length > 0
-                    ? Math.min(...dots.map((readout) => readout.cy))
-                    : PLOT_BOTTOM
-                }
-              />
-            )}
-          </div>
-        </div>
+          <rect
+            x={PADDING.left}
+            y={PADDING.top}
+            width={plotWidth}
+            height={chartFoot - PADDING.top}
+            fill="transparent"
+            onMouseMove={(event) => {
+              const bounds = event.currentTarget.getBoundingClientRect();
+              const ratio = (event.clientX - bounds.left) / bounds.width;
+              setHoveredMs(Math.min(duration, Math.max(0, ratio * duration)));
+            }}
+            onMouseLeave={() => setHoveredMs(null)}
+          />
+        </svg>
+
+        {hoveredMs !== null && (readouts.length > 0 || hoveredEvent) && (
+          <ProfileTooltip
+            at={hoveredMs}
+            readouts={readouts}
+            event={hoveredEvent}
+            cx={x(hoveredMs)}
+            chartWidth={width}
+            // The box the card's percentage offsets are resolved against,
+            // which grows with the panel: a card positioned as a fraction
+            // of a height it no longer has lands somewhere else entirely.
+            chartHeight={height}
+            // The topmost of the dots being described, which is only used to
+            // decide which end of the plot the card sits at - see
+            // `tooltipVerticalAnchor`. `PLOT_BOTTOM` is the degenerate
+            // fallback for a card with no dot to hang off - an event on its
+            // own, or readings that are all off their rows' axes - which
+            // puts it at the top, clear of the marker on the baseline.
+            topmostY={
+              dots.length > 0
+                ? Math.min(...dots.map((readout) => readout.cy))
+                : PLOT_BOTTOM
+            }
+          />
+        )}
 
         {/* Switching the last channel off used to return a bare sentence in
             place of the whole chart, which collapsed the card to two lines and
@@ -1176,17 +1184,12 @@ export function DiveProfileChart({ profile }: DiveProfileChartProps) {
             the middle of it. Nothing moves, and the toggle that undid this is
             still under the cursor that clicked it.
 
-            A sibling of the scroll container rather than a child of the plot
-            box, so it centres on what the diver can see - see the note on the
-            `relative` wrapper above.
-
             Not shown while the markers are up, even with every curve hidden: the
             plot has content then, and "pick one below to plot it" printed across
             a row of markers describes a chart nobody is looking at.
 
             `pointer-events-none` so the hit target underneath still tracks the
-            crosshair, which markers are still worth hovering for - and so the
-            plot underneath can still be scrolled sideways. */}
+            crosshair, which markers are still worth hovering for. */}
         {shown.length === 0 && !eventsShown && (
           <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
             <p className="text-sm text-muted-foreground">
@@ -1395,6 +1398,7 @@ function ProfileTooltip({
   readouts,
   event,
   cx,
+  chartWidth,
   chartHeight,
   topmostY,
 }: {
@@ -1402,39 +1406,42 @@ function ProfileTooltip({
   readouts: Readout[];
   event: DiveProfileEvent | null;
   cx: number;
+  chartWidth: number;
   chartHeight: number;
   topmostY: number;
 }) {
-  // The card always lands inside the chart box, in both axes. It has to: the
-  // scroll container around it clips (setting `overflow-x` to `auto` makes
-  // `overflow-y` compute to `auto` as well), so anything hanging past an edge is
-  // cut off or adds a stray scrollbar.
+  // The card always lands inside the chart box, in both axes: past an edge it
+  // would cover whatever sits beside the chart, or on a phone scroll the page
+  // sideways.
   //
   // Vertically that is guaranteed by anchoring to the plot's own top or bottom
   // edge rather than offsetting from a data point - see `tooltipVerticalAnchor`
   // for why offsetting from a point cannot be made safe here. Horizontally the
   // card is centred on the crosshair and flips to hug whichever edge it is near,
-  // which is safe because its width is bounded by `whitespace-nowrap` on short
-  // readouts.
+  // and `useKeepInside` pulls back in whatever a phone-width chart still leaves
+  // hanging over.
+  const cardRef = useRef<HTMLDivElement>(null);
+  useKeepInside(cardRef);
   const { y, translateY } = tooltipVerticalAnchor(
     topmostY,
     PADDING.top,
     PLOT_BOTTOM,
   );
   const translateX =
-    cx < WIDTH * 0.2
+    cx < chartWidth * 0.2
       ? "-12px"
-      : cx > WIDTH * 0.8
+      : cx > chartWidth * 0.8
         ? "calc(-100% + 12px)"
         : "-50%";
 
   return (
     <div
+      ref={cardRef}
       // Never a hover target itself - it sits over the plot, and letting it take
       // the pointer would make it flicker as it steals its own trigger's hover.
       className="pointer-events-none absolute z-10 whitespace-nowrap rounded-md border border-white/10 bg-tooltip px-3 py-2 text-tooltip-foreground shadow-lg"
       style={{
-        left: `${(cx / WIDTH) * 100}%`,
+        left: `${(cx / chartWidth) * 100}%`,
         top: `${(y / chartHeight) * 100}%`,
         transform: `translate(${translateX}, ${translateY})`,
       }}
@@ -1459,8 +1466,8 @@ function ProfileTooltip({
         // `whitespace-normal` against the card's own `nowrap`, and a width to
         // wrap inside. An `other`'s text comes off the uploaded file - the only
         // free text on this chart - and while the API caps it at 120 characters,
-        // 120 characters on one line is several times the plot's width and would
-        // be clipped by the scroll container the card sits in.
+        // 120 characters on one line is several times the plot's width, far past
+        // anything `useKeepInside` can pull back.
         <div className="mt-1.5 max-w-64 whitespace-normal border-t border-white/10 pt-1.5 text-sm">
           <span className={`${glyphFor(event.type).colorClass} font-semibold`}>
             {describeEvent(event)}
diff --git a/src/components/dives/gas-use-chart.browser.test.tsx b/src/components/dives/gas-use-chart.browser.test.tsx
new file mode 100644
index 0000000..29d3ed8
--- /dev/null
+++ b/src/components/dives/gas-use-chart.browser.test.tsx
@@ -0,0 +1,105 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render } from "@testing-library/react";
+
+import { GasUseChart } from "./gas-use-chart";
+import type { DiveGasUsePoint } from "@/lib/api/dive-stats";
+import type { ChartScope } from "@/lib/chart-period";
+import { diveWallClockTime } from "@/lib/date-time";
+import {
+  overlappingLabels,
+  sidewaysScrollers,
+  withinSides,
+} from "@/test/chart-layout";
+
+// Load-bearing, as in `dive-profile-chart.browser.test.tsx`, whose first test
+// fails without it: without the app's Tailwind a `min-w-*` class computes to
+// nothing, so a chart wider than its container would pass everything below.
+import "@/app/globals.css";
+
+vi.mock("@/contexts/AuthContext", () => ({
+  useAuth: () => ({ user: { uuid: "user-1", units: "metric" } }),
+}));
+
+function point(startTime: string, index: number): DiveGasUsePoint {
+  return {
+    dive_uuid: `d${index}`,
+    dive_number: index + 1,
+    start_time: startTime,
+    avg_depth: 18.4,
+    gas_use: { gas_used: 1520.7, rmv: 12 + (index % 7), sac_bar_per_min: 0.93 },
+  } as DiveGasUsePoint;
+}
+
+// A June dive every year from 2002, then one a month through 2025 and a run of
+// them in August: the most year labels the "all" axis has to thin, all twelve
+// months, and a month with dots at both ends.
+const POINTS = [
+  ...Array.from({ length: 23 }, (_, index) => `${2002 + index}-06-15`),
+  ...Array.from(
+    { length: 12 },
+    (_, month) => `2025-${String(month + 1).padStart(2, "0")}-10`,
+  ),
+  "2025-08-01",
+  "2025-08-31",
+  "2026-03-02",
+]
+  .sort()
+  .map((day, index) => point(`${day}T10:00:00+02:00`, index));
+
+const ANCHOR = diveWallClockTime("2025-08-10T10:00:00+02:00");
+
+// The chart's width on the dashboard at a 375 px and a 320 px viewport, and at
+// 1024 px.
+const WIDTHS = { phone: 293, smallPhone: 238, desktop: 910 };
+const SCOPES: ChartScope[] = ["all", "year", "month"];
+
+const CASES = Object.entries(WIDTHS).flatMap(([name, width]) =>
+  SCOPES.map((scope) => [name, scope, width] as const),
+);
+
+function renderAt(width: number, scope: ChartScope) {
+  const { container } = render(
+    <div style={{ width }}>
+      <GasUseChart points={POINTS} scope={scope} anchor={ANCHOR} />
+    </div>,
+  );
+  const frame = container.firstElementChild as HTMLElement;
+  const svg = frame.querySelector("svg") as SVGSVGElement;
+  return { frame, svg };
+}
+
+describe("the gas consumption chart's layout", () => {
+  it.each(CASES)(
+    "draws no label over another at %s width, scope %s",
+    (_, scope, width) => {
+      const { svg } = renderAt(width, scope);
+
+      expect(overlappingLabels(svg)).toEqual([]);
+    },
+  );
+
+  it.each(CASES)(
+    "fits %s width without scrolling sideways, scope %s",
+    (_, scope, width) => {
+      const { frame, svg } = renderAt(width, scope);
+
+      expect(sidewaysScrollers(svg, frame)).toEqual([]);
+    },
+  );
+
+  it.each(SCOPES)(
+    "keeps the hover card inside a phone-width chart, scope %s",
+    (scope) => {
+      const { frame, svg } = renderAt(WIDTHS.smallPhone, scope);
+      const dots = [...svg.querySelectorAll("a")];
+
+      for (const dot of [dots[0], dots[dots.length - 1]]) {
+        fireEvent.mouseEnter(dot);
+        const card = frame.querySelector('[role="presentation"]') as Element;
+
+        expect(withinSides(card, frame)).toBe(true);
+        fireEvent.mouseLeave(dot);
+      }
+    },
+  );
+});
diff --git a/src/components/dives/gas-use-chart.tsx b/src/components/dives/gas-use-chart.tsx
index 0072596..50f43a7 100644
--- a/src/components/dives/gas-use-chart.tsx
+++ b/src/components/dives/gas-use-chart.tsx
@@ -1,6 +1,12 @@
 "use client";
 
-import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
 import type { DiveGasUsePoint } from "@/lib/api/dive-stats";
 import {
   type GasUseMark,
@@ -14,7 +20,7 @@ import {
   trendWindow,
 } from "@/lib/dive-gas";
 import type { ChartScope } from "@/lib/chart-period";
-import { axisTicks, niceDomain } from "@/lib/chart-scale";
+import { axisTicks, labelCapacity, niceDomain } from "@/lib/chart-scale";
 import { smoothBandPath, smoothPath } from "@/lib/chart-path";
 import {
   GAS_USE_SERIES_KEY,
@@ -26,6 +32,8 @@ import {
 } from "@/lib/chart-series-view";
 import { diveWallClockTime, formatDiveDateTime } from "@/lib/date-time";
 import { cn } from "@/lib/utils";
+import { useChartWidth } from "@/hooks/useChartWidth";
+import { useKeepInside } from "@/hooks/useKeepInside";
 import { useUnits } from "@/hooks/useUnits";
 import {
   displayNumber,
@@ -56,18 +64,22 @@ import {
 // mid grey in dark - which left the trend line barely visible on a dark card.
 
 // The viewBox coordinate space. Not pixels: the SVG scales to its container, so
-// these are only ever ratios to each other.
+// these are only ever ratios to each other. This is the design width; a phone
+// draws into a narrower one (see `useChartWidth`).
 const WIDTH = 720;
 const HEIGHT = 240;
 const PADDING = { top: 12, right: 14, bottom: 28, left: 42 };
 
-const PLOT_WIDTH = WIDTH - PADDING.left - PADDING.right;
 const PLOT_HEIGHT = HEIGHT - PADDING.top - PADDING.bottom;
 
-// How many year labels the "all" scope's axis will carry before it starts
-// skipping them. Twelve four-digit labels across a 720-unit viewBox leaves room
-// either side of each; twenty-five would collide.
-const MAX_YEAR_LABELS = 12;
+// The room each x label gets before the axis starts skipping them, in viewBox
+// units. A year's label sits at the centre of the part of that year the chart
+// plots, so a career starting in December crowds its first two; they get about
+// twice a 27-unit year's width, which is twelve across the design width. Months
+// are one per evenly spaced slot and need only a 22-unit "May" plus air, which
+// the design width always has.
+const YEAR_LABEL_SPACING = 55;
+const MONTH_LABEL_SPACING = 26;
 
 const MONTH_LABELS = [
   "Jan",
@@ -110,6 +122,8 @@ export function GasUseChart({ points, scope, anchor }: GasUseChartProps) {
   // dot and the tooltip can't disagree the way a CSS `:hover` and React state
   // would.
   const [hovered, setHovered] = useState<number | null>(null);
+  const [chartRef, width] = useChartWidth(WIDTH);
+  const plotWidth = width - PADDING.left - PADDING.right;
 
   // Which marks the diver picked in *this* visit, and null until they pick -
   // which is what leaves room for the remembered selection underneath. Exactly
@@ -211,7 +225,7 @@ export function GasUseChart({ points, scope, anchor }: GasUseChartProps) {
   // stretched across the full width as though it were the whole year.
   const x = (time: number) =>
     PADDING.left +
-    ((time - range.start) / (range.end - range.start || 1)) * PLOT_WIDTH;
+    ((time - range.start) / (range.end - range.start || 1)) * plotWidth;
   const y = (rmv: number) =>
     PADDING.top +
     (1 - (rmv - domain.min) / (domain.max - domain.min)) * PLOT_HEIGHT;
@@ -271,7 +285,7 @@ export function GasUseChart({ points, scope, anchor }: GasUseChartProps) {
     };
   });
 
-  const xTicks = buildXTicks(scope, range);
+  const xTicks = buildXTicks(scope, range, plotWidth);
   const bands = bandRanges(scope, range);
 
   // Cleared when the window changes out from under a hovered dot - paging from
@@ -302,18 +316,12 @@ export function GasUseChart({ points, scope, anchor }: GasUseChartProps) {
 
   return (
     <div>
-      {/* Wide content scrolls in its own container rather than shrinking the
-          whole chart to phone width, where the axis labels would become
-          unreadable - same treatment the gas mixtures table gets on the dive
-          detail page. The legend deliberately sits *outside* it: it's text, so
-          it should wrap to the screen rather than scroll sideways with the plot,
-          and on a phone the container's own horizontal scrollbar is drawn across
-          the bottom of whatever it contains - straight through the legend. */}
-      <div className="overflow-x-auto">
-        {/* Sized to exactly the chart, and the positioning context the
-            tooltip's percentage offsets are resolved against. */}
-        <div className="relative min-w-[560px]">
-          {/* `group`, not `img`. Every dot here is a link to its dive, and
+      {/* Sized to exactly the chart, and the positioning context the tooltip's
+          percentage offsets are resolved against. It never scrolls:
+          `useChartWidth` narrows the viewBox to fit a phone instead. The legend
+          sits outside it, as text that wraps to the screen. */}
+      <div ref={chartRef} className="relative">
+        {/* `group`, not `img`. Every dot here is a link to its dive, and
               `img` declares that the whole plot is one picture. The links do
               survive it - WAI-ARIA exempts focusable descendants from
               presentational inheritance, and Chrome's tree shows them - but a
@@ -322,191 +330,191 @@ export function GasUseChart({ points, scope, anchor }: GasUseChartProps) {
               container's name and leaves the dives reachable both by tabbing
               and by browsing. The dive profile chart keeps `img`, correctly:
               it is a picture, with nothing interactive inside it. */}
-          <svg
-            viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
-            className="w-full h-auto"
-            role="group"
-            aria-label={describeSeries(visible.length, meanRmv, units)}
-          >
-            {/* Alternating months (or years) behind the plot - the chart's
+        <svg
+          viewBox={`0 0 ${width} ${HEIGHT}`}
+          className="w-full h-auto"
+          role="group"
+          aria-label={describeSeries(visible.length, meanRmv, units)}
+        >
+          {/* Alternating months (or years) behind the plot - the chart's
                 only vertical structure, and what lets a cluster of dots be
                 placed in the year without tracing down to the axis. First, so
                 everything else draws over it. */}
-            {bands.map((band) => (
-              <rect
-                key={band.start}
-                x={x(band.start)}
-                y={PADDING.top}
-                width={x(band.end) - x(band.start)}
-                height={PLOT_HEIGHT}
-                fill="currentColor"
-                className="text-muted"
-              />
-            ))}
+          {bands.map((band) => (
+            <rect
+              key={band.start}
+              x={x(band.start)}
+              y={PADDING.top}
+              width={x(band.end) - x(band.start)}
+              height={PLOT_HEIGHT}
+              fill="currentColor"
+              className="text-muted"
+            />
+          ))}
 
-            {/* Gridlines and the y scale. `currentColor` throughout, so
+          {/* Gridlines and the y scale. `currentColor` throughout, so
                 light/dark mode is inherited from the surrounding text colors
                 rather than hardcoded per theme. Dashed, and only these: with a
                 month band, a spread band, a reference line and a trend all
                 sharing the plot, solid rules across it competed with the data
                 instead of supporting it. */}
-            {axisTicks(domain).map((tick) => (
-              // `aria-hidden`, here and on the x labels below: the axis is a
-              // reading aid for the eye, and a screen reader walking the group
-              // should reach the dives, not twelve unlabelled numbers and the
-              // months they sit under first. The summary on the group and each
-              // dot's own label carry everything these say.
-              <g key={tick} aria-hidden className="text-border">
-                <line
-                  x1={PADDING.left}
-                  x2={WIDTH - PADDING.right}
-                  y1={y(tick)}
-                  y2={y(tick)}
-                  stroke="currentColor"
-                  strokeWidth={1}
-                  strokeDasharray="2 4"
-                />
-                <text
-                  x={PADDING.left - 8}
-                  y={y(tick)}
-                  textAnchor="end"
-                  dominantBaseline="middle"
-                  fontSize={11}
-                  fill="currentColor"
-                  className="text-muted-foreground"
-                >
-                  {tick}
-                </text>
-              </g>
-            ))}
+          {axisTicks(domain).map((tick) => (
+            // `aria-hidden`, here and on the x labels below: the axis is a
+            // reading aid for the eye, and a screen reader walking the group
+            // should reach the dives, not twelve unlabelled numbers and the
+            // months they sit under first. The summary on the group and each
+            // dot's own label carry everything these say.
+            <g key={tick} aria-hidden className="text-border">
+              <line
+                x1={PADDING.left}
+                x2={width - PADDING.right}
+                y1={y(tick)}
+                y2={y(tick)}
+                stroke="currentColor"
+                strokeWidth={1}
+                strokeDasharray="2 4"
+              />
+              <text
+                x={PADDING.left - 8}
+                y={y(tick)}
+                textAnchor="end"
+                dominantBaseline="middle"
+                fontSize={11}
+                fill="currentColor"
+                className="text-muted-foreground"
+              >
+                {tick}
+              </text>
+            </g>
+          ))}
 
-            {/* The one solid rule, closing the plot along the bottom. It sits
+          {/* The one solid rule, closing the plot along the bottom. It sits
                 on the lowest gridline, which is the axis - dashed, it read as
                 another gridline and the plot had no floor. */}
+          <line
+            x1={PADDING.left}
+            x2={width - PADDING.right}
+            y1={PADDING.top + PLOT_HEIGHT}
+            y2={PADDING.top + PLOT_HEIGHT}
+            stroke="currentColor"
+            strokeWidth={1}
+            className="text-border"
+          />
+
+          {xTicks.map(({ label, time }) => (
+            <text
+              key={label}
+              aria-hidden
+              x={x(time)}
+              y={HEIGHT - 8}
+              textAnchor="middle"
+              fontSize={11}
+              fill="currentColor"
+              className="text-muted-foreground"
+            >
+              {label}
+            </text>
+          ))}
+
+          {/* The career average. A longer dash than the gridlines and a
+                darker token, so it reads as a statement about the data rather
+                than as part of the scale. */}
+          {marks.includes("average") && (
             <line
               x1={PADDING.left}
-              x2={WIDTH - PADDING.right}
-              y1={PADDING.top + PLOT_HEIGHT}
-              y2={PADDING.top + PLOT_HEIGHT}
+              x2={width - PADDING.right}
+              y1={y(allTimeMean)}
+              y2={y(allTimeMean)}
               stroke="currentColor"
-              strokeWidth={1}
-              className="text-border"
+              strokeWidth={1.5}
+              strokeDasharray="7 5"
+              className="text-muted-foreground opacity-70"
             />
+          )}
 
-            {xTicks.map(({ label, time }) => (
-              <text
-                key={label}
-                aria-hidden
-                x={x(time)}
-                y={HEIGHT - 8}
-                textAnchor="middle"
-                fontSize={11}
+          {/* The spread band, then the trend, then the dots on top - back to
+                front. The band is what a bare line was missing: it gives
+                the trend body, and it says how tightly the dives it averages
+                were clustered, which is most of what improving actually looks
+                like. */}
+          {trendSegments
+            .filter((segment) => segment.band)
+            .map((segment, index) => (
+              <path
+                key={index}
+                d={segment.band}
                 fill="currentColor"
-                className="text-muted-foreground"
-              >
-                {label}
-              </text>
+                stroke="none"
+                className="text-coral opacity-15"
+              />
             ))}
 
-            {/* The career average. A longer dash than the gridlines and a
-                darker token, so it reads as a statement about the data rather
-                than as part of the scale. */}
-            {marks.includes("average") && (
-              <line
-                x1={PADDING.left}
-                x2={WIDTH - PADDING.right}
-                y1={y(allTimeMean)}
-                y2={y(allTimeMean)}
+          {showTrend &&
+            trendSegments.map((segment, index) => (
+              <path
+                key={index}
+                d={segment.line}
+                fill="none"
                 stroke="currentColor"
                 strokeWidth={1.5}
-                strokeDasharray="7 5"
-                className="text-muted-foreground opacity-70"
+                strokeLinecap="round"
+                className="text-coral"
               />
-            )}
+            ))}
 
-            {/* The spread band, then the trend, then the dots on top - back to
-                front. The band is what a bare line was missing: it gives
-                the trend body, and it says how tightly the dives it averages
-                were clustered, which is most of what improving actually looks
-                like. */}
-            {trendSegments
-              .filter((segment) => segment.band)
-              .map((segment, index) => (
-                <path
-                  key={index}
-                  d={segment.band}
+          {marks.includes("dives") &&
+            visible.map(({ point, index }) => (
+              // A plain SVG `<a>`, not `next/link`: this is inside the SVG
+              // namespace, and an anchor here still gets focus, middle-click and
+              // open-in-new-tab for free. `aria-label` carries what the `<title>`
+              // element used to - the tooltip below is a visual affordance and says
+              // nothing to a screen reader.
+              <a
+                key={point.dive_uuid}
+                href={`/dives/${point.dive_uuid}`}
+                aria-label={describePoint(point, units)}
+                onMouseEnter={() => setHovered(index)}
+                onMouseLeave={() => setHovered(null)}
+                // Keyboard focus opens the tooltip too, so tabbing through the
+                // series reads the same as hovering it.
+                onFocus={() => setHovered(index)}
+                onBlur={() => setHovered(null)}
+              >
+                {/* Faded by default so overlapping dots read as density rather than
+                a solid band, and lit up when it's the one being described. */}
+                <circle
+                  cx={x(times[index])}
+                  cy={y(displayRmv(point.gas_use.rmv))}
+                  r={hovered === index ? 5 : scope === "all" ? 2.5 : 3.5}
                   fill="currentColor"
-                  stroke="none"
-                  className="text-coral opacity-15"
-                />
-              ))}
-
-            {showTrend &&
-              trendSegments.map((segment, index) => (
-                <path
-                  key={index}
-                  d={segment.line}
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth={1.5}
-                  strokeLinecap="round"
-                  className="text-coral"
+                  className={cn(
+                    "text-teal transition-all",
+                    hovered === index ? "opacity-100" : "opacity-45",
+                  )}
                 />
-              ))}
-
-            {marks.includes("dives") &&
-              visible.map(({ point, index }) => (
-                // A plain SVG `<a>`, not `next/link`: this is inside the SVG
-                // namespace, and an anchor here still gets focus, middle-click and
-                // open-in-new-tab for free. `aria-label` carries what the `<title>`
-                // element used to - the tooltip below is a visual affordance and says
-                // nothing to a screen reader.
-                <a
-                  key={point.dive_uuid}
-                  href={`/dives/${point.dive_uuid}`}
-                  aria-label={describePoint(point, units)}
-                  onMouseEnter={() => setHovered(index)}
-                  onMouseLeave={() => setHovered(null)}
-                  // Keyboard focus opens the tooltip too, so tabbing through the
-                  // series reads the same as hovering it.
-                  onFocus={() => setHovered(index)}
-                  onBlur={() => setHovered(null)}
-                >
-                  {/* Faded by default so overlapping dots read as density rather than
-                a solid band, and lit up when it's the one being described. */}
-                  <circle
-                    cx={x(times[index])}
-                    cy={y(displayRmv(point.gas_use.rmv))}
-                    r={hovered === index ? 5 : scope === "all" ? 2.5 : 3.5}
-                    fill="currentColor"
-                    className={cn(
-                      "text-teal transition-all",
-                      hovered === index ? "opacity-100" : "opacity-45",
-                    )}
-                  />
-                  {/* An invisible, larger hit target. A 2.5-unit dot is a ~4px target
+                {/* An invisible, larger hit target. A 2.5-unit dot is a ~4px target
                 on screen, which is a fiddly thing to hover deliberately.
                 `transparent` rather than `none` - `fill="none"` takes no
                 pointer events at all, which is the opposite of the point. */}
-                  <circle
-                    cx={x(times[index])}
-                    cy={y(displayRmv(point.gas_use.rmv))}
-                    r={7}
-                    fill="transparent"
-                  />
-                </a>
-              ))}
-          </svg>
-
-          {hoveredPoint && (
-            <GasUseTooltip
-              point={hoveredPoint}
-              cx={x(times[hoveredIndex])}
-              cy={y(displayRmv(hoveredPoint.gas_use.rmv))}
-              units={units}
-            />
-          )}
-        </div>
+                <circle
+                  cx={x(times[index])}
+                  cy={y(displayRmv(point.gas_use.rmv))}
+                  r={7}
+                  fill="transparent"
+                />
+              </a>
+            ))}
+        </svg>
+
+        {hoveredPoint && (
+          <GasUseTooltip
+            point={hoveredPoint}
+            cx={x(times[hoveredIndex])}
+            cy={y(displayRmv(hoveredPoint.gas_use.rmv))}
+            chartWidth={width}
+            units={units}
+          />
+        )}
       </div>
 
       <GasUseLegend
@@ -665,28 +673,32 @@ function GasUseTooltip({
   point,
   cx,
   cy,
+  chartWidth,
   units,
 }: {
   point: DiveGasUsePoint;
   cx: number;
   cy: number;
+  chartWidth: number;
   units: UnitSystem;
 }) {
-  // Flipped and nudged so the card always lands inside the chart box. It has to:
-  // the scroll container around it clips (setting `overflow-x` to `auto` makes
-  // `overflow-y` compute to `auto` as well), so anything hanging past the top
-  // edge would be cut off or add a stray scrollbar.
+  // Flipped and nudged so the card lands inside the chart box rather than over
+  // the card's header or, on a phone, past the screen's edge. `useKeepInside`
+  // pulls back in whatever a phone-width chart still leaves hanging over.
+  const cardRef = useRef<HTMLDivElement>(null);
+  useKeepInside(cardRef);
   const below = cy < HEIGHT * 0.35;
   const translateY = below ? "12px" : "calc(-100% - 12px)";
   const translateX =
-    cx < WIDTH * 0.18
+    cx < chartWidth * 0.18
       ? "-12px"
-      : cx > WIDTH * 0.82
+      : cx > chartWidth * 0.82
         ? "calc(-100% + 12px)"
         : "-50%";
 
   return (
     <div
+      ref={cardRef}
       // Never a hover target itself - it sits over the dots, and letting it take
       // the pointer would make it flicker as it steals its own trigger's hover.
       // `bg-tooltip`, not `bg-popover`: popover is the *same* color as the card
@@ -697,7 +709,7 @@ function GasUseTooltip({
       // color disappears in light mode and merges with it in dark.
       className="pointer-events-none absolute z-10 whitespace-nowrap rounded-md border border-white/10 bg-tooltip px-3 py-2 text-tooltip-foreground shadow-lg"
       style={{
-        left: `${(cx / WIDTH) * 100}%`,
+        left: `${(cx / chartWidth) * 100}%`,
         top: `${(cy / HEIGHT) * 100}%`,
         transform: `translate(${translateX}, ${translateY})`,
       }}
@@ -801,6 +813,7 @@ function describePoint(point: DiveGasUsePoint, units: UnitSystem): string {
 function buildXTicks(
   scope: ChartScope,
   range: { start: number; end: number },
+  plotWidth: number,
 ): { label: string; time: number }[] {
   if (scope === "month") {
     const year = new Date(range.start).getUTCFullYear();
@@ -814,12 +827,17 @@ function buildXTicks(
 
   if (scope === "year") {
     const year = new Date(range.start).getUTCFullYear();
+    const stride = Math.ceil(
+      MONTH_LABELS.length / labelCapacity(plotWidth, MONTH_LABEL_SPACING),
+    );
     // Centred in the month rather than pinned to its first day, so each label
-    // sits under the band it names instead of on the seam between two.
+    // sits under the band it names instead of on the seam between two. Thinned
+    // from December back, as the activity chart below it thins, so the two
+    // stacked axes label the same months.
     return MONTH_LABELS.map((label, month) => ({
       label,
       time: (Date.UTC(year, month, 1) + Date.UTC(year, month + 1, 1)) / 2,
-    }));
+    })).filter((_, month) => (MONTH_LABELS.length - 1 - month) % stride === 0);
   }
 
   // Whole series: one label per calendar year it spans, centred in the part of
@@ -835,7 +853,9 @@ function buildXTicks(
 
   // A long enough career runs the labels into each other, so thin them evenly
   // rather than letting them overlap.
-  const stride = Math.ceil(years.length / MAX_YEAR_LABELS);
+  const stride = Math.ceil(
+    years.length / labelCapacity(plotWidth, YEAR_LABEL_SPACING),
+  );
 
   return years
     .filter((_, index) => index % stride === 0)
diff --git a/src/hooks/useChartWidth.ts b/src/hooks/useChartWidth.ts
new file mode 100644
index 0000000..4024834
--- /dev/null
+++ b/src/hooks/useChartWidth.ts
@@ -0,0 +1,40 @@
+"use client";
+
+import { type RefCallback, useCallback, useState } from "react";
+import { fittedChartWidth } from "@/lib/chart-scale";
+
+/**
+ * The viewBox width for a chart designed `width` units wide, fitted to the
+ * element the returned ref is on - see `fittedChartWidth` for the rule.
+ *
+ * Read as the ref attaches, which is during commit, so the first paint already
+ * draws at the fitted width instead of flashing the design width at phone size;
+ * a `ResizeObserver` follows the element after that. `offsetWidth` in both
+ * places, so the two readings of one layout agree and cost no second render.
+ *
+ * @example
+ * const [chartRef, chartWidth] = useChartWidth(720);
+ * return (
+ *   <div ref={chartRef}>
+ *     <svg viewBox={`0 0 ${chartWidth} 240`} className="w-full h-auto" />
+ *   </div>
+ * );
+ */
+export function useChartWidth(
+  width: number,
+): [RefCallback<HTMLElement>, number] {
+  const [containerPx, setContainerPx] = useState<number | null>(null);
+
+  const ref = useCallback((element: HTMLElement | null) => {
+    if (!element) return;
+
+    setContainerPx(element.offsetWidth);
+    const observer = new ResizeObserver(() =>
+      setContainerPx(element.offsetWidth),
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+
+  return [ref, fittedChartWidth(width, containerPx)];
+}
diff --git a/src/hooks/useKeepInside.ts b/src/hooks/useKeepInside.ts
new file mode 100644
index 0000000..48f2067
--- /dev/null
+++ b/src/hooks/useKeepInside.ts
@@ -0,0 +1,38 @@
+"use client";
+
+import { type RefObject, useLayoutEffect } from "react";
+
+/**
+ * Nudges an absolutely positioned element sideways, after every render and
+ * before paint, so it stays inside the box it is positioned against (its
+ * `offsetParent`). One wider than that box is aligned to its left edge.
+ *
+ * For the charts' hover cards, which are placed at the point they describe and
+ * are as wide as what they say. At phone width a card near either edge would
+ * otherwise hang past the chart and scroll the page sideways.
+ *
+ * Written to the `translate` property, which composes with the `transform` the
+ * card's own placement sets instead of replacing it, and which React leaves
+ * alone because no `style` prop names it.
+ *
+ * @example
+ * const cardRef = useRef<HTMLDivElement>(null);
+ * useKeepInside(cardRef);
+ * return <div ref={cardRef} className="absolute" style={{ left: "90%" }} />;
+ */
+export function useKeepInside(ref: RefObject<HTMLElement | null>): void {
+  useLayoutEffect(() => {
+    const element = ref.current;
+    const frame = element?.offsetParent;
+    if (!element || !frame) return;
+
+    element.style.translate = "";
+    const outer = frame.getBoundingClientRect();
+    const inner = element.getBoundingClientRect();
+    const shift = Math.max(
+      outer.left - inner.left,
+      Math.min(0, outer.right - inner.right),
+    );
+    if (shift !== 0) element.style.translate = `${shift}px`;
+  });
+}
diff --git a/src/lib/chart-scale.test.ts b/src/lib/chart-scale.test.ts
index 13bc5af..205abad 100644
--- a/src/lib/chart-scale.test.ts
+++ b/src/lib/chart-scale.test.ts
@@ -1,5 +1,12 @@
 import { describe, expect, it } from "vitest";
-import { axisTicks, countDomain, niceDomain } from "@/lib/chart-scale";
+import {
+  CHART_FULL_WIDTH_PX,
+  axisTicks,
+  countDomain,
+  fittedChartWidth,
+  labelCapacity,
+  niceDomain,
+} from "@/lib/chart-scale";
 
 // Moved verbatim from `dive-gas.test.ts` along with the functions themselves;
 // the examples are still phrased in RMV because that is the series they were
@@ -96,3 +103,32 @@ describe("countDomain", () => {
     expect(countDomain(0)).toEqual({ min: 0, max: 1, step: 1 });
   });
 });
+
+describe("fittedChartWidth", () => {
+  it("keeps the design width from the full-width container up", () => {
+    expect(fittedChartWidth(720, CHART_FULL_WIDTH_PX)).toBe(720);
+    expect(fittedChartWidth(720, 1100)).toBe(720);
+  });
+
+  it("narrows in step with a narrower container, so the scale holds", () => {
+    // A 375px phone's card leaves the chart 293px.
+    const width = fittedChartWidth(720, 293);
+
+    expect(293 / width).toBeCloseTo(CHART_FULL_WIDTH_PX / 720);
+  });
+
+  it("uses the design width for a container it has not measured", () => {
+    expect(fittedChartWidth(720, null)).toBe(720);
+    expect(fittedChartWidth(720, 0)).toBe(720);
+  });
+});
+
+describe("labelCapacity", () => {
+  it("counts whole labels only", () => {
+    expect(labelCapacity(664, 33)).toBe(20);
+  });
+
+  it("never offers fewer than one", () => {
+    expect(labelCapacity(10, 33)).toBe(1);
+  });
+});
diff --git a/src/lib/chart-scale.ts b/src/lib/chart-scale.ts
index f8f72f7..d7744dd 100644
--- a/src/lib/chart-scale.ts
+++ b/src/lib/chart-scale.ts
@@ -101,6 +101,32 @@ export function countDomain(highest: number, targetTicks = 5): Domain {
   return { min: 0, max: top, step: top };
 }
 
+// The narrowest container, in CSS pixels, a chart is drawn into at its full
+// viewBox width. Its 11-unit axis type renders at 8.6px there, the smallest these
+// charts draw it.
+export const CHART_FULL_WIDTH_PX = 560;
+
+// The viewBox width for a chart designed `width` units wide, in a container
+// `containerPx` wide. From `CHART_FULL_WIDTH_PX` up it is the design width, so a
+// desktop layout draws exactly as designed. Below it the viewBox narrows in step
+// with the container, which keeps the scale - and so the type size - the chart
+// has at that width: a phone gets a narrower plot, not smaller labels and not a
+// scrollbar. Unmeasured (`null` or `0`, which is also what jsdom reports) gets
+// the design width.
+export function fittedChartWidth(
+  width: number,
+  containerPx: number | null,
+): number {
+  if (!containerPx || containerPx >= CHART_FULL_WIDTH_PX) return width;
+  return (width * containerPx) / CHART_FULL_WIDTH_PX;
+}
+
+// How many labels fit along `plotWidth` viewBox units when each needs `spacing`
+// of them, never fewer than one.
+export function labelCapacity(plotWidth: number, spacing: number): number {
+  return Math.max(1, Math.floor(plotWidth / spacing));
+}
+
 // The gridline values for a domain, inclusive of both ends. Built by counting
 // steps rather than by accumulating `+= step`, which drifts on fractional steps
 // (0.1 + 0.2 territory) and produces labels like "12.499999999999998".
diff --git a/src/lib/dive-profile.test.ts b/src/lib/dive-profile.test.ts
index 965ba55..ef946ce 100644
--- a/src/lib/dive-profile.test.ts
+++ b/src/lib/dive-profile.test.ts
@@ -709,6 +709,13 @@ describe("elapsedTicks", () => {
   it("survives a zero-length profile", () => {
     expect(elapsedTicks(0)).toEqual([0]);
   });
+
+  it("holds a short axis's target past the longest candidate step", () => {
+    // Twelve hours on a phone's four: the two-hour step would draw seven.
+    expect(elapsedTicks(720 * MINUTE, 4)).toEqual(
+      [0, 240, 480, 720].map((minutes) => minutes * MINUTE),
+    );
+  });
 });
 
 describe("formatElapsed", () => {
diff --git a/src/lib/dive-profile.ts b/src/lib/dive-profile.ts
index 9cd2b81..db518c0 100644
--- a/src/lib/dive-profile.ts
+++ b/src/lib/dive-profile.ts
@@ -1000,15 +1000,24 @@ const ELAPSED_STEPS_MS = [1, 2, 5, 10, 15, 30, 60, 120].map(
   (minutes) => minutes * 60 * MILLISECONDS_PER_SECOND,
 );
 
+// How many elapsed-time steps the axis aims for at the chart's design width.
+export const ELAPSED_TICK_TARGET = 6;
+
 // The elapsed-time gridlines for a profile spanning `durationMs`, in
 // milliseconds, starting at 0 and never running past the end of the dive.
-export function elapsedTicks(durationMs: number, targetTicks = 6): number[] {
+export function elapsedTicks(
+  durationMs: number,
+  targetTicks = ELAPSED_TICK_TARGET,
+): number[] {
   if (durationMs <= 0) return [0];
 
-  const step =
+  let step =
     ELAPSED_STEPS_MS.find(
       (candidate) => durationMs / candidate <= targetTicks,
     ) ?? ELAPSED_STEPS_MS[ELAPSED_STEPS_MS.length - 1];
+  // Past the last candidate, a recording long enough to outrun it - or a phone
+  // asking for fewer ticks - keeps doubling it, so the target still holds.
+  while (durationMs / step > targetTicks) step *= 2;
 
   const ticks: number[] = [];
   for (let time = 0; time <= durationMs; time += step) {
@@ -1032,9 +1041,9 @@ export function elapsedTicks(durationMs: number, targetTicks = 6): number[] {
 //     card is, and here you don't: its height depends on how many channels the
 //     dive recorded, and the SVG scales to its container while the card's text
 //     does not. A fixed "flip above the point when it's in the top third" rule
-//     put the card 11 px past the top edge of a scroll container that clips
-//     (`overflow-x: auto` computes `overflow-y` to `auto` too), so it was cut
-//     off. Anchoring to an edge is correct for *any* card height and any scale.
+//     put the card 11 px past the top edge of the chart, over whatever sits
+//     above it. Anchoring to an edge is correct for *any* card height and any
+//     scale.
 //
 // The card moves to the bottom when the topmost dot is high in the plot, so it
 // doesn't cover the readings it is describing.
diff --git a/src/test/chart-layout.ts b/src/test/chart-layout.ts
new file mode 100644
index 0000000..5dcf8ae
--- /dev/null
+++ b/src/test/chart-layout.ts
@@ -0,0 +1,45 @@
+// Layout checks for the hand-rolled SVG charts, for the browser lane only. jsdom
+// lays nothing out, so both come back empty there whatever the markup is.
+
+// Every pair of `<text>` elements in `svg` whose rendered boxes intersect,
+// named by what they say.
+export function overlappingLabels(svg: SVGSVGElement): string[] {
+  const labels = [...svg.querySelectorAll("text")].map((text) => ({
+    text: text.textContent ?? "",
+    box: text.getBoundingClientRect(),
+  }));
+
+  return labels.flatMap((a, index) =>
+    labels
+      .slice(index + 1)
+      .filter(
+        (b) =>
+          a.box.left < b.box.right &&
+          b.box.left < a.box.right &&
+          a.box.top < b.box.bottom &&
+          b.box.top < a.box.bottom,
+      )
+      .map((b) => `${a.text} / ${b.text}`),
+  );
+}
+
+// Every element from `element`'s parent up to and including `root` that is
+// wider inside than out - that is, that scrolls sideways.
+export function sidewaysScrollers(element: Element, root: Element): string[] {
+  const found: string[] = [];
+  for (let node = element.parentElement; node; node = node.parentElement) {
+    if (node.scrollWidth > node.clientWidth) {
+      found.push(`${node.className} ${node.scrollWidth} > ${node.clientWidth}`);
+    }
+    if (node === root) break;
+  }
+  return found;
+}
+
+// Whether `inner`'s box lies within `outer`'s left and right edges, to within
+// half a pixel of rounding.
+export function withinSides(inner: Element, outer: Element): boolean {
+  const a = inner.getBoundingClientRect();
+  const b = outer.getBoundingClientRect();
+  return a.left >= b.left - 0.5 && a.right <= b.right + 0.5;
+}