code/yieldomega
Watch
4
0
Fork
You've already forked yieldomega
 0
Code Issues 1 Pull requests 1 Projects Releases Packages Wiki Activity

Mobile: music UI overlaps top menu card #103

New issue
Closed
opened 2026-04-30 14:22:32 +00:00 by PlasticDigits · 13 comments
PlasticDigits commented 2026-04-30 14:22:32 +00:00 (Migrated from gitlab.com)

Summary

On mobile view, the music player overlaps slightly with the top menu card.

Screenshot

photo_2026-04-30_23-20-13

Steps to reproduce

  1. Open the experience on a mobile viewport or device.
  2. Compare the music UI to the top menu card.

Expected behavior

Music should sit fully above the top menu card with no visual overlap.

Actual behavior

Music overlaps slightly with the top menu card.

Recommended fix

Add extra padding at the top in the mobile layout so the music clears the top menu card.

Acceptance criteria

  • On mobile breakpoints, the music UI does not overlap the top menu card; there is clear separation.
  • Behavior is verified on typical phone widths (narrow and common layouts).
  • Tablet/desktop layouts are unchanged unless we intentionally adjust them (scoped mobile spacing is preferred).
## Summary On mobile view, the music player overlaps slightly with the top menu card. ## Screenshot ![photo_2026-04-30_23-20-13](/uploads/acb088f0ab45d81bc9c97b70705bcbd9/photo_2026-04-30_23-20-13.jpg) ## Steps to reproduce 1. Open the experience on a mobile viewport or device. 2. Compare the music UI to the top menu card. ## Expected behavior Music should sit fully above the top menu card with no visual overlap. ## Actual behavior Music overlaps slightly with the top menu card. ## Recommended fix Add extra padding at the top in the mobile layout so the music clears the top menu card. ## Acceptance criteria - On mobile breakpoints, the music UI does not overlap the top menu card; there is clear separation. - Behavior is verified on typical phone widths (narrow and common layouts). - Tablet/desktop layouts are unchanged unless we intentionally adjust them (scoped mobile spacing is preferred).
PlasticDigits commented 2026-04-30 15:05:11 +00:00 (Migrated from gitlab.com)

mentioned in commit cl8y-bridge-monorepo@1b7a55147cdc780d91b9b85d08bb6ddba8f566c3

mentioned in commit cl8y-bridge-monorepo@1b7a55147cdc780d91b9b85d08bb6ddba8f566c3
PlasticDigits commented 2026-04-30 15:05:21 +00:00 (Migrated from gitlab.com)

GL-126 fix merged to main (commit 1b7a551)

@Brouie — please verify on a real phone / mobile emulation when you have a moment. Issue left open until you confirm.

What changed

  • Mobile-only clearance below the sticky NavBar stack: <main> now uses pt-6 below the md breakpoint (was pt-3); md: and up still use md:pt-4 / md:pb-8 (unchanged tablet/desktop rhythm per acceptance criteria).
  • The layout hero glow anchor is lower on small screens (top-6 vs md:top-2) so blur-3xl does not crowd the nav edge.
  • Class strings are centralized in packages/frontend/src/components/layout/layoutShellClasses.ts (documented as INV-MOB1 in docs/FRONTEND_BRIDGE_INVARIANTS.md; agent skill skills/agent-frontend-mobile-layout.md).

Verification checklist

  • Narrow mobile (~360–430px width): primary content / any top media UI sits below the bordered nav card with visible gap; no overlap when scrolling from top.
  • Common phone width (~390×844 or similar): same — separation looks intentional, not cramped.
  • Tablet / desktop (md+): vertical spacing matches pre-fix (no extra top gap vs before cl8y-bridge-monorepo#126).
  • Optional: run npm run test:run -- src/components/layout/layoutShellClasses.test.ts in packages/frontend (Vitest guard on the Tailwind tokens).

If anything still clips on a specific embed or experience route, note viewport + URL and we can tune only the <md tokens in layoutShellClasses.ts.

## GL-126 fix merged to `main` (commit `1b7a551`) @Brouie — please verify on a real phone / mobile emulation when you have a moment. Issue left **open** until you confirm. ### What changed - **Mobile-only** clearance below the sticky NavBar stack: `<main>` now uses `pt-6` below the `md` breakpoint (was `pt-3`); **`md:` and up** still use `md:pt-4` / `md:pb-8` (unchanged tablet/desktop rhythm per acceptance criteria). - The **layout hero glow** anchor is **lower** on small screens (`top-6` vs `md:top-2`) so `blur-3xl` does not crowd the nav edge. - Class strings are centralized in `packages/frontend/src/components/layout/layoutShellClasses.ts` (documented as **INV-MOB1** in `docs/FRONTEND_BRIDGE_INVARIANTS.md`; agent skill `skills/agent-frontend-mobile-layout.md`). ### Verification checklist - [ ] **Narrow mobile** (~360–430px width): primary content / any top media UI sits **below** the bordered nav card with visible gap; **no** overlap when scrolling from top. - [ ] **Common phone width** (~390×844 or similar): same — separation looks intentional, not cramped. - [ ] **Tablet / desktop** (`md`+): vertical spacing matches **pre-fix** (no extra top gap vs before cl8y-bridge-monorepo#126). - [ ] Optional: run `npm run test:run -- src/components/layout/layoutShellClasses.test.ts` in `packages/frontend` (Vitest guard on the Tailwind tokens). If anything still clips on a specific embed or experience route, note viewport + URL and we can tune **only** the `<md` tokens in `layoutShellClasses.ts`.
PlasticDigits commented 2026-05-01 02:57:59 +00:00 (Migrated from gitlab.com)

moved from cl8y-bridge-monorepo#126

moved from cl8y-bridge-monorepo#126
PlasticDigits commented 2026-05-01 03:00:11 +00:00 (Migrated from gitlab.com)

mentioned in commit cl8y-bridge-monorepo@05d37aaebeca1438e4ee1cb7ac52f9d47604a800

mentioned in commit cl8y-bridge-monorepo@05d37aaebeca1438e4ee1cb7ac52f9d47604a800
PlasticDigits commented 2026-05-01 03:00:11 +00:00 (Migrated from gitlab.com)

mentioned in issue cl8y-bridge-monorepo#126

mentioned in issue cl8y-bridge-monorepo#126
PlasticDigits commented 2026-05-01 03:05:33 +00:00 (Migrated from gitlab.com)

mentioned in commit cl8y-bridge-monorepo@ae28b7b69155da80f94079432f6a00dec0185b85

mentioned in commit cl8y-bridge-monorepo@ae28b7b69155da80f94079432f6a00dec0185b85
PlasticDigits commented 2026-05-01 03:11:47 +00:00 (Migrated from gitlab.com)

mentioned in commit 320021e460

mentioned in commit 320021e4605e998bfe267443b5d7a20527106cb0
PlasticDigits commented 2026-05-01 03:12:14 +00:00 (Migrated from gitlab.com)

GitLab #103 — mobile dock clearance merged (INV-AUDIO-103)

This MR/advance fixes Work item #103 on main (320021e).

What changed

Verification checklist for @Brouie

  • Narrow mobile (~360–430px): Music bubble fully above the cream nav card — clear gap, no overlap at scroll rest.
  • ~390×844 (or similar): Same with dock collapsed and expanded (details chevron).
  • Tablet/desktop (≥721px): Header top spacing matches previous baseline (no accidental mobile-only regression).
  • Notch / safe-area: Spot-check iOS or emulation — header clears dock without clipping into status bar.
  • Optional: cd frontend && npm ci && npm run test -- src/audio/mobileAlbumDockLayout.test.ts

Issue left open pending your confirmation on a real device. Thanks!

/cc @Brouie

## GitLab #103 — mobile dock clearance merged (INV-AUDIO-103) This MR/advance fixes **[Work item #103](https://gitlab.com/PlasticDigits/yieldomega/-/work_items/103)** on **`main`** (`320021e`). ### What changed - **Scoped mobile spacing (`max-width: 720px`):** `.app-header` now uses `margin-top: max(0.75rem, calc(env(safe-area-inset-top, 0px) + 4.5rem))` so the fixed **Blockie Hills** dock (`.album-player-dock`, z-index 1050) sits **above** the bordered nav card with a visible gap — no overlap on typical phones. - **Dock position unchanged:** `top` / `right` on the dock stay as in **#68**; **tablet/desktop** (`min-width: 721px`) keeps **`margin-top: 1rem`** on the header. - **Maintainability:** `MOBILE_HEADER_TOP_CLEARANCE_BELOW_SAFE_AREA_REM` in [`frontend/src/audio/mobileAlbumDockLayout.ts`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/frontend/src/audio/mobileAlbumDockLayout.ts) **must** stay aligned with the **`+ 4.5rem`** term in [`frontend/src/index.css`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/frontend/src/index.css); Vitest guards parity ([`mobileAlbumDockLayout.test.ts`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/frontend/src/audio/mobileAlbumDockLayout.test.ts)). - **Docs:** [`docs/testing/invariants-and-business-logic.md`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/docs/testing/invariants-and-business-logic.md) (**INV-AUDIO-103**), [`manual-qa-checklists.md` §103](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/docs/testing/manual-qa-checklists.md), [`sound-effects-recommendations.md` §8](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/docs/frontend/sound-effects-recommendations.md), [`timecurve-views.md`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/docs/frontend/timecurve-views.md); contributor skill [`skills/contributor-mobile-album-dock/SKILL.md`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/skills/contributor-mobile-album-dock/SKILL.md). ### Verification checklist for @Brouie - [ ] **Narrow mobile (~360–430px):** Music bubble fully **above** the cream nav card — clear gap, no overlap at scroll rest. - [ ] **~390×844 (or similar):** Same with dock **collapsed** and **expanded** (details chevron). - [ ] **Tablet/desktop (`≥721px`):** Header top spacing matches previous baseline (no accidental mobile-only regression). - [ ] **Notch / safe-area:** Spot-check iOS or emulation — header clears dock without clipping into status bar. - [ ] **Optional:** `cd frontend && npm ci && npm run test -- src/audio/mobileAlbumDockLayout.test.ts` Issue left **open** pending your confirmation on a real device. Thanks! /cc @Brouie
Brouie commented 2026-05-01 12:27:58 +00:00 (Migrated from gitlab.com)

mentioned in issue #100

mentioned in issue #100
Brouie commented 2026-05-01 14:24:02 +00:00 (Migrated from gitlab.com)

mentioned in issue #107

mentioned in issue #107
PlasticDigits commented 2026-05-02 04:41:38 +00:00 (Migrated from gitlab.com)

mentioned in commit 33d8d07331

mentioned in commit 33d8d07331956bec569b92e18ca13ad1ea663625
PlasticDigits commented 2026-05-02 04:41:38 +00:00 (Migrated from gitlab.com)

mentioned in commit 7ec88284a2

mentioned in commit 7ec88284a22365c4637f357e1e2a2ec4690f78fa
Brouie commented 2026-05-04 01:09:11 +00:00 (Migrated from gitlab.com)

verified on 320021e (INV-AUDIO-103 fix). devtools mobile viewport at 390×844 (iPhone 12 Pro):

  • music dock ("Starline Overworld" + 🔇 + ▸) sits clearly above the bordered nav card with visible gap, no overlap at scroll rest
  • nav card renders cleanly without clipping into the dock
  • sub-tabs (Simple / Arena / Protocol) render below the nav card without crowding
  • INV-AUDIO-103 parity already verified bidirectionally on #107 (vitest fails on either CSS or TS literal drift)

passes the narrow-mobile and ~390×844 acceptance criteria. tablet/desktop unchanged per the existing media-query gating in index.css line 3157.

verified on `320021e` (INV-AUDIO-103 fix). devtools mobile viewport at 390×844 (iPhone 12 Pro): - music dock ("Starline Overworld" + 🔇 + ▸) sits clearly above the bordered nav card with visible gap, no overlap at scroll rest - nav card renders cleanly without clipping into the dock - sub-tabs (Simple / Arena / Protocol) render below the nav card without crowding - INV-AUDIO-103 parity already verified bidirectionally on #107 (vitest fails on either CSS or TS literal drift) passes the narrow-mobile and ~390×844 acceptance criteria. tablet/desktop unchanged per the existing media-query gating in index.css line 3157.
Brouie (Migrated from gitlab.com) closed this issue 2026-05-04 03:10:16 +00:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
cac-design-issue-544
renovate/configure
No results found.
Labels
Clear labels   
agent:fix_bugfix

   
agent:fix_conflicts

   
agent:fix_security

   
agent:gap_analysis

   
agent:implement

   
agent:open_issues

   
agents

   
agent:security_audit

   
agent:verify
  
area
timecurve

  
arena

   
arena-v2

   
audit

   
block:feature_review

   
block:security

   
bug

   
contracts

   
design

   
devops

   
docs
Documentation

  
documentation

   
enhancement

   
epic
Epic / umbrella issue

  
feature

   
frontend

   
indexer

   
low priority
Low priority, investigate other issues first

  
megaeth

   
operations

   
ops
Deploy and operations

  
performance

   
QA

   
qa checklist

   
referrals

   
removal
Legacy removal

  
security

   
smart-contracts

   
tech-debt

   
testing

   
time-arena
TimeArena v2 revamp

  
timecurve

   
visual-qa
No labels
agent:fix_bugfix
agent:fix_conflicts
agent:fix_security
agent:gap_analysis
agent:implement
agent:open_issues
agents
agent:security_audit
agent:verify
area
timecurve
arena
arena-v2
audit
block:feature_review
block:security
bug
contracts
design
devops
docs
documentation
enhancement
epic
feature
frontend
indexer
low priority
megaeth
operations
ops
performance
QA
qa checklist
referrals
removal
security
smart-contracts
tech-debt
testing
time-arena
timecurve
visual-qa
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
code/yieldomega#103
No description provided.