From bcf9fe31434f3b4ee2172bf5620f8080886a95b3 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 5 Nov 2026 12:00:27 +0000 Subject: [PATCH] Fit array visualizers on phones The visualizer audit found the array stepper (linear and binary search, min-max, select, quicksort) up to 266 px wider than a phone. Cells had a fixed 34 px minimum, so 15 elements needed about 570 px. Below the sm breakpoint, cells now shrink to fit their widest value (18 px for two digits) with tighter gaps and 11 px text, so a 15-cell array fits a 390 px screen in one row. Desktop sizes are unchanged. Pointer names (low, mid, high) are stacked one per line and never broken mid-word, since a narrow cell used to wrap "high" into "hig h". Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01EC6Zzt5akQu7TEHdGquZzp --- docs/autopilot.md | 1 + src/components/mdx/AlgoVisualizers.tsx | 24 ++++++++++++++++-------- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/docs/autopilot.md b/docs/autopilot.md index 508c4b0..11325bf 100644 --- a/docs/autopilot.md +++ b/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). diff --git a/src/components/mdx/AlgoVisualizers.tsx b/src/components/mdx/AlgoVisualizers.tsx index 6c82245..2aacdd7 100644 --- a/src/components/mdx/AlgoVisualizers.tsx +++ b/src/components/mdx/AlgoVisualizers.tsx @@ -373,8 +373,11 @@ function PointerRow({ s, count }: { s: ArrayState; count: number }) { return ( <> {labels.map((l, i) => ( -
- {l.join(",")} +
+ {/* one name per line, never broken mid-word, even when the cell is narrower than the word */} + {l.map((name) => ( + {name} + ))}
))} @@ -407,7 +410,7 @@ export function ArrayBars({ s }: { s: ArrayState }) { ); })}
-
+
{s.array.map((v, i) => (
{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 ( -
-
+
+
{s.array.map((v, i) => { const tone = cellTone(i, s); return (
{v}
); })}
-
+
{s.array.map((_, i) => (
{i}