diff --git a/apps/app/src/components/timetable/StageHeaderCell.vue b/apps/app/src/components/timetable/StageHeaderCell.vue
index 1b9f45a8..7828578f 100644
--- a/apps/app/src/components/timetable/StageHeaderCell.vue
+++ b/apps/app/src/components/timetable/StageHeaderCell.vue
@@ -1,22 +1,37 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import type { Stage } from '@/types/timetable'
 
-defineProps<{
+const props = defineProps<{
   stage: Stage
   /** Number of conflicts on this stage row for the active day. */
   conflictCount?: number
+  /**
+   * Explicit row height in pixels. When provided (page passes it from
+   * computeStageRowHeight), the header sizes to match the corresponding
+   * StageRow exactly so the sticky-left column aligns pixel-for-pixel.
+   * When omitted, the legacy `block-size: 100%` CSS path takes over.
+   */
+  rowHeightPx?: number
 }>()
 
 const emit = defineEmits<{
   edit: [stage: Stage]
   delete: [stage: Stage]
 }>()
+
+const heightStyle = computed(() =>
+  typeof props.rowHeightPx === 'number'
+    ? { blockSize: `${props.rowHeightPx}px` }
+    : null,
+)
 </script>
 
 <template>
   <div
     class="tt-stage-header"
     :data-stage-id="stage.id"
+    :style="heightStyle"
   >
     <span
       class="tt-stage-header__swatch"
diff --git a/apps/app/src/components/timetable/StageRow.vue b/apps/app/src/components/timetable/StageRow.vue
index d87faf9f..e5aa5bd3 100644
--- a/apps/app/src/components/timetable/StageRow.vue
+++ b/apps/app/src/components/timetable/StageRow.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import PerformanceBlock from './PerformanceBlock.vue'
+import { computeStageRowHeight } from '@/lib/timetable/row-height'
 import { isoToMinutes, minutesToPx } from '@/lib/timetable/time-grid'
 import type { Performance, Stage } from '@/types/timetable'
 
@@ -30,7 +31,7 @@ const emit = defineEmits<{
 const laneHeightPx = 44
 const lanePadPx = 4
 const totalWidthPx = computed(() => props.totalMinutes * props.pxPerMin)
-const rowHeightPx = computed(() => Math.max(1, props.laneCount) * (laneHeightPx + lanePadPx) + lanePadPx)
+const rowHeightPx = computed(() => computeStageRowHeight(props.laneCount, laneHeightPx, lanePadPx))
 
 interface PositionedBlock {
   perf: Performance
diff --git a/apps/app/src/lib/timetable/index.ts b/apps/app/src/lib/timetable/index.ts
index 9164ff3e..bc461ae0 100644
--- a/apps/app/src/lib/timetable/index.ts
+++ b/apps/app/src/lib/timetable/index.ts
@@ -4,3 +4,4 @@ export * from './conflict'
 export * from './b2b'
 export * from './capacity'
 export * from './lane'
+export * from './row-height'
diff --git a/apps/app/src/lib/timetable/row-height.ts b/apps/app/src/lib/timetable/row-height.ts
new file mode 100644
index 00000000..9ebc6712
--- /dev/null
+++ b/apps/app/src/lib/timetable/row-height.ts
@@ -0,0 +1,18 @@
+/**
+ * Per-stage row height in pixels for the timetable canvas.
+ *
+ * The `Math.max(1, laneCount)` keeps an empty stage row visible at the
+ * single-lane height instead of collapsing to zero. Lanes are stacked
+ * with a small gap between them, plus an outer pad above and below.
+ *
+ * Used by both StageRow (to size its own positioned-absolute lane area)
+ * and StageHeaderCell (so the sticky-left header column aligns with the
+ * scrolling row content pixel-for-pixel).
+ */
+export function computeStageRowHeight(
+  laneCount: number,
+  laneHeightPx: number,
+  lanePadPx: number,
+): number {
+  return Math.max(1, laneCount) * (laneHeightPx + lanePadPx) + lanePadPx
+}