Skip to content
This repository was archived by the owner on May 25, 2026. It is now read-only.

fix: left-align picker copy and lift mobile button anchor - #70

Merged
ivorycrayon merged 2 commits into
mainfrom
fix/picker-align-and-mobile-button-height
May 24, 2026
Merged

fix: left-align picker copy and lift mobile button anchor#70
ivorycrayon merged 2 commits into
mainfrom
fix/picker-align-and-mobile-button-height

Conversation

@ivorycrayon

Copy link
Copy Markdown
Contributor

Two unrelated UX nits on the same surface, kept in separate commits.

Mobile button anchor (4f777a7)

The 70vmin mobile hero + the root's 39.3dvh --record-center-top put the CTA near 58% of the viewport on 390x844 portrait (iPhone 13-class). The lower half sat mostly empty and the button read as marooned rather than paired with the hero.

Pull the anchor to 34dvh in the 640px tier so the assembly recentres higher and the CTA lands near the visual midpoint. Hero stays 70vmin. Header zone still clears ~150px at 390x844 — enough for the picker's h1 + 3-line subtitle. The 380 / 360 / landscape tiers carry their own anchors and stay untouched.

Picker text alignment (d64e1db)

Stage's text-center default works for the short status views (landing / success / error / logged-out), but on the picker it left the heading floating above a left-aligned list, and the multi-line subtitle wrapped awkwardly mid-phrase.

Wrap the picker's h1 + subtitle in a w-full max-w-2xl text-left column so they sit flush with the row content. Other Stage callers keep the centered default.

Test plan

  • pnpm typecheck clean
  • pnpm test — 127 / 127 passing
  • pnpm lint — no new warnings (one pre-existing in src/app/page.tsx:41)
  • Preview at 390x844 portrait: CTA reads as paired with the hero, picker heading + subtitle line up with the list below

The 70vmin hero plus the root's 39.3dvh anchor put the CTA near 58%
of the viewport on 390x844 portrait, leaving the lower half mostly
empty. Set --record-center-top to 34dvh in the 640px tier so the
assembly recentres higher and the CTA lands near the visual midpoint
without shrinking the hero. The 380/360/landscape tiers are untouched.
Stage's text-center default works for the short status views but
reads as disconnected on the picker — the heading floats above a
left-aligned list. Wrap the picker's h1 + subtitle in a max-w-2xl
text-left column so they line up with the row content; other Stage
callers keep the centered default.
@ivorycrayon
ivorycrayon merged commit dbac440 into main May 24, 2026
1 check passed
@ivorycrayon
ivorycrayon deleted the fix/picker-align-and-mobile-button-height branch May 24, 2026 18:11
ivorycrayon added a commit that referenced this pull request May 24, 2026
Stage's text-center cascades into the list and centers each
PlaylistRow's name + track count — misaligned against the
left-anchored cover art and right-anchored Shuffle control.
Add text-left on the list wrapper so row text inherits left
alignment without per-row classes.

Removes the header text-left wrapper added in #70 (misread of
the intent); the section heading returns to Stage's centered
default.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant