Mobile: music UI overlaps top menu card

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

Steps to reproduce

Open the experience on a mobile viewport or device.
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/7e2b3fcc6ee9a83583ee187f8a06dfd7/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 1b7a55147c

mentioned in commit 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 GL-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 GL-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 (Migrated from gitlab.com) closed this issue

2026-05-01 02:57:59 +00:00

PlasticDigits commented

2026-05-01 02:58:40 +00:00

(Migrated from gitlab.com)

OPpened on wrong repo, reverting work

PlasticDigits commented

2026-05-01 03:00:11 +00:00

(Migrated from gitlab.com)

Closure note: This issue was filed against the wrong project. INV-MOB1 (mobile shell / sticky NavBar spacing) is tracked under PlasticDigits/yieldomega#103.

The bridge monorepo now references yieldomega #103 in docs and code comments (commit on main: docs update linking GL-103). No revert was needed for the layout implementation commit—the UI fix stays in cl8y-bridge-monorepo; only tracker cross-links were corrected.

**Closure note:** This issue was filed against the wrong project. INV-MOB1 (mobile shell / sticky NavBar spacing) is tracked under [**PlasticDigits/yieldomega#103**](https://gitlab.com/PlasticDigits/yieldomega/-/issues/103). The bridge monorepo now references yieldomega **#103** in docs and code comments (commit on `main`: docs update linking GL-103). No revert was needed for the layout implementation commit—the UI fix stays in cl8y-bridge-monorepo; only tracker cross-links were corrected.

PlasticDigits commented

2026-05-01 03:00:11 +00:00

(Migrated from gitlab.com)

mentioned in commit 05d37aaebe

mentioned in commit 05d37aaebeca1438e4ee1cb7ac52f9d47604a800

PlasticDigits commented

2026-05-01 03:05:32 +00:00

(Migrated from gitlab.com)

Update: The mobile layout changes that were landed on main (commit 1b7a551) have been reverted. They belonged to another product (yieldomega), not this repo, so no bridge-monorepo layout fix was required.

Reverts are on main (see e04c7e8 and ae28b7b). Docs/skills no longer reference that work or yieldomega.

**Update:** The mobile layout changes that were landed on `main` (commit `1b7a551`) have been **reverted**. They belonged to another product (yieldomega), not this repo, so no bridge-monorepo layout fix was required. Reverts are on `main` (see `e04c7e8` and `ae28b7b`). Docs/skills no longer reference that work or yieldomega.

PlasticDigits commented

2026-05-01 03:05:33 +00:00

(Migrated from gitlab.com)

mentioned in commit e04c7e8a8f

mentioned in commit e04c7e8a8f4f87b95cce6170cbfc1213dadd9482

Rows
Columns

Mobile: music UI overlaps top menu card #126

Summary

Screenshot

Steps to reproduce

Expected behavior

Actual behavior

Recommended fix

Acceptance criteria

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

What changed

Verification checklist

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