fix(landing): keep Sign in visible on mobile and draw a real world map#224
Merged
Conversation
The landing header hid the Sign in button below the sm breakpoint, leaving mobile visitors no obvious way to log in. Both header buttons now stay visible with tighter padding on small screens. The hero preview map was six abstract blobs. WorldBackdrop now renders a hand-traced simplified equirectangular world map, with pins and arcs drawn inside the SVG viewBox so they stay anchored to real locations under any container crop. A projectLonLat() helper converts lon/lat, and the landing pins/arcs now sit at real QTHs matching the recent-contacts preview list, with great-circle-style arcs from the home station. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves the public landing experience by ensuring authentication CTAs remain accessible on small screens and by replacing the abstract hero backdrop with a location-anchored world map that supports projected pins and arcs.
Changes:
- Keep Sign in and Get started visible on mobile by adjusting landing header button classes.
- Replace the previous “blob” backdrop with a simplified equirectangular world map and render pins/arcs inside the SVG viewBox.
- Add and export a
projectLonLat(lon, lat)helper and update landing preview pins/arcs to use real-world coordinates.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
src/components/ui/world-backdrop.tsx |
Replaces silhouette blobs with a traced equirectangular map; moves pins/arcs into the SVG viewBox and exports projectLonLat() for coordinate projection. |
src/app/page.tsx |
Updates landing header button visibility/padding and uses projectLonLat() to place real-world pins with generated arcs from a home QTH. |
…at inputs Addresses Copilot review feedback on #224. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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
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.
Summary
smbreakpoint (hidden sm:inline-flex), leaving mobile visitors with no obvious way to log in. Both header buttons now stay visible, with slightly tighter padding on small screens so brand + Sign in + Get started fit. (Navbar.tsxwas checked too — it only renders on authenticated pages, so the landing header was the only gap.)WorldBackdropnow renders a hand-traced simplified equirectangular world map (all continents plus Greenland, UK/Ireland, Iceland, Japan, Madagascar, New Zealand, Black Sea/Caspian cutouts), low-poly with rounded joins to match the dark aesthetic.preserveAspectRatio: slicecrops the container. New exportedprojectLonLat(lon, lat)helper converts coordinates.Testing
npm run lint,npm run typecheck,npm run buildall pass.🤖 Generated with Claude Code