diff --git a/src/components/timeline/__tests__/timeline-components.test.tsx b/src/components/timeline/__tests__/timeline-components.test.tsx
index d4a484f7f..e2542bc63 100644
--- a/src/components/timeline/__tests__/timeline-components.test.tsx
+++ b/src/components/timeline/__tests__/timeline-components.test.tsx
@@ -551,6 +551,43 @@ describe("value line colours", () => {
     expect(text(html)).toBe("129/82 mmHg, 82,6 kg");
     expect(html).toContain('class="sr-only">, </span>');
   });
+
+  it("keeps each dot and its value in one unit that never breaks", () => {
+    const html = render(
+      <MeanPartsLine
+        lead="Ø"
+        parts={[
+          { key: "BLOOD_PRESSURE_SYS", text: "129/82 mmHg" },
+          { key: "WEIGHT", text: "82,6 kg" },
+          { key: "STRAIN", text: "Daily strain with a very long name 12" },
+        ]}
+        seriesColor={seriesColor}
+      />,
+    );
+    // Each unit opens with its own tag; everything up to the next unit's tag
+    // (the lead, the dot, the value) is inside it.
+    const units = html.split(/(?=<span[^>]*data-slot="timeline-mean-part")/);
+    expect(units).toHaveLength(3);
+    for (const unit of units) {
+      const open = unit.slice(0, unit.indexOf(">"));
+      expect(open).toContain("inline-flex");
+      expect(open).toContain("items-center");
+      expect(open).toContain("whitespace-nowrap");
+      const dot = unit.match(
+        /<span[^>]*data-slot="timeline-series-dot"[^>]*>/,
+      )?.[0];
+      expect(dot).toContain("shrink-0");
+      expect(dot).not.toContain("align-middle");
+      // The value follows the dot inside the same unit.
+      expect(text(unit.slice(unit.indexOf(dot!)))).toMatch(/\S/);
+    }
+    // The lead rides in the first unit, so "Ø" never ends a line alone.
+    expect(text(units[0]).startsWith("Ø")).toBe(true);
+    // A long name is cut short inside its unit.
+    expect(units[2]).toContain(
+      '<span class="min-w-0 truncate">Daily strain with a very long name 12</span>',
+    );
+  });
 });
 
 describe("life events in the capture picker", () => {
diff --git a/src/components/timeline/selection-bar.tsx b/src/components/timeline/selection-bar.tsx
index 7c844e611..9c821c9af 100644
--- a/src/components/timeline/selection-bar.tsx
+++ b/src/components/timeline/selection-bar.tsx
@@ -39,7 +39,7 @@ import {
 } from "./timeline-dates";
 import { useItemWords } from "./item-words";
 import { itemsInPeriod } from "./timeline-geometry";
-import { MeanPartsLine, laneDotStyle } from "./timeline-chart";
+import { MEAN_PARTS_ROW, MeanPartsLine, laneDotStyle } from "./timeline-chart";
 import {
   bucketValues,
   labelledMeanParts,
@@ -201,12 +201,12 @@ export function SelectionBar({
       })}
       {means.values.length > 0 && (
         <span
-          className="text-muted-foreground text-xs tabular-nums"
+          className={MEAN_PARTS_ROW}
           data-slot="timeline-selection-means"
           data-bucket={means.start}
         >
-          {meanBefore}
           <MeanPartsLine
+            lead={meanBefore || undefined}
             parts={labelledMeanParts(means.values, seriesFormat, {
               label: seriesLabel,
               bloodPressure: t("timeline.values.bloodPressure"),
@@ -215,7 +215,7 @@ export function SelectionBar({
             })}
             seriesColor={seriesColor}
           />
-          {meanAfter}
+          {meanAfter ? <span>{meanAfter}</span> : null}
         </span>
       )}
     </div>
diff --git a/src/components/timeline/timeline-chart.tsx b/src/components/timeline/timeline-chart.tsx
index 86eee576c..106d1839a 100644
--- a/src/components/timeline/timeline-chart.tsx
+++ b/src/components/timeline/timeline-chart.tsx
@@ -1117,13 +1117,22 @@ function SeriesTable({
  * ● 82,6 kg". The values stand apart by space, not by a separator glyph;
  * a screen reader hears a comma between them. The dot is decoration; the
  * text reads the same without it.
+ *
+ * Each dot and its value are one unit that never breaks: a line wraps only
+ * between units (the caller's container is a wrapping flex row), so a dot
+ * cannot stay behind at the end of a line while its value moves to the
+ * next. The dot sits on the middle of the text line, and a name too long for
+ * the row is cut short inside its unit. `lead` (the "Ø" in front of the
+ * selection bar's means) rides in the first unit for the same reason.
  */
 export function MeanPartsLine({
   parts,
   seriesColor,
+  lead,
 }: {
   parts: readonly MeanPart[];
   seriesColor: (key: string) => string;
+  lead?: React.ReactNode;
 }) {
   return parts.map((part, i) => (
     <span
@@ -1133,16 +1142,17 @@ export function MeanPartsLine({
       // The readings behind a mean: a hover title, and the same words for a
       // screen reader, but not on the line itself.
       title={part.detail}
-      className={i > 0 ? "ml-3" : undefined}
+      className="inline-flex max-w-full min-w-0 items-center gap-1 whitespace-nowrap"
     >
+      {i === 0 && lead ? <span className="shrink-0">{lead}</span> : null}
       {i > 0 ? <span className="sr-only">, </span> : null}
       <span
         data-slot="timeline-series-dot"
-        className="mr-1 inline-block size-2 rounded-full align-middle"
+        className="size-2 shrink-0 rounded-full"
         style={{ background: seriesColor(part.key) }}
         aria-hidden="true"
       />
-      {part.text}
+      <span className="min-w-0 truncate">{part.text}</span>
       {part.detail ? (
         <span className="sr-only" data-slot="timeline-mean-detail">
           {`, ${part.detail}`}
@@ -1152,6 +1162,10 @@ export function MeanPartsLine({
   ));
 }
 
+/** The row the units of a `MeanPartsLine` wrap in: breaks only between them. */
+export const MEAN_PARTS_ROW =
+  "text-muted-foreground inline-flex max-w-full flex-wrap items-center gap-x-3 gap-y-1 text-xs tabular-nums";
+
 /** Inline style for a lane colour dot in HTML (chips, chronicle rails). */
 export function laneDotStyle(lane: TimelineLaneKey): React.CSSProperties {
   return { background: LANE_COLOR[lane] };
diff --git a/src/components/timeline/timeline-chronicle.tsx b/src/components/timeline/timeline-chronicle.tsx
index ec315bfea..9974295fc 100644
--- a/src/components/timeline/timeline-chronicle.tsx
+++ b/src/components/timeline/timeline-chronicle.tsx
@@ -50,7 +50,12 @@ import {
   formatMonthYear,
 } from "./timeline-dates";
 import { LANE_COLOR } from "./timeline-geometry";
-import { MeanPartsLine, bucketText, laneDotStyle } from "./timeline-chart";
+import {
+  MEAN_PARTS_ROW,
+  MeanPartsLine,
+  bucketText,
+  laneDotStyle,
+} from "./timeline-chart";
 import {
   chronicleMeans,
   meanParts,
@@ -247,7 +252,7 @@ export function TimelineChronicle({
                   className="bg-muted text-foreground text-2xs inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 font-medium"
                 >
                   <span
-                    className="size-1.5 rounded-full"
+                    className="size-1.5 shrink-0 rounded-full"
                     style={laneDotStyle(chip.lane)}
                     aria-hidden="true"
                   />
@@ -295,7 +300,7 @@ export function TimelineChronicle({
                 </h3>
                 {bucketMeans && parts.length > 0 && (
                   <span
-                    className="text-muted-foreground text-xs tabular-nums"
+                    className={MEAN_PARTS_ROW}
                     data-slot="timeline-chronicle-means"
                     data-bucket={bucketMeans.start}
                   >
diff --git a/src/components/timeline/timeline-view.tsx b/src/components/timeline/timeline-view.tsx
index 954b2a9c6..0be0e8eec 100644
--- a/src/components/timeline/timeline-view.tsx
+++ b/src/components/timeline/timeline-view.tsx
@@ -603,14 +603,14 @@ export function TimelineLegend({
     >
       <span className="inline-flex items-center gap-1.5">
         <span
-          className="bg-muted-foreground h-1.5 w-4 rounded-full"
+          className="bg-muted-foreground h-1.5 w-4 shrink-0 rounded-full"
           aria-hidden="true"
         />
         {t("timeline.legendSpan")}
       </span>
       <span className="inline-flex items-center gap-1.5">
         <span
-          className="bg-muted-foreground size-2 rounded-full"
+          className="bg-muted-foreground size-2 shrink-0 rounded-full"
           aria-hidden="true"
         />
         {t("timeline.legendEvent")}
@@ -622,7 +622,10 @@ export function TimelineLegend({
             data-slot="timeline-legend-mean"
             data-bucket={bucket}
           >
-            <span className="bg-foreground h-0.5 w-4" aria-hidden="true" />
+            <span
+              className="bg-foreground h-0.5 w-4 shrink-0"
+              aria-hidden="true"
+            />
             {t(TIMELINE_LEGEND_MEAN_KEY[bucket])}
           </span>
           <span