Mobile parity (continued from #21)#33
Open
adhit-r wants to merge 4 commits into
Open
Conversation
This commit addresses several mobile UX issues identified during the mobile parity audit: - Fixed overlapping labels in the timeline scrubber on mobile viewports. - Resolved clutter and overlapping labels for 3D event markers by adding deterministic vertical staggering and responsive font sizing. - Optimized the navigation rail for mobile by shifting to a horizontal bar with larger touch targets and decluttering secondary items. - Improved responsiveness of the landing page heading and CTA buttons. - Made HUD labels responsive to prevent collision on small screens. - Adjusted desktop Datapad width for better scaling on smaller desktop/tablet viewports.
This commit adds a systematic checklist for mobile parity and touch-readability as part of the mobile audit resolution.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Layers on top of the cherry-picked mobile-parity work from @theshantanujoshi to land the 3 outstanding review blockers and 4 non-blocking suggestions, so the PR can ship without further round trips. Blockers fixed: 1. NavRail mobile bar — Legends toggle was silently dropped during the parity refactor. Restored as an inline compact pill (same styling vocabulary as the AtlasToggle "mini" variant; uses the legends accent color and "L" letter glyph the desktop rail uses). 2. NavRail mobile imports — removed the unused `List` and `DotsThreeVertical` imports that were staged for the never-shipped "More menu" placeholder. (Copilot autofix already removed the unused `cn` import.) 3. DatapadDrawer Crawl button — was gated to `entity.type === "film"`, which dropped a desktop affordance from mobile (the Crawl works for every entity since buildEntityCrawl composes per-entity text). Ungated + styling synced with desktop's Datapad header button (gap-1.5, no bg fill, 2xs label). Worthwhile suggestions also applied: - AppShell crawl-open chrome bleed: switched from `{!crawlOpen && <X />}` (unmounts on every crawl, discards internal state) to `<motion.div className={crawlOpen ? "hidden" : ""}>` so NavRail + TimelineScrubber state survives the cinematic. - EntityCrawl effect cleanup: defensive `setGlobalCrawlOpen(false)` in the open-effect cleanup so the global flag stays consistent even when `open` flips false externally without going through `finish()` — would otherwise leave AppShell hiding chrome forever. - TimelineView CornerHud: era readout (the only feedback for the scrubber drag) now visible at all viewport widths; the three contextual labels stay sm:block. - AppShell sidebar grid: `minmax(260px, 22vw)` → `clamp(260px, 22vw, 400px)` since 22vw exceeds the Datapad's calibrated max on wide monitors. - NavRail mobile tablist: added `overflow-x-auto` so future tabs don't break the layout silently. Verified: tsc clean, `next build` succeeds, no new bundle bloat (/explore: 480 kB, unchanged).
SafeDep Report Summary
No dependency changes detected. Nothing to scan. Installation is not linked with SafeDep Tenant. Click here to optionally link your GitHub App installation with SafeDep Tenant. This report is generated by SafeDep Github App |
There was a problem hiding this comment.
Pull request overview
Continues the Explorer UI “mobile parity” effort by restoring missing mobile affordances (notably Legends and Crawl), improving small-viewport readability, and ensuring cinematic crawls can hide chrome without unmounting key UI state.
Changes:
- Add a global
crawlOpenflag to coordinate chrome hiding during Opening/Entity crawls. - Restore/adjust mobile navigation + Datapad drawer actions (Legends toggle, Crawl button, overflow handling).
- Improve mobile legibility in Timeline/Galaxy HUD and event markers; clamp desktop Datapad width.
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| lib/store.ts | Adds global crawlOpen state + setter used to hide chrome during crawls. |
| docs/mobile-checklist.md | Adds a mobile verification checklist for Explorer UI changes. |
| components/timeline/TimelineView.tsx | Keeps era readout visible on mobile while hiding other HUD labels under sm. |
| components/timeline/EventMarker.tsx | Adds deterministic vertical staggering + improves label sizing for mobile. |
| components/OpeningCrawl.tsx | Integrates global crawlOpen updates and adjusts skip button spacing for safe areas. |
| components/galaxy/GalaxyCanvas.tsx | Refines HUD spacing/visibility for mobile (less clutter, safer margins). |
| components/explorer/TimelineScrubber.tsx | Hides secondary anchors on mobile and adjusts label positioning near edges. |
| components/explorer/NavRail.tsx | Updates desktop/mobile rail styling, restores mobile Legends toggle, adds horizontal overflow handling. |
| components/explorer/DatapadDrawer.tsx | Adds Crawl button/overlay support in the mobile Datapad drawer. |
| components/explorer/AppShell.tsx | Uses crawlOpen to hide (not unmount) chrome regions during crawls; clamps desktop sidebar width. |
| components/EntityCrawl.tsx | Integrates global crawlOpen updates and adds defensive cleanup to avoid stuck hidden chrome. |
| app/page.tsx | Minor landing page typography/spacing tweaks for smaller screens. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+105
to
+120
| <div | ||
| key={a.year} | ||
| className={cn( | ||
| "absolute top-0 -translate-x-1/2", | ||
| a.mobileHidden && "hidden md:block" | ||
| )} | ||
| style={{ left: `${left}%` }} | ||
| > | ||
| <div className="h-2 w-px bg-fg-dim" aria-hidden /> | ||
| <span className="absolute left-1/2 top-3 -translate-x-1/2 whitespace-nowrap font-mono text-[10px] uppercase tracking-[0.08em] text-fg-dim"> | ||
| <span | ||
| className={cn( | ||
| "absolute left-1/2 top-3 -translate-x-1/2 whitespace-nowrap px-2 font-mono text-[10px] uppercase tracking-[0.08em] text-fg-dim", | ||
| left < 5 && "translate-x-0 left-0", | ||
| left > 95 && "-translate-x-full left-auto right-0" | ||
| )} | ||
| > |
Comment on lines
52
to
+55
| className="rounded-md p-2.5 text-fg-muted transition-colors hover:text-fg-primary" | ||
| aria-label="Back to landing" | ||
| > | ||
| <CaretLeft size={16} weight="regular" /> | ||
| <CaretLeft size={18} weight="regular" /> |
Comment on lines
12
to
+16
| import type { PersonImage } from "@/lib/data/loadPersonImages"; | ||
| import { PlanetDetail } from "@/components/planet/PlanetDetail"; | ||
| import { HoloStageButton } from "@/components/holostage"; | ||
| import { EntityCrawl } from "@/components/EntityCrawl"; | ||
| import { Play } from "@phosphor-icons/react"; |
|
|
||
| ## 4. Datapad (Mobile Drawer) | ||
| - [ ] **Pivot Parity**: All pivot buttons (Galaxy, Timeline, Lineage) must be present and functional. | ||
| - [ ] **Crawl Support**: Film entities must show a "Crawl" button that triggers the cinematic opening. |
Owner
Author
|
Holding this one for now. The PR still has 4 unresolved review threads, and local validation also fails
Please address the open threads first: TimelineScrubber conflicting Tailwind position classes, unused |
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
Continues the mobile-parity work started by @theshantanujoshi in #21 — cherry-picks the three substantive commits from that branch (with author attribution preserved) and layers the three review blockers + four worthwhile suggestions on top so we can ship without further round trips.
Built on top of the cinematic Story Mode + Event Cinematic Registry that landed on
mainafter #21 was opened.What's from @theshantanujoshi (cherry-picked, original authorship)
feat: mobile parity audit and UX fixes(88bc523)docs: add mobile verification checklist(c9381e5)Potential fix for pull request finding(6983695) — GitHub Copilot Autofix, unusedcnimportThe cherry-pick resolved real merge conflicts against
main— the original PR'sMerge maincommit had silently droppedstoryandcinematicfromINITIALstate inlib/store.ts, which would have broken Story Mode at runtime. That's now fixed.What I added (
9fa0b67)Blockers
minivariant vocabulary; uses the legends accent color and the "L" letter glyph the desktop rail uses.ListandDotsThreeVertical(staged for a never-shipped "More menu").entity.type === "film", dropping a desktop affordance on mobile.buildEntityCrawlcomposes per-entity text, so the button now renders for every entity. Styling synced with desktop Datapad header (gap-1.5, no bg fill, 2xs label).Worthwhile suggestions also applied
{!crawlOpen && <X />}was discardingNavRail+TimelineScrubberinternal state every cinematic. Switched to<motion.div className={crawlOpen ? "hidden" : ""}>.setGlobalCrawlOpen(false)in the open-effect cleanup so the global flag stays consistent ifopenflips false externally without going throughfinish()(would otherwise leave AppShell hiding chrome forever).sm:blockto avoid mobile clutter.minmax(260px, 22vw)→clamp(260px, 22vw, 400px)— at 1920px width, 22vw exceeds the Datapad's calibrated max.overflow-x-autoso future tabs don't silently break layout.What's intentionally not in this PR
top-8already clears most notches; iPhone Pro polish is nice-to-have)Verification
tsc --noEmitcleannext buildsucceeds,/exploreroute at 480 kB (no bundle bloat)Closes
Closes #21 (work credited to @theshantanujoshi via preserved git authorship on the first three commits)
Test plan
npm run typecheckNEXT_PUBLIC_BASE_PATH=/holocron npm run build🤖 Generated with Claude Code