@@ -201,16 +201,27 @@ function measureBlock(b, room, size, S, align) {
     }
     case 'rows': {
       // tag pill · text · muted meta · mark on the right; long text wraps under itself.
-      const rs = Math.round(size * 0.8), rlh = rs * LINE, ts = Math.round(rs * 0.82), ph = ts + 7;
-      const rows = (b.rows || []).map((r) => {
+      // In a narrow card the tag and mark would leave the text a sliver (a fixed-width box wrapped it every
+      // two words), so the tag heads its row on a line of its own, with the mark beside it.
+      const rs = Math.round(size * 0.8), rlh = rs * LINE, ts = Math.round(rs * 0.82), ph = ts + 7, tagLine = Math.max(rlh, ph) + 2;
+      const sized = (b.rows || []).map((r) => {
         const tagW = r.tag ? String(r.tag).length * ts * S.charWidth * 1.05 + 12 : 0;
         const markW = r.mark ? String(r.mark).length * rs * S.charWidth + 10 : 0;
+        return { r, tagW, markW, inline: room - tagW - (tagW ? 6 : 0) - markW };
+      });
+      // Decided once per card, so its rows line up: all tags inline, or all on their own line.
+      const heads = sized.some((x) => x.r.tag && x.inline < room * 0.6);
+      const rows = sized.map(({ r, tagW, markW, inline }) => {
+        const head = heads && !!r.tag;
         const meta = r.meta ? parse(String(r.meta).replace(/ /g, '\u00a0'), { muted: true })[0] : []; // a detail never splits
-        const lines = wrapRich(parse(String(r.text ?? ''), { mono: r.mono }), room - tagW - (tagW ? 6 : 0) - markW, rs, S, false, meta);
-        return { r, tagW, markW, lines, h: Math.max(lines.length * rlh, r.tag ? ph : 0) };
+        const lines = wrapRich(parse(String(r.text ?? ''), { mono: r.mono }), head ? room : inline, rs, S, false, meta);
+        const textW = Math.max(...lines.map((l) => l.w));
+        return { r, tagW, markW, lines, heads: head,
+          w: head ? Math.max(tagW + 6 + markW, textW) : tagW + (tagW ? 6 : 0) + textW + markW,
+          h: head ? tagLine + lines.length * rlh : Math.max(lines.length * rlh, r.tag ? ph : 0) };
       });
       const gap = 5;
-      return { w: Math.max(0, ...rows.map((x) => x.tagW + (x.tagW ? 6 : 0) + Math.max(...x.lines.map((l) => l.w)) + x.markW)), h: rows.reduce((s, x) => s + x.h + gap, -gap),
+      return { w: Math.max(0, ...rows.map((x) => x.w)), h: rows.reduce((s, x) => s + x.h + gap, -gap),
         draw: (x, y, width, color) => {
           let out = '', ty = y;
           for (const row of rows) {
@@ -219,8 +230,8 @@ function measureBlock(b, room, size, S, align) {
               out += `<rect class="g-row-tag" x="${x}" y="${ty + (rlh - ph) / 2}" width="${row.tagW}" height="${ph}" rx="4" fill="${esc(t.fill || S.tagFill)}" stroke="${esc(t.stroke || 'none')}" stroke-opacity="0.5"/>`;
               out += `<text x="${x + row.tagW / 2}" y="${ty + rlh / 2}" font-size="${ts}" font-weight="600" fill="${esc(t.text || S.tagText)}" text-anchor="middle" dominant-baseline="central" font-family="${esc(S.labelFont || S.font)}">${esc(row.r.tag)}</text>`;
             }
-            const tx = x + row.tagW + (row.tagW ? 6 : 0);
-            row.lines.forEach((l, i) => (out += richLine(l, tx, ty + rlh * (i + 0.5), rs, color, 'start', S)));
+            const tx = row.heads ? x : x + row.tagW + (row.tagW ? 6 : 0), top = row.heads ? ty + tagLine : ty;
+            row.lines.forEach((l, i) => (out += richLine(l, tx, top + rlh * (i + 0.5), rs, color, 'start', S)));
             if (row.r.mark) out += `<text class="g-row-mark" x="${x + width}" y="${ty + rlh / 2}" font-size="${rs}" font-weight="600" fill="${esc(S.accent)}" text-anchor="end" dominant-baseline="central" font-family="${esc(S.labelFont || S.font)}">${esc(row.r.mark)}</text>`;
             ty += row.h + gap;
           }
 
@@ -26,6 +26,7 @@ svg { display: block; margin: 0 auto; }
 .foot { display: flex; flex-direction: column; align-items: center; gap: 2px; }
 .nav { display: flex; align-items: center; gap: 2px; font-size: .78em; color: var(--fig-muted, #6b7280); font-variant-numeric: tabular-nums; }
 .nav[hidden] { display: none; }
+.nav span { min-width: 4.6em; text-align: center; }
 .nav button { border: 0; background: none; color: inherit; cursor: pointer; font: inherit; font-size: 1.3em; line-height: 1; padding: 2px 7px; border-radius: 5px; }
 .nav button:hover { color: var(--fig-fg, inherit); background: var(--fig-surface, transparent); }
 .cap { min-height: 1.45em; text-align: center; color: var(--fig-muted, #6b7280); font-size: .92em; line-height: 1.45; transition: opacity .3s; }
@@ -43,8 +44,10 @@ export class GiottoPlayer extends Base {
     super();
     this.state = { si: 0, t: 0, playing: false, speed: 1, hover: null, full: false, seen: true };
     const root = this.attachShadow({ mode: 'open' });
-    root.innerHTML = `<style>${CSS}</style><div class="wrap"><div class="bar" part="controls"></div><div class="view"><svg xmlns="http://www.w3.org/2000/svg" role="img"></svg></div><div class="foot"><div class="cap" part="caption" aria-live="polite"></div>`
-      + '<div class="nav" part="steps" hidden><button title="Previous step">‹</button><span></span><button title="Next step">›</button></div></div></div>';
+    root.innerHTML = `<style>${CSS}</style><div class="wrap"><div class="bar" part="controls"></div><div class="view"><svg xmlns="http://www.w3.org/2000/svg" role="img"></svg></div><div class="foot">`
+      // The step arrows sit above the narration, so a caption that wraps to more lines never moves them.
+      + '<div class="nav" part="steps" hidden><button title="Previous step">‹</button><span></span><button title="Next step">›</button></div>'
+      + '<div class="cap" part="caption" aria-live="polite"></div></div></div>';
     [this.wrap, this.bar, this.view, this.svg, this.cap, this.foot, this.nav] = ['.wrap', '.bar', '.view', 'svg', '.cap', '.foot', '.nav'].map((q) => root.querySelector(q));
     this.count = this.nav.querySelector('span');
     const [prev, next] = this.nav.querySelectorAll('button');
 
@@ -202,3 +202,16 @@ test('a "stretch" column gives its boxes the column width, keeps fixed widths, a
   assert.notEqual(row.a.width, row.b.width);
   assert.equal(row.a.y + row.a.height / 2, row.b.y + row.b.height / 2);
 });
+
+test('in a narrow card, row tags go on a line of their own so the text keeps the width', () => {
+  const rows = [{ tag: 'world', text: 'Alice joined Google', meta: 'Mar 2026', mark: 'new' }, { tag: 'experience', text: 'I suggested Alice for the ML project' }];
+  const card = (width) => {
+    const g = { elements: [{ id: 'f', type: 'rectangle', width, content: [{ type: 'title', text: 'Facts' }] }], scenes: [{ label: 's', beats: [{ show: { f: rows } }] }] };
+    const svg = toSvg(g, undefined, { frame: frameAt(g, 0, 800) });
+    const y = (text) => +new RegExp(`<text[^>]*y="([\\d.]+)"[^>]*>(?:<tspan[^>]*>)?${text}`).exec(svg)?.[1];
+    return { tag: y('world'), text: y('Alice joined Google'), lines: svg.match(/>Alice joined Google</g)?.length };
+  };
+  const narrow = card(200), wide = card(520);
+  assert.ok(narrow.text > narrow.tag, 'narrow: the text sits under its tag');
+  assert.equal(wide.text, wide.tag, 'wide: tag and text share a line');
+});