feat(video): Short 9:16 export format

src/components/export-video-section.tsx

@@ -99,6 +99,9 @@ function ModalBody({
   // bump via the slider when they want a longer race.
   const [raceSeconds, setRaceSeconds] = useState(12);
   const [skipIntro, setSkipIntro] = useState(false);
+  // "short" renders natively at 1080x1920 (TikTok / Reels / Shorts); the
+  // renderer overrides the Remotion canvas, no crop or scale involved.
+  const [format, setFormat] = useState<"landscape" | "short">("landscape");
   // Default to the top 8 providers (sorted by p50). Each composition only
   // shows ~8 visible anyway (BarChartRace.VISIBLE_BARS = 8) and rendering
   // 50+ providers per frame on a 2-vCPU box pushes us past 2 minutes —
@@ -164,6 +167,7 @@ function ModalBody({
           viewId: view,
           raceSeconds,
           skipIntro,
+          format,
           bench: filtered,
         }),
       });
@@ -259,6 +263,27 @@ function ModalBody({
             </Segment>
           </div>
 
+          {/* Format */}
+          <div>
+            <Label>Format</Label>
+            <Segment>
+              <SegmentButton
+                active={format === "landscape"}
+                onClick={() => setFormat("landscape")}
+                disabled={isBusy}
+              >
+                Landscape 16:9
+              </SegmentButton>
+              <SegmentButton
+                active={format === "short"}
+                onClick={() => setFormat("short")}
+                disabled={isBusy}
+              >
+                Short 9:16
+              </SegmentButton>
+            </Segment>
+          </div>
+
           {/* Race duration slider */}
           <div>
             <Label>
@@ -382,7 +407,11 @@ function ModalBody({
                 muted
                 playsInline
                 controls
-                className="w-full rounded-md bg-black aspect-video"
+                className={
+                  format === "short"
+                    ? "rounded-md bg-black object-contain aspect-[9/16] max-h-[60vh] mx-auto"
+                    : "w-full rounded-md bg-black object-contain aspect-video"
+                }
               />
               <div className="flex flex-wrap gap-2">
                 <a

src/components/time-series-chart.tsx

@@ -1240,7 +1240,12 @@ function niceTicks(
   else if (norm <= 5) niceStep = 5;
   else niceStep = 10;
   niceStep *= mag;
-  const lo = Math.max(0, Math.floor(dataMin / niceStep) * niceStep);
+  // Clamp the floor to zero only for non-negative data: latency-style
+  // charts shouldn't waste space below zero, but signed series (funding
+  // rates) must plot negative values inside the frame, not below the
+  // x-axis (observed: Binance/OKX rendered under the axis line).
+  const flooredLo = Math.floor(dataMin / niceStep) * niceStep;
+  const lo = dataMin >= 0 ? Math.max(0, flooredLo) : flooredLo;
   const hi = Math.ceil(dataMax / niceStep) * niceStep;
   const yTicks: number[] = [];
   for (let v = lo; v <= hi + niceStep / 2; v += niceStep) yTicks.push(v);