Fit array 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-05 14:50 (run C): quality item 9 (from #54), array visualizers on phones: `ArrayCells` (search, min-max, select, quicksort) now fits 390 px with one row of cells and unbroken pointer labels; skip lists (+184 px) and Discrete Mathematics loop invariants (+136 px) use other components and remain. Noted: main commit 4c0af73 edited `algorithm-design-and-analysis/m1-05-sorting-quiz.mdx`, which #53 moves into the bank, so #53 needs a rebase and re-check. PR #64, 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/AlgoVisualizers.tsx

@@ -373,8 +373,11 @@ function PointerRow({ s, count }: { s: ArrayState; count: number }) {
   return (
     <>
       {labels.map((l, i) => (
-        <div key={i} className="text-center font-mono text-[10px] text-sky leading-tight min-h-[14px]">
-          {l.join(",")}
+        <div key={i} className="flex flex-col items-center font-mono text-[10px] text-sky leading-tight min-h-[14px]">
+          {/* one name per line, never broken mid-word, even when the cell is narrower than the word */}
+          {l.map((name) => (
+            <span key={name} className="whitespace-nowrap">{name}</span>
+          ))}
         </div>
       ))}
     </>
@@ -407,7 +410,7 @@ export function ArrayBars({ s }: { s: ArrayState }) {
           );
         })}
       </div>
-      <div className="grid gap-1 mt-1" style={cols}>
+      <div className="grid gap-0.5 sm:gap-1 mt-1" style={cols}>
         {s.array.map((v, i) => (
           <div key={i} className={`text-center font-mono text-[11px] ${inRange(i, s) ? "text-foreground" : "text-muted-foreground/50"}`}>
             {v}
@@ -434,23 +437,28 @@ export function ArrayBars({ s }: { s: ArrayState }) {
 
 export function ArrayCells({ s }: { s: ArrayState }) {
   const n = s.array.length;
-  const cols = { gridTemplateColumns: `repeat(${n}, minmax(34px, 1fr))` };
+  // Cells shrink to 18px on phones (34px from the sm breakpoint up), so a 15-element
+  // array fits a 390px screen instead of scrolling sideways. Wide values still get room.
+  const digits = Math.max(1, ...s.array.map((v) => String(v).length));
+  const cols = { gridTemplateColumns: `repeat(${n}, minmax(var(--cell-min), 1fr))` };
+  // --cell-narrow is set here, on the same element that defines --cell-min from it.
+  const narrow = { ["--cell-narrow" as string]: `${Math.max(18, digits * 6 + 6)}px` } as React.CSSProperties;
   return (
-    <div className="min-w-fit">
-      <div className="grid gap-1" style={cols}>
+    <div className="min-w-fit [--cell-min:var(--cell-narrow)] sm:[--cell-min:34px]" style={narrow}>
+      <div className="grid gap-0.5 sm:gap-1" style={cols}>
         {s.array.map((v, i) => {
           const tone = cellTone(i, s);
           return (
             <div
               key={i}
-              className={`h-11 flex items-center justify-center font-mono text-sm border rounded-sm transition-all ${tone ? cellBorder[tone] : "border-border"} ${inRange(i, s) ? "" : "opacity-25"}`}
+              className={`h-11 flex items-center justify-center font-mono text-[11px] sm:text-sm border rounded-sm transition-all ${tone ? cellBorder[tone] : "border-border"} ${inRange(i, s) ? "" : "opacity-25"}`}
             >
               {v}
             </div>
           );
         })}
       </div>
-      <div className="grid gap-1 mt-1" style={cols}>
+      <div className="grid gap-0.5 sm:gap-1 mt-1" style={cols}>
         {s.array.map((_, i) => (
           <div key={i} className="text-center font-mono text-[10px] text-muted-foreground">
             {i}