docs(site): fix three mobile overflow bugs (hero image, bench button, runs code blocks) by aallan · Pull Request #532 · aallan/vera

aallan · 2026-04-27T08:33:04Z

Summary

Three mobile overflow bugs in docs/index.html reported on iOS Safari at the iPhone width:

Hero meerkat image ran off the right edge of the viewport.
VeraBench vera-bench GitHub button was stretched to a full-width chunky pill instead of sitting inline next to its caption.
Shell-command code blocks in the "Runs Everywhere" section ran past the right edge of the viewport, hiding text like --fn factorial -- 10.

Each had a different root cause; each is fixed with a small CSS change.

Root causes and fixes

1. Hero image overflow

.hero-image had max-width: 640px but no width: 100%. The global img { max-width: 100% } rule was overridden by the more-specific class selector, so on a 375px viewport the image kept a 640px target and overflowed.

-.hero-image{max-width:640px;margin:0 auto;border-radius:10px}
+.hero-image{width:100%;max-width:640px;margin:0 auto;border-radius:10px}

2. VeraBench button stretched

The mobile media query had .btn { width: 100%; max-width: 280px } to stretch hero CTA buttons (which stack vertically and benefit from a full-width target). That rule was matching every .btn on the page, including the isolated vera-bench GitHub button under the bench chart, which has no need to stretch.

Scoped to the CTA bar only:

-.btn{width:100%;max-width:280px;justify-content:center}
-.cta-bar{flex-direction:column;align-items:center}
+.cta-bar{flex-direction:column;align-items:center}
+.cta-bar .btn{width:100%;max-width:280px;justify-content:center}

3. Shell code blocks overflow

<pre> defaults to white-space: pre (no wrapping). Lines like vera run examples/factorial.vera --fn factorial -- 10 are wider than a 327px content column. overflow-x: auto produces a horizontal scrollbar inside the box, but iOS has no good gesture for scrolling inside a narrow card.

Added a mobile-only rule that lets shell-command blocks wrap:

+.code-block pre{white-space:pre-wrap;word-break:break-word}

Vera sample blocks (.sample .code) intentionally keep pre so syntax indentation isn't disrupted at narrow widths — only .code-block (used by the runs/install/agents sections, which all hold shell commands) gets the wrap treatment.

Verification

At 375x812 viewport:

Element	Before	After
`.hero-image` width	640px (overflowed)	327px (fits, vw=375)
`.bench-body .btn` width	280px (stretched)	144px (inline-sized)
`.cta-bar .btn` width	280px	280px (still stretched, by design)
`.runs .code-block` overflow	yes	no (`scrollWidth === clientWidth`)

Test plan

DOM-level checks at 375x812 confirm all three fixes
Mobile screenshot shows hero meerkat + wordmark both fully visible
Hero CTA stack still stretches as designed at 375px
CI green after push

🤖 Generated with Claude Code

- Hero image overflowed the viewport because .hero-image only set max-width: 640px, which won the specificity contest against the global img { max-width: 100% } rule. On a 375px viewport the image kept its 640px target and ran off the right edge. Added width: 100% alongside max-width so the image now scales to viewport width up to 640px. - VeraBench GitHub button was being stretched to 280px on mobile by a .btn { width: 100%; max-width: 280px } rule meant only for the hero CTA stack (where buttons stack vertically and benefit from a full-width target). Scoped that rule to .cta-bar .btn so isolated buttons elsewhere on the page keep their natural inline-flex width. - Shell-command code blocks (.runs and .install) ran off the right edge because <pre> defaults to white-space: pre, which doesn't wrap long lines like "vera run examples/factorial.vera --fn factorial -- 10". overflow-x: auto produces a scroll affordance but iOS users have no good gesture to use it inside a tight column. Added white-space: pre-wrap; word-break: break-word for .code-block pre on mobile only. Vera sample blocks (.sample .code) intentionally keep pre so syntax indentation isn't disrupted at narrow widths. Verified at 375px viewport: hero image 327px (fits), bench button 143px (inline-sized), runs code blocks scrollWidth === clientWidth (no overflow). Hero CTA buttons remain stretched at 280px as designed. Co-Authored-By: Claude <noreply@anthropic.invalid>

coderabbitai · 2026-04-27T08:33:12Z

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (1)

docs/index.html is excluded by !docs/**

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 2b4f2408-628a-409e-983e-93de6979b434

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch mobile-overflow-fixes

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

codecov · 2026-04-27T08:35:13Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.03%. Comparing base (ee0975f) to head (f39442a).

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #532   +/-   ##
=======================================
  Coverage   91.03%   91.03%           
=======================================
  Files          58       58           
  Lines       21964    21964           
  Branches      259      259           
=======================================
  Hits        19995    19995           
  Misses       1962     1962           
  Partials        7        7

Flag	Coverage Δ
javascript	`56.83% <ø> (ø)`
python	`95.00% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

aallan · 2026-04-27T08:45:07Z

Closing — folded into the v0.0.120 release PR.

The single commit (7911ad8 docs(site): fix three mobile overflow bugs) was cherry-picked onto the bug-campaign-trap-diagnostics branch alongside the #522 + #516 Stage 1 work. Authorship preserved; the CSS-only diff is unchanged. CHANGELOG entry under v0.0.120 ### Website credits this PR by number.

Rationale for folding rather than separate-merge:

Single-file (docs/index.html), CSS-only — no overlap with the trap-handling code that the v0.0.120 PR also touches in docs/index.html's version-bump line.
v0.0.120 was already going to update docs/index.html for the version bump (v0.0.119 → v0.0.120 in the <a href=...releases/tag/v0.0.119> block), so combining avoids two near-simultaneous edits to the same file.
Mobile overflow is a release-quality fix; better to ship it inside the version it's first present in than as an immediate follow-up v0.0.120.1.

The v0.0.120 PR is now open as #533. No action needed here.

Merge branch 'main' into mobile-overflow-fixes

f39442a

aallan mentioned this pull request Apr 27, 2026

Release v0.0.120: trap categorisation + stdout preserved on trap #533

Merged

5 tasks

aallan closed this Apr 27, 2026

aallan deleted the mobile-overflow-fixes branch April 27, 2026 08:52

aallan added the cherry picked Cherry picked into another branch label Apr 27, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(site): fix three mobile overflow bugs (hero image, bench button, runs code blocks)#532

docs(site): fix three mobile overflow bugs (hero image, bench button, runs code blocks)#532
aallan wants to merge 2 commits into
mainfrom
mobile-overflow-fixes

aallan commented Apr 27, 2026

Uh oh!

coderabbitai Bot commented Apr 27, 2026 •

edited

Loading

Review skipped

Uh oh!

codecov Bot commented Apr 27, 2026 •

edited

Loading

Uh oh!

aallan commented Apr 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

aallan commented Apr 27, 2026

Summary

Root causes and fixes

1. Hero image overflow

2. VeraBench button stretched

3. Shell code blocks overflow

Verification

Test plan

Uh oh!

coderabbitai Bot commented Apr 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

codecov Bot commented Apr 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

aallan commented Apr 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

coderabbitai Bot commented Apr 27, 2026 •

edited

Loading

codecov Bot commented Apr 27, 2026 •

edited

Loading