diff --git a/packages/ui/src/player/controls/scrubber.tsx b/packages/ui/src/player/controls/scrubber.tsx
index 9648a9561..ca7f9f874 100644
--- a/packages/ui/src/player/controls/scrubber.tsx
+++ b/packages/ui/src/player/controls/scrubber.tsx
@@ -17,10 +17,50 @@ export interface ScrubberProps {
 /** Bars a Page Up or Page Down press moves. */
 const PAGE_BARS = 4;
 
+/** Layout width until the scrubber is measured, e.g. while rendered on the server. */
+const FALLBACK_WIDTH = 600;
+const FALLBACK_WIDTH_COMPACT = 400;
+
+/** Distances in CSS pixels; the drawing is never scaled. */
+const MIN_TICK_GAP = 4;
+const MIN_LABEL_GAP = 48;
+const LABEL_PADDING = 16;
+const MIN_TEMPO_LABEL_GAP = 8;
+const TEMPO_LABEL_OFFSET = 4;
+const TEMPO_BPM_X = 6;
+/** Advance of a digit in the monospace font, relative to the font size. */
+const MONO_ADVANCE = 0.6;
+
+/** The smallest power of two that is at least `value`. */
+function powerOfTwoAtLeast(value: number): number {
+    return 2 ** Math.max(0, Math.ceil(Math.log2(Math.max(1, value))));
+}
+
+function useWidth(ref: React.RefObject<HTMLElement | null>, fallback: number): number {
+    const [width, setWidth] = React.useState(fallback);
+    React.useLayoutEffect(() => {
+        const node = ref.current;
+        if (!node) { return; }
+        const update = () => {
+            const w = node.getBoundingClientRect().width;
+            if (w > 0) { setWidth(w); }
+        };
+        update();
+        if (typeof ResizeObserver === 'undefined') { return; }
+        const observer = new ResizeObserver(update);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [ref]);
+    return width;
+}
+
 /**
  * The song timeline with bar ticks, tempo markers and the loop range. With `onSeek` it is a slider:
  * pointer drags seek continuously; the arrow keys move by a bar, Page Up and Page Down by four,
  * Home and End to the first and last bar.
+ *
+ * It draws at its rendered width: tick and bar-number density follow the space a bar gets, labels
+ * show one-based bar numbers at the start of their bar.
  */
 export const Scrubber: React.FC<ScrubberProps> = ({
     totalBars = 64,
@@ -31,32 +71,109 @@ export const Scrubber: React.FC<ScrubberProps> = ({
     onSeek,
     onSeekBar,
 }) => {
-    const W = compact ? 400 : 600;
+    const wrapperRef = React.useRef<HTMLDivElement>(null);
+    const W = useWidth(wrapperRef, compact ? FALLBACK_WIDTH_COMPACT : FALLBACK_WIDTH);
     const tempoH = compact ? 0 : 12;
     const trackY = compact ? 8 : 22;
-    const labelY = compact ? 16 : 32;
+    const labelY = compact ? 21 : 36;
+    const labelFontSize = compact ? 7 : 8;
     const H = compact ? 22 : 38;
     const safeTotal = Math.max(1, totalBars);
     const xOf = (bar: number) => (Math.max(0, Math.min(bar, safeTotal)) / safeTotal) * W;
     const cursorX = xOf(Math.max(0, Math.min(currentBar, safeTotal)));
-    const labelStops = [0, 16, 32, 48, 64].filter((b) => b > 0 && b < safeTotal);
-    // Drop tempo markers whose label would collide with the previously kept one.
-    // Scores with many close-spaced tempo automations would otherwise stack
-    // their labels into unreadable overlaps.
-    const MIN_TEMPO_LABEL_GAP = 60;
-    const tempos: TempoMarker[] = [];
-    if (tempoMarkers) {
-        let lastX = -Infinity;
-        for (const t of tempoMarkers) {
-            if (t.atBar >= safeTotal) { continue; }
-            const x = xOf(t.atBar);
-            if (x - lastX < MIN_TEMPO_LABEL_GAP) { continue; }
-            tempos.push(t);
-            lastX = x;
+
+    // The ruler only changes with the size, not with the playback position.
+    const ruler = React.useMemo(() => {
+        const barWidth = W / safeTotal;
+        const digitWidth = labelFontSize * MONO_ADVANCE;
+        const widestLabel = String(safeTotal).length * digitWidth;
+        const labelStep = powerOfTwoAtLeast(Math.max(MIN_LABEL_GAP, widestLabel + LABEL_PADDING) / barWidth);
+        const tickStep = Math.min(labelStep, powerOfTwoAtLeast(MIN_TICK_GAP / barWidth));
+        const midStep = Math.max(tickStep, labelStep / 4);
+        const x = (bar: number) => (bar / safeTotal) * W;
+
+        const ticks: React.ReactNode[] = [];
+        for (let b = 0; b <= safeTotal; b += tickStep) {
+            const major = b % labelStep === 0;
+            const mid = !major && b % midStep === 0;
+            const h = major ? 5 : mid ? 3 : 1.5;
+            const op = major ? 0.8 : mid ? 0.5 : 0.28;
+            ticks.push(
+                <line
+                    key={`t${b}`}
+                    x1={x(b)}
+                    x2={x(b)}
+                    y1={trackY + 2}
+                    y2={trackY + 2 + h}
+                    stroke="var(--at-muted)"
+                    strokeWidth={1}
+                    opacity={op}
+                />,
+            );
         }
-    }
 
-    const wrapperRef = React.useRef<HTMLDivElement>(null);
+        // Labels center under their tick but stay inside the scrubber at both ends.
+        const labels: React.ReactNode[] = [];
+        for (let b = 0; b < safeTotal; b += labelStep) {
+            const text = String(b + 1);
+            const half = (text.length * digitWidth) / 2;
+            labels.push(
+                <text
+                    key={`l${b}`}
+                    x={Math.max(half, Math.min(x(b), W - half))}
+                    y={labelY}
+                    fontFamily="var(--at-font-mono)"
+                    fontSize={labelFontSize}
+                    fill="var(--at-muted)"
+                    textAnchor="middle"
+                >
+                    {text}
+                </text>,
+            );
+        }
+
+        // A tempo label sits right of its marker, or left of it where it would leave the scrubber.
+        // Markers whose label would collide with the previously kept one are dropped: scores with
+        // many close-spaced tempo automations would otherwise stack their labels into unreadable overlaps.
+        const tempos: React.ReactNode[] = [];
+        if (!compact && tempoMarkers) {
+            let lastRight = -Infinity;
+            for (const t of tempoMarkers) {
+                if (t.atBar >= safeTotal) { continue; }
+                const bpm = Math.round(t.bpm);
+                const mx = x(Math.max(0, t.atBar));
+                const labelWidth = TEMPO_BPM_X + `= ${bpm}`.length * 8 * MONO_ADVANCE;
+                const flip = mx + TEMPO_LABEL_OFFSET + labelWidth > W;
+                const left = flip ? mx - TEMPO_LABEL_OFFSET - labelWidth : mx + TEMPO_LABEL_OFFSET;
+                if (left < 0 || left - lastRight < MIN_TEMPO_LABEL_GAP) { continue; }
+                lastRight = left + labelWidth;
+                tempos.push(
+                    <g key={`m${t.atBar}`}>
+                        <line
+                            x1={mx}
+                            x2={mx}
+                            y1={tempoH - 2}
+                            y2={trackY - 1}
+                            stroke="var(--at-muted)"
+                            strokeWidth={0.6}
+                            opacity={0.5}
+                            strokeDasharray="1 2"
+                        />
+                        <g transform={`translate(${left}, ${tempoH - 4})`}>
+                            <text fontFamily="Georgia, serif" fontSize="9" fill="var(--at-muted)">
+                                ♪
+                            </text>
+                            <text x={TEMPO_BPM_X} fontFamily="var(--at-font-mono)" fontSize="8" fill="var(--at-muted)">
+                                = {bpm}
+                            </text>
+                        </g>
+                    </g>,
+                );
+            }
+        }
+        return { ticks, labels, tempos };
+    }, [W, safeTotal, compact, tempoMarkers, tempoH, trackY, labelY, labelFontSize]);
+
     const [drag, setDrag] = React.useState(false);
 
     const seekAtClientX = React.useCallback(
@@ -125,38 +242,14 @@ export const Scrubber: React.FC<ScrubberProps> = ({
             style={{ width: '100%', cursor: onSeek ? 'pointer' : undefined, touchAction: 'none' }}
             {...slider}
         >
+            {/* The viewBox matches the measured width; only the fallback width before measuring stretches. */}
             <svg
                 viewBox={`0 0 ${W} ${H}`}
                 preserveAspectRatio="none"
                 style={{ display: 'block', width: '100%', height: `${H}px`, overflow: 'visible' }}
                 aria-hidden="true"
             >
-                {!compact &&
-                    tempos.map((tm, i) => {
-                        const x = xOf(tm.atBar);
-                        return (
-                            <g key={i}>
-                                <line
-                                    x1={x}
-                                    x2={x}
-                                    y1={tempoH - 2}
-                                    y2={trackY - 1}
-                                    stroke="var(--at-muted)"
-                                    strokeWidth={0.6}
-                                    opacity={0.5}
-                                    strokeDasharray="1 2"
-                                />
-                                <g transform={`translate(${x + 4}, ${tempoH - 4})`}>
-                                    <text fontFamily="Georgia, serif" fontSize="9" fill="var(--at-muted)">
-                                        ♪
-                                    </text>
-                                    <text x={6} fontFamily="var(--at-font-mono)" fontSize="8" fill="var(--at-muted)">
-                                        = {Math.round(tm.bpm)}
-                                    </text>
-                                </g>
-                            </g>
-                        );
-                    })}
+                {ruler.tempos}
 
                 {loopRange && (
                     <>
@@ -203,39 +296,8 @@ export const Scrubber: React.FC<ScrubberProps> = ({
                     strokeLinecap="round"
                 />
 
-                {Array.from({ length: safeTotal + 1 }).map((_, b) => {
-                    const x = xOf(b);
-                    const major = b % 16 === 0;
-                    const mid = b % 4 === 0;
-                    const h = major ? 5 : mid ? 3 : 1.5;
-                    const op = major ? 0.8 : mid ? 0.5 : 0.28;
-                    return (
-                        <line
-                            key={b}
-                            x1={x}
-                            x2={x}
-                            y1={trackY + 2}
-                            y2={trackY + 2 + h}
-                            stroke="var(--at-muted)"
-                            strokeWidth={0.7}
-                            opacity={op}
-                        />
-                    );
-                })}
-
-                {labelStops.map((b) => (
-                    <text
-                        key={b}
-                        x={xOf(b)}
-                        y={labelY + 3}
-                        fontFamily="var(--at-font-mono)"
-                        fontSize="7"
-                        fill="var(--at-muted)"
-                        textAnchor="middle"
-                    >
-                        {b}
-                    </text>
-                ))}
+                {ruler.ticks}
+                {ruler.labels}
 
                 <circle cx={cursorX} cy={trackY} r={5} fill="var(--at-accent)" opacity={0.18} />
                 <line
diff --git a/packages/ui/test/scrubber.test.tsx b/packages/ui/test/scrubber.test.tsx
new file mode 100644
index 000000000..bb08ed4c5
--- /dev/null
+++ b/packages/ui/test/scrubber.test.tsx
@@ -0,0 +1,144 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Scrubber, type ScrubberProps } from '../src/player/controls/scrubber';
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let width = 0;
+const observers: (() => void)[] = [];
+
+class FakeResizeObserver {
+    public constructor(private readonly callback: () => void) {}
+    public observe() {
+        observers.push(this.callback);
+    }
+    public disconnect() {
+        observers.splice(observers.indexOf(this.callback), 1);
+    }
+}
+
+let root: Root | null = null;
+let host: HTMLDivElement;
+
+beforeEach(() => {
+    vi.stubGlobal('ResizeObserver', FakeResizeObserver);
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(
+        () => ({ left: 0, top: 0, width, height: 38, right: width, bottom: 38, x: 0, y: 0 }) as DOMRect
+    );
+    host = document.createElement('div');
+});
+
+afterEach(() => {
+    act(() => root?.unmount());
+    root = null;
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+});
+
+function mount(atWidth: number, props: ScrubberProps): SVGSVGElement {
+    width = atWidth;
+    root = createRoot(host);
+    act(() => root!.render(<Scrubber {...props} />));
+    return host.querySelector('svg')!;
+}
+
+function resize(toWidth: number) {
+    width = toWidth;
+    act(() => {
+        for (const o of [...observers]) {
+            o();
+        }
+    });
+}
+
+const barLabels = (svg: SVGSVGElement) => [...svg.querySelectorAll(':scope > text')].map(t => t.textContent);
+const tickCount = (svg: SVGSVGElement) =>
+    [...svg.querySelectorAll(':scope > line')].filter(l => l.getAttribute('stroke') === 'var(--at-muted)').length;
+const tempoLabels = (svg: SVGSVGElement) =>
+    [...svg.querySelectorAll(':scope > g > g')].map(g => ({
+        transform: g.getAttribute('transform'),
+        text: g.textContent
+    }));
+
+describe('Scrubber', () => {
+    it('draws at its rendered width without stretching', () => {
+        const svg = mount(1234, { totalBars: 64, currentBar: 16 });
+        expect(svg.getAttribute('viewBox')).toBe('0 0 1234 38');
+        const knob = svg.querySelector('circle')!;
+        expect(knob.getAttribute('cx')).toBe(String(1234 / 4));
+        expect(knob.getAttribute('r')).toBe('5');
+
+        resize(3000);
+        expect(svg.getAttribute('viewBox')).toBe('0 0 3000 38');
+    });
+
+    it('labels bars one-based at the start of the bar', () => {
+        // 600px over 64 bars: 9.375px per bar, a label every 8 bars keeps them 75px apart.
+        const svg = mount(600, { totalBars: 64 });
+        expect(barLabels(svg)).toEqual(['1', '9', '17', '25', '33', '41', '49', '57']);
+        const nine = svg.querySelectorAll(':scope > text')[1];
+        expect(nine.getAttribute('x')).toBe(String((8 / 64) * 600));
+    });
+
+    it('adds labels and ticks as the scrubber widens and drops them as it narrows', () => {
+        const svg = mount(600, { totalBars: 64 });
+        expect(tickCount(svg)).toBe(65);
+
+        // 50px per bar: room for a label on every bar.
+        resize(3200);
+        expect(barLabels(svg)).toEqual(Array.from({ length: 64 }, (_, i) => String(i + 1)));
+        expect(tickCount(svg)).toBe(65);
+
+        resize(200);
+        expect(barLabels(svg)).toEqual(['1', '17', '33', '49']);
+        // 3.125px per bar: a tick every second bar.
+        expect(tickCount(svg)).toBe(33);
+    });
+
+    it('keeps ticks apart on long songs', () => {
+        // 0.6px per bar: a tick every 8 bars, a label every 128.
+        const svg = mount(600, { totalBars: 1000 });
+        expect(tickCount(svg)).toBe(126);
+        expect(barLabels(svg)).toEqual(['1', '129', '257', '385', '513', '641', '769', '897']);
+    });
+
+    it('keeps the bar labels at the ends inside the scrubber', () => {
+        const half = (digits: number) => (digits * 8 * 0.6) / 2;
+        const svg = mount(3200, { totalBars: 64 });
+        const labels = svg.querySelectorAll(':scope > text');
+        expect(Number(labels[0].getAttribute('x'))).toBeCloseTo(half(1));
+        expect(Number(labels[63].getAttribute('x'))).toBeCloseTo((63 / 64) * 3200);
+
+        // Bar 65 starts at 88.6px of 90px; its label is pulled in to end at the right edge.
+        resize(90);
+        act(() => root!.render(<Scrubber totalBars={65} />));
+        expect(barLabels(svg)).toEqual(['1', '65']);
+        expect(Number(svg.querySelectorAll(':scope > text')[1].getAttribute('x'))).toBeCloseTo(90 - half(2));
+    });
+
+    it('places tempo labels left of a marker near the end and drops colliding ones', () => {
+        const tempoMarkers = [
+            { atBar: 0, bpm: 120 },
+            { atBar: 1, bpm: 90 },
+            { atBar: 32, bpm: 140 },
+            { atBar: 63, bpm: 100 }
+        ];
+        const svg = mount(640, { totalBars: 64, tempoMarkers });
+        // "= 100" is 6px + 5 × 4.8px wide; right of bar 63 at 630px it would end beyond 640px.
+        expect(tempoLabels(svg)).toEqual([
+            { transform: 'translate(4, 8)', text: '♪= 120' },
+            { transform: 'translate(324, 8)', text: '♪= 140' },
+            { transform: 'translate(596, 8)', text: '♪= 100' }
+        ]);
+
+        resize(6400);
+        expect(tempoLabels(svg).map(t => t.text)).toEqual(['♪= 120', '♪= 90', '♪= 140', '♪= 100']);
+    });
+
+    it('hides tempo markers when compact', () => {
+        const svg = mount(400, { totalBars: 64, compact: true, tempoMarkers: [{ atBar: 0, bpm: 120 }] });
+        expect(svg.getAttribute('viewBox')).toBe('0 0 400 22');
+        expect(tempoLabels(svg)).toEqual([]);
+    });
+});