Fit the skip list and loop-invariant visualizers on phones

docs/autopilot.md

@@ -75,6 +75,7 @@ Nothing yet.
 
 Newest first. One line per run: date and run, what was done, PR link, merged or open.
 
+- 2026-11-06 14:50 (run C): rest of quality item 9: skip lists (+184 px) and Discrete Mathematics loop invariants (+136 px) now fit 390 px, cells kept on one row. Noted: main merged #68 (Asmaa), which adds a `practice` mode to `Quiz` and ~40 inline practice questions in Advanced Algorithms; the exam stack will conflict with it at the next rebase (see PR). Local `npm run build` now needs `NODE_OPTIONS=--max-old-space-size=6144` (CI builds with Bun and is fine). PR #69, open.
 - 2026-11-03 (owner request): new direction. Distributed Systems parked (#49 closed, branch kept; M2 had been added by run A that morning). Bun pinned (#51, open). Exam plan written in `docs/exams.md` and queued here (#52, open). Runs A and B switched from course work to exam work.
 - 2026-11-02 14:50 (run C): quality items 1-4 were already done on main (issue #42's checklist is stale), so took item 5: README course table (#38). PR #50, merged.
 - 2026-11-02 01:10 (setup): wrote this file. Baseline: 2,104 tests pass, lint 0 errors, CI green on `main` (82faa87).

src/components/mdx/AdvancedVisualizers.tsx

@@ -1648,10 +1648,11 @@ export function SkipListVisualizer({ ops: ops0 = SKIP_DEFAULT_OPS, layout: layou
         const onPath = (c: number, lv: number) => s.path.some(([pc, pl]) => pc === c && pl === lv);
         return (
           <div className="overflow-x-auto">
-            <div className="inline-grid gap-x-1 gap-y-1.5 font-mono text-xs" style={{ gridTemplateColumns: `auto repeat(${cols}, 38px)` }}>
+            {/* Columns are 24px on phones and 38px from the sm breakpoint up, so a ten-key list fits a 390px screen. */}
+            <div className="inline-grid gap-x-0.5 sm:gap-x-1 gap-y-1.5 font-mono text-[11px] sm:text-xs [--skip-col:24px] sm:[--skip-col:38px]" style={{ gridTemplateColumns: `auto repeat(${cols}, var(--skip-col))` }}>
               {Array.from({ length: levels }, (_, r) => levels - 1 - r).map((lv) => (
                 <div key={lv} className="contents">
-                  <span className="pr-2 self-center text-right text-[10px] uppercase tracking-widest text-muted-foreground">L{lv}</span>
+                  <span className="pr-1 sm:pr-2 self-center text-right text-[10px] uppercase sm:tracking-widest text-muted-foreground">L{lv}</span>
                   {Array.from({ length: cols }, (_, c) => {
                     const col = c - 1; // -1 header, towers.length sentinel
                     const isHeader = col === -1;

src/components/mdx/DiscreteVisualizers.tsx

@@ -590,13 +590,14 @@ export function InvariantSearch({ target: t0 = 23 }: { target?: number }) {
       }
       render={(s) => (
         <div className="space-y-3">
-          <div className="flex gap-1 overflow-x-auto pb-1">
+          <div className="flex gap-0.5 sm:gap-1 overflow-x-auto pb-1">
             {s.arr.map((v, i) => {
               const inWin = i >= s.lo && i <= s.hi;
               const cls = s.found === i ? "border-mint bg-mint/40" : s.mid === i ? "border-neon bg-neon/30" : inWin ? "border-sky bg-sky/20" : "border-border opacity-40";
               return (
                 <div key={i} className="flex flex-col items-center gap-0.5">
-                  <div className={`w-10 h-10 shrink-0 flex items-center justify-center font-mono text-sm border rounded-sm transition-all duration-300 ${cls}`}>{v}</div>
+                  {/* 22px wide on phones (40px from sm up), so the 15-cell array fits a 390px screen */}
+                  <div className={`w-[22px] sm:w-10 h-10 shrink-0 flex items-center justify-center font-mono text-[11px] sm:text-sm border rounded-sm transition-all duration-300 ${cls}`}>{v}</div>
                   <div className="font-mono text-[10px] text-muted-foreground">{i}</div>
                 </div>
               );