Skip to content

Fix the paper plane's nose and trail, and the step overlap at tablet widths - #99

Merged
kody-bot merged 1 commit into
mainfrom
cursor/plane-trail-and-steps-overlap-b50d
Sep 14, 2026
Merged

kody-bot merged 1 commit into
mainfrom
cursor/plane-trail-and-steps-overlap-b50d

Conversation

@kentcdodds

Copy link
Copy Markdown
Member

Follow-up to #98 for three landing-page issues in the "How it works" section.

  • Plane nose was clipped: paper-plane.png had been extracted from a region that cut off the nose. It is re-extracted from the design with a wider region, keeping only the plane's connected pixels so no trail dashes ride along. The <image> box is updated to the new 158×102 size at the same design position.
  • Trail kinked into the tail: the dashed path started at the plane's lowest tip, so its first segment hooked down out of line with the dashes. It now ends where the trail meets the tail's edge in the design, continuing the same straight run as the last dashes.
  • Step "02" overlapped the intro paragraph between 768 and 1023px: the middle-column stagger (-mt-[7.75rem]) applied from md, but the extra top margin that makes room for it (and the trail itself) only apply from lg. The stagger is now lg-only.

Test Plan

  • bun run typecheck, bun run lint pass; 14 Playwright e2e tests pass.
  • Screenshots of the section at 1440, 1100, 900 and 768px; 4× zoom on the tail junction compared with the Figma frame.

Checklist

  • Tests updated
  • Docs updated

Screenshots

Plane nose and trail, before vs after
Tail junction, Figma vs app
How it works at 900px, before vs after

Open in Web Open in Cursor 

Re-extract the plane from the design with a wider region, keeping only
the plane's connected pixels so the nose is intact and no trail dashes
come along. The trail now ends where it meets the tail's edge, on the
same straight run as the last dashes, instead of hooking down to the tip.

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
@kentcdodds
kentcdodds marked this pull request as ready for review September 14, 2026 21:43

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stale Bugbot comment from a previous run.

* run as the last few dashes, so the two always meet without a kink.
*/
const PLANE = { x: 1009, y: 136, width: 117, height: 93 }
const PLANE = { x: 1009, y: 135, width: 158, height: 102 }

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Plane box height mismatches asset

Medium Severity

PLANE is sized 158×102, but paper-plane.png is 158×119. The SVG image letterboxes that taller asset in the shorter box, so the plane renders narrower than the design and the trail no longer meets the tail.

Additional Locations (1)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit e6861b4. Configure here.

@kentcdodds

Copy link
Copy Markdown
Member Author

bugbot run

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Bugbot reviewed your changes and found no new issues!

1 issue from previous review remains unresolved.

Fix All in Cursor

Comment @cursor review or bugbot run to trigger another review on this PR

Reviewed by Cursor Bugbot for commit e6861b4. Configure here.

@kody-bot
kody-bot merged commit b1a8ff8 into main Sep 14, 2026
7 checks passed
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.

3 participants