docs: frame the screenshots, and let a reader enlarge one - #7008
Conversation
|
Claude finished @gustavosbarreto's task in 1m 58s —— View job Code Review CompleteReviewed 3 files (Astro component, layout script, global CSS) across code quality, accessibility, and correctness. 1 inline issue posted (1 medium). Additional notesThe single finding is that To request another review round, comment |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
A screenshot of the console sits on the same near-black the docs use, so it bled into the page and read as part of it. Each one now carries an edge of its own, and a <Shot> is framed as the window it is: a bar naming the console route it was taken at, which is where the reader would go to see the same thing. Clicking any screenshot opens it at up to 1600px in a modal dialog, since a console table at column width is only readable so far. Markdown images get a tab stop and Enter, which a plain <img> does not have.
The bar naming the console route sat on top of every screenshot and earned less than it cost. The frame is the whole treatment now. The enlarged image closes the way the rest of the web does: a click anywhere, including on the image itself, plus a close button in the corner and Escape. The script also stopped marking a framed screenshot as a button, which nested one button inside another.
The design system resets `dialog` with `all: unset`, which takes the
browser's `dialog:not([open]) { display: none }` with it, so closing the
dialog cleared its state and left the image drawn over the page.
The scroll lock goes with it: `body:has(dialog[open])` in the design
system already does that job.
a0810fc to
58b6042
Compare
|
/review |
|
Claude finished @gustavosbarreto's task in 1m 8s —— View job Code Review CompleteReviewed 3 files across code quality, security, testing, language patterns, and architecture — no new issues found. The code looks good as-is. The one finding from the previous round — |
1 participant
The console is dark and so are the docs, so a screenshot of it landed on a background the same colour as itself and stopped reading as a picture. Every screenshot now carries an edge of its own.
A
<Shot>gets a little more than an edge: it is framed as the window it is, with a bar naming the console route it was taken at. The route is already declared on the tag, and it answers the question a screenshot always raises — where do I go to see this myself.Clicking any screenshot opens it at up to 1600px in a modal dialog, because a console table rendered at column width is legible only so far. Markdown images are given a tab stop and Enter, which a plain
<img>does not have; the<Shot>frame was already a button.