[Zach Dunn (zachdunn)]

On a phone the site relied on hover in three places, and two layouts cut off on narrow screens. This makes each one work by touch.

What changes

• Hero: drag the table sideways to move between examples.
  • The table follows the finger. Letting go glides to the nearest example, or to the next one on a flick, and it wraps from the first back to the last.
  • Vertical page scrolling still works (touch-action: pan-y).
  • A mouse drag does the same on desktop.
• Post panel (Example section): on touch screens it's a small scroll box.
  • It opens at the first figure and drifts slowly down the post once it's in view, until a finger takes over.
  • A tap still opens the post.
  • The hint and the captions say "swipe" and "tap" instead of "point".
• Figure notes, in the post template: a tap now keeps the note lit, and a hotspot's note open, until the next tap.
  • Before, the note cleared as soon as the finger lifted.
  • Posts made from the template get this too.
• Commands wrap on phones instead of being cut off. The install command breaks after buildinternet/, and the site test now allows that break point.
• Pipeline drawing: its right edge fades while there's more to scroll sideways.
• Examples page: the one-column pictures show whole, instead of being cropped to 4:3.

Desktop with a mouse is unchanged, apart from the hero now also responding to a drag.

Screenshots (390 px)

Hero, mid-swipe	Example, before	Example, after

Examples page, before	Examples page, after

Testing

• npm test passes (123 tests).
• Checked in headless Chrome at iPhone 13 size, with simulated touch events:
  • Swipes go forward, back, wrap from the first example to the last, and a small nudge stays put.
  • The post panel drifts down the post.
  • A tapped note stays lit after the finger lifts, and tapping elsewhere clears it.
  • Commands wrap.
• Not yet checked on a real phone or in Safari. Headless Chrome doesn't report hover: none, so the touch-only code was tested by forcing that media query on.

[coderabbitai]

Important

Review skipped

Auto reviews are limited based on label configuration.

🏷️ Required labels (at least one): 2

• coderabbit:review
• review

🚫 Excluded labels (none allowed): 1

• wip

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 55d1a45d-9d07-4c83-9d8b-aeecd908cba5

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

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[uploads-sh]

5 files · View all on uploads.sh →

_{Maintained by uploads.sh · add media: uploads put <file> --pr 46 · docs}