Activity stats: fixed-position pairs so optional values don't shift layout

site/src/components/ActivityDetail.svelte

@@ -234,25 +234,47 @@
     return { label: MODE_LABEL[colorMode], min: fmt(minV), max: fmt(maxV) };
   })();
 
-  const stat = (label: string, value: string, key?: string) => ({ label, value, key });
+  type Stat = { label: string; value: string; key?: string };
+  const stat = (label: string, value: string, key?: string): Stat => ({ label, value, key });
   $: hiddenStats = new Set<string>((detail?.custom as any)?.hide_stats ?? []);
-  $: stats = [
+
+  // Fixed-position pairs: null = empty slot. Pairing is always preserved regardless
+  // of which optional values (VAM, power) are available.
+  $: statRows = (() => {
+    const h = hiddenStats;
+    const vis = (s: Stat | null): Stat | null => s && (!s.key || !h.has(s.key)) ? s : null;
+    const rows: [Stat | null, Stat | null][] = [
+      [
         stat('Distance',    formatDistance(activity.distance_m)),
         stat('Moving time', formatDuration(activity.moving_time_s ?? activity.duration_s)),
+      ],
+      [
         stat('Elevation ↑', formatElevation(activity.elevation_gain_m), 'elevation'),
-    ...(detail?.climbing_vam_mh != null ? [
+        detail?.climbing_vam_mh != null
-      stat('Climbing VAM', `${detail.climbing_vam_mh.toLocaleString()} m/h`,           'elevation'),
+          ? stat('Climbing VAM', `${detail.climbing_vam_mh.toLocaleString()} m/h`, 'elevation')
-    ] : []),
+          : null,
+      ],
+      [
         stat('Avg speed', formatSpeed(activity.avg_speed_kmh),  'speed'),
         stat('Max speed', formatSpeed(activity.max_speed_kmh),  'speed'),
+      ],
+      [
         stat('Avg HR', activity.avg_hr_bpm ? `${activity.avg_hr_bpm} bpm` : '—', 'heart_rate'),
         stat('Max HR', activity.max_hr_bpm ? `${activity.max_hr_bpm} bpm` : '—', 'heart_rate'),
-    ...(activity.avg_power_w != null ? [
+      ],
+      ...(activity.avg_power_w != null ? [[
         stat('Avg power', `${activity.avg_power_w} W`,                   'power'),
         stat('NP',        npPower != null ? `${npPower} W` : '—',        'power'),
-    ] : []),
+      ] as [Stat, Stat]] : []),
+      [
         stat('Cadence', activity.avg_cadence_rpm ? `${activity.avg_cadence_rpm} rpm` : '—', 'cadence'),
-  ].filter(s => !s.key || !hiddenStats.has(s.key));
+        null,
+      ],
+    ];
+    return rows
+      .map(([a, b]) => [vis(a), vis(b)] as [Stat | null, Stat | null])
+      .filter(([a, b]) => a !== null || b !== null);
+  })();
 </script>
 
 <svelte:window on:keydown={onKeydown} />
@@ -431,13 +453,15 @@
 
   <!-- Right column: stats summary -->
   <div class="grid grid-cols-2 gap-px bg-zinc-800 rounded-xl overflow-hidden">
-    {#each stats as s}
+    {#each statRows as [left, right]}
+      {#each [left, right] as s}
         {@const cm =
-        s.key === 'speed'      && hasSpeedTrack   ? 'speed'     :
+          s?.key === 'speed'      && hasSpeedTrack   ? 'speed'     :
-        s.key === 'heart_rate' && hasHrTrack      ? 'hr'        :
+          s?.key === 'heart_rate' && hasHrTrack      ? 'hr'        :
-        s.key === 'power'      && hasPowerTrack   ? 'power'     :
+          s?.key === 'power'      && hasPowerTrack   ? 'power'     :
-        s.key === 'elevation'  && hasElevTrack    ? 'elevation' :
+          s?.key === 'elevation'  && hasElevTrack    ? 'elevation' :
-        s.key === 'cadence'    && hasCadenceTrack ? 'cadence'   : null}
+          s?.key === 'cadence'    && hasCadenceTrack ? 'cadence'   : null}
+        {#if s}
           <div
             class="bg-zinc-900 px-4 py-3 transition-colors {cm ? 'hover:bg-zinc-800 cursor-pointer' : ''} {cm && stickyMode === cm ? 'ring-1 ring-inset ring-white/25' : ''}"
             role={cm ? 'button' : 'none'}
@@ -450,6 +474,10 @@
             <p class="text-2xl font-bold text-white">{s.value}</p>
             <p class="text-xs text-zinc-500">{s.label}</p>
           </div>
+        {:else}
+          <div class="bg-zinc-900 px-4 py-3"></div>
+        {/if}
+      {/each}
     {/each}
     {#if detail?.gear}
       <div class="bg-zinc-900 px-4 py-3 col-span-2">