Repository navigation
Conversation
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 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EC6Zzt5akQu7TEHdGquZzp
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Quality item 9 (from the visualizer audit in #54): array visualizers too wide on phones.
The problem
ArrayCells, the array stepper behind linear and binary search (Algorithm Design, and Advanced Algorithms ×2), min-max, randomized select and quicksort, gave each cell a fixed 34 px minimum. A 15-element array needed about 570 px, so on a 390 px phone it scrolled sideways by up to 266 px and you couldn't see the whole array at once.The fix
smbreakpoint only: cells shrink to fit their widest value (18 px for two-digit numbers, wider for longer ones), with 2 px gaps and 11 px text. A 15-cell array now fits in one row.text-sm, 4 px gaps).low,mid,high,i,j…) are now stacked one per line and never broken mid-word. In a narrow cell, "high" used to wrap into "hig / h".A bug I caught along the way
My first version set the CSS variable on the inner grid but read it on the wrapper, so the column template was invalid and the grid collapsed into one vertical column. Overflow numbers alone said "fits", but the screenshot showed the collapse, so the measurement now also checks that all cells sit on one row. The version in this PR passes both checks.
Measured at 390 px (Playwright, production build)
linear-and-binary-searchcounting-the-basic-operationsolving-recurrences(binary search)lab-algorithm-analysis(min-max)At 1280 px nothing scrolls, before or after.
Still open (other components, for a later run)
SkipListVisualizer: +184 pxAlso noted
maincommit 4c0af73 editedalgorithm-design-and-analysis/m1-05-sorting-quiz.mdx, which #53 moves into the question bank. #53 will need a rebase and a re-check of that quiz's questions; the next exam run does that.Checked
npm run lint(0 errors),tsc(app and node),npm run test(49 files, 2,427 tests),npm run build.Generated by Claude Code