Remove the remaining capsule buttons and fix the crushed suggestion card - #89
Merged
Merged
Conversation
Two problems the first pass missed. Capsule buttons. I filed everything in simulator.css as "in-phone, so iOS convention applies" and left it. Two of those were not in the phone at all: "Expand preview" and the focus-mode "Close" are the site's own preview chrome and had no native counterpart. The in-phone ones were wrong on the facts as well: all three Swift consent sheets build their confirm button with RoundedRectangle(cornerRadius: 18), and the Capsule() calls near them are the sheet grab handles. So the mock's fully-rounded Apply button was a fidelity bug against the app it mirrors, not a deliberate convention. Site chrome moves onto the site's radius scale, and the sheet buttons to the stage-scale equivalent of 18pt. EmptyStateView was the one native button using Capsule(); it is now RoundedRectangle(18) like every other primary button in the app, so the mock and the app still agree. That Swift change is unverified here, since the iOS lane cannot be built on Linux. What remains capsule is capsule in the native app too: progress bars, slider tracks, grab handles, the switch and the toast. Four unreferenced rules (.chat-chip, .chapter-strip button, .try-it-pill, .coming-pill) are deleted; they rendered nowhere and were the confusing part of auditing this file. Crushed card. .app-screen is a column flex container whose children default to flex-shrink: 1, so a screen taller than the stage squeezed the last row instead of scrolling: the "Lumen noticed" card collapsed from 106px of content into a 14px sliver at 1024x800 and 1280x720, and clipped at 1440x900. overflow-y: auto never engaged because flexbox shrinks before it scrolls. Children now hold their natural height and the screen scrolls. That leaves the card below the fold on shorter viewports, which is what a real phone does, but it was also missing the fold by 5px at 1440x900. Tightening the preview's gap and padding and lifting the stage from 80vh to 82vh brings the card fully into view at 1440x900, 1512x982 and above, and on mobile. Both defects are now covered by e2e tests, each confirmed to fail against the old CSS before being kept. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WmouTty4UranwAXwByjsKy
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
mohabbis
marked this pull request as ready for review
September 6, 2026 04:09
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
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
2 participants
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.
Follow-up to #88, which missed both of these.
Capsule buttons
In #88 I filed everything in
simulator.cssas "in-phone, so iOS convention applies" and left it. That was wrong twice over.Two of those buttons are not in the phone at all — "Expand preview" and the focus-mode "Close" are the site's own preview chrome and have no native counterpart.
The in-phone ones were wrong on the facts. All three Swift consent sheets build their confirm button with
RoundedRectangle(cornerRadius: 18):The
Capsule()calls sitting near them are the sheet grab handles. So the mock's fully-rounded Apply button — the most prominent control in the whole preview — was a fidelity bug against the app it mirrors, not a deliberate convention..demo-openapp"Expand preview".app-fullscreen-close"Close".sheet-apply/-static"Apply".room-empty-cta"Add a device"EmptyStateViewEmptyStateViewwas the one native button still usingCapsule(); it is nowRoundedRectangle(18)like every other primary button in the app, so the mock and the app still agree rather than the web quietly diverging.Everything still capsule is capsule in the native app too: progress bars, slider tracks, sheet grab handles, the iOS switch, the toast. Four unreferenced rules (
.chat-chip,.chapter-strip button,.try-it-pill,.coming-pill) are deleted — they rendered nowhere and were the confusing part of auditing this file for capsules.The crushed "Lumen noticed" card
.app-screenis a column flex container, and its children default toflex-shrink: 1. A screen taller than the stage therefore squeezed the last row instead of scrolling, andoverflow-y: autonever engaged because flexbox shrinks before it scrolls.The card carrying the entire product pitch was collapsing from 106px of content into a 14px sliver:
.noticed-cardbeforeChildren now hold their natural height and the screen scrolls, which is what the real phone does.
That alone still left the card below the fold on load — and it was missing by only 5px at 1440×900, the most common laptop size. Tightening the preview's own gap/padding and lifting the stage from
80vhto82vhbrings it fully into view at 1440×900, 1512×982 (MacBook Pro 14"), taller desktops, and mobile. Below ~1050px of viewport height it sits below the fold and the screen scrolls to it, same as a real phone.Tests
Two e2e tests added. Each was confirmed to fail against the old CSS before being kept, so neither is vacuous:
preview rows keep their height instead of being crushed— asserts no.app-screenchild hasscrollHeight > clientHeightat 1280×720no button in the preview or its chrome is capsule-shaped— walks every visible button with the reasoning sheet open (percentage radii skipped, so circular icon buttons still pass)npm run lintcleannpm run test29/29npm run buildcleannpm run e2e10/10Note for review
The
EmptyStateView.swiftchange is a one-line shape swap and is unverified — the iOS lane cannot be built on Linux, so it has not been compiled. Worth a glance.🤖 Generated with Claude Code
https://claude.ai/code/session_01WmouTty4UranwAXwByjsKy
Generated by Claude Code