Skip to content

Fit the cryptography visualizers on phones - #73

Open
A7med7x7 wants to merge 2 commits into
mainfrom
autopilot/fit-cipher-visualizers
Open

A7med7x7 wants to merge 2 commits into
mainfrom
autopilot/fit-cipher-visualizers

Conversation

@A7med7x7

@A7med7x7 A7med7x7 commented Nov 7, 2026

Copy link
Copy Markdown
Member

Quality item 10 from the visualizer audit: three Computational Mathematics cryptography visualizers didn't fit a phone.

Visualizer Lesson Before (390 px) Change After
A secret-key system what-is-cryptography +220 px Stations 95 units apart in a 480-wide drawing (was 660 wide with min-w-[520px]); capped at 600 px wide on desktop fits, labels readable
A stream cipher, bit by bit stream-ciphers +196 px Bits grouped by byte: each character's message, key and output rows form one group, and groups wrap on narrow screens instead of one long row fits; on desktop the groups sit side by side
Affine map affine-ciphers +260 px No forced min-w-[560px] below sm; letters drawn at 17 instead of 13 SVG units there so they stay readable after scaling fits, all 26 letters and lines readable

Desktop: the affine map is unchanged, and the secret-key flow is the same picture, slightly more compact.

Checked against the production build with Playwright at 390 px (light and dark) and 1280 px: no sideways scroll in any of the three, no page errors, and screenshots inspected (the stream cipher's highlight follows the current bit within its byte group). npm run lint (0 errors), tsc (app and node), npm run test (51 files, 2,520 tests). The build needs NODE_OPTIONS=--max-old-space-size=6144 locally since #68; CI uses Bun.


Generated by Claude Code

Quality item 10 from the visualizer audit: three Computational
Mathematics visualizers were up to 260 px wider than a phone.

- Secret-key flow: the five stations now sit 95 units apart in a
  480-wide drawing (was 660, with a forced 520 px minimum), so it fits
  a phone with readable labels and looks much the same on desktop.
- Stream cipher: bits are grouped by byte (one character), each group
  showing message, key and output, and groups wrap onto new lines on
  narrow screens instead of forming one long row.
- Affine map: no forced 560 px minimum below the sm breakpoint, and
  its letters are drawn larger there so they stay readable after the
  drawing scales down. Desktop is unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EC6Zzt5akQu7TEHdGquZzp
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EC6Zzt5akQu7TEHdGquZzp

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants