Mobile and tablet layouts have clipped/overflowing content and poor column reflow #201

New issue

Closed

opened 2026-05-13 05:45:32 +00:00 by nullvector_ux · 11 comments

nullvector_ux commented 2026-05-13 05:45:32 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

Description @PlasticDigits

On mobile and tablet viewports, some TimeCurve/WarBow sections do not fit cleanly within the available screen area. On iPhone 14 Pro Max viewport, the buy panel content is very tight and parts of the layout appear clipped near the right edge. On iPad Air/iPad Mini viewport, the Counterpunch Revenge card heading/content overflows outside the parent container border.

This affects both safe-area usability and tablet reflow behavior.

Related Checklist Items

2.2 — Main content stays within safe areas
Status: Fail
Reason: Some content appears too close to the viewport edge and may be clipped or hard to use on mobile-sized screens.

2.4 — Tablet layout uses width sensibly
Status: Fail
Reason: The split-column layout does not reflow properly on tablet viewport. The Counterpunch Revenge heading/card overflows outside the container.

Steps to Reproduce

1. Open the app in Chrome.
2. Open DevTools.
3. Enable mobile/tablet viewport using Ctrl + Shift + M.
4. Select iPhone 14 Pro Max viewport.
5. Go to the TimeCurve/WarBow buy panel.
6. Observe the right-side clipping/tight layout around the buy panel.
7. Change viewport to iPad Air or iPad Mini.
8. Go to the WarBow/Defense section with Guard and Counterpunch Revenge cards.
9. Observe the Counterpunch Revenge card overflow.

Expected Result

Mobile and tablet layouts should stay within safe screen areas. Cards, headings, and CTAs should fit inside their containers without clipping, overflow, or stranded headings.

Actual Result

On mobile viewport, the buy panel content appears cramped and partially clipped near the right side. On tablet viewport, the Counterpunch Revenge card/heading overflows outside the container border instead of reflowing cleanly.

Severity

Medium

Priority

Medium

Labels

bug, ux, frontend, responsive, layout, mobile, tablet

Evidence

{width="610" height="544"}

{width="604" height="600"}

## Description @PlasticDigits On mobile and tablet viewports, some TimeCurve/WarBow sections do not fit cleanly within the available screen area. On iPhone 14 Pro Max viewport, the buy panel content is very tight and parts of the layout appear clipped near the right edge. On iPad Air/iPad Mini viewport, the **Counterpunch Revenge** card heading/content overflows outside the parent container border. This affects both safe-area usability and tablet reflow behavior. ## Related Checklist Items **2.2 — Main content stays within safe areas**\ **Status:** Fail\ **Reason:** Some content appears too close to the viewport edge and may be clipped or hard to use on mobile-sized screens. **2.4 — Tablet layout uses width sensibly**\ **Status:** Fail\ **Reason:** The split-column layout does not reflow properly on tablet viewport. The **Counterpunch Revenge** heading/card overflows outside the container. ## Steps to Reproduce 1. Open the app in Chrome. 2. Open DevTools. 3. Enable mobile/tablet viewport using `Ctrl + Shift + M`. 4. Select **iPhone 14 Pro Max** viewport. 5. Go to the TimeCurve/WarBow buy panel. 6. Observe the right-side clipping/tight layout around the buy panel. 7. Change viewport to **iPad Air** or **iPad Mini**. 8. Go to the WarBow/Defense section with **Guard** and **Counterpunch Revenge** cards. 9. Observe the Counterpunch Revenge card overflow. ## Expected Result Mobile and tablet layouts should stay within safe screen areas. Cards, headings, and CTAs should fit inside their containers without clipping, overflow, or stranded headings. ## Actual Result On mobile viewport, the buy panel content appears cramped and partially clipped near the right side. On tablet viewport, the **Counterpunch Revenge** card/heading overflows outside the container border instead of reflowing cleanly. ## Severity **Medium** ## Priority **Medium** ## Labels `bug`, `ux`, `frontend`, `responsive`, `layout`, `mobile`, `tablet` ## Evidence {width="610" height="544"} {width="604" height="600"}

nullvector_ux commented 2026-05-13 05:45:59 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

changed the description

changed the description

nullvector_ux commented 2026-05-13 05:46:15 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

changed the description

changed the description

PlasticDigits commented 2026-05-13 07:00:11 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

mentioned in commit 82830394365a5dc915103d5bfae9a2a9b29ffbd7

mentioned in commit 82830394365a5dc915103d5bfae9a2a9b29ffbd7

PlasticDigits commented 2026-05-13 07:03:06 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

Merged and pushed the responsive layout fix for GitLab #201 to main.

What changed:

• Reclaimed phone-width space in the TimeCurve Simple buy panel by removing desktop coin-stack padding, hiding the decorative cutout, and stacking the slider/input row at narrow widths.
• Let Arena WarBow hero cards contain tablet layouts by relaxing spotlight padding, widening action-card tracks, and wrapping Guard / Counterpunch Revenge headings and revenge rows.
• Added INV-FRONTEND-201-RESPONSIVE-LAYOUT plus cross-links in TimeCurve docs, manual QA, and skills/ docs for third-party agent/player guidance.
• Added focused CSS invariant coverage and Playwright viewport checks for the Simple mobile view and Arena tablet WarBow surface.

Verification completed:

• npm test -- timeCurveResponsiveLayoutCss.test.ts
• npm test
• npm run lint
• npm run typecheck
• Full local stack with Anvil, bot swarm, indexer, and Vite frontend
• Indexer status healthy (schema_version 1.18.0) and indexed TimeCurve buys present from swarm activity
• Live Playwright check: 430x932 /timecurve has no horizontal overflow
• Live Playwright check: 768x1024 /timecurve/arena has no horizontal overflow and the Counterpunch/Revenge card stays inside its grid

Manual verification requested: @nullvector_ux please verify on real or emulated iPhone 14 Pro Max / narrow phone and iPad Mini/Air widths that /timecurve and /timecurve/arena no longer clip on the right edge. Leaving this issue open for UX verification.

Merged and pushed the responsive layout fix for GitLab #201 to `main`. What changed: - Reclaimed phone-width space in the TimeCurve Simple buy panel by removing desktop coin-stack padding, hiding the decorative cutout, and stacking the slider/input row at narrow widths. - Let Arena WarBow hero cards contain tablet layouts by relaxing spotlight padding, widening action-card tracks, and wrapping Guard / Counterpunch Revenge headings and revenge rows. - Added `INV-FRONTEND-201-RESPONSIVE-LAYOUT` plus cross-links in TimeCurve docs, manual QA, and `skills/` docs for third-party agent/player guidance. - Added focused CSS invariant coverage and Playwright viewport checks for the Simple mobile view and Arena tablet WarBow surface. Verification completed: - [x] `npm test -- timeCurveResponsiveLayoutCss.test.ts` - [x] `npm test` - [x] `npm run lint` - [x] `npm run typecheck` - [x] Full local stack with Anvil, bot swarm, indexer, and Vite frontend - [x] Indexer status healthy (`schema_version` 1.18.0) and indexed TimeCurve buys present from swarm activity - [x] Live Playwright check: `430x932 /timecurve` has no horizontal overflow - [x] Live Playwright check: `768x1024 /timecurve/arena` has no horizontal overflow and the Counterpunch/Revenge card stays inside its grid Manual verification requested: @nullvector_ux please verify on real or emulated iPhone 14 Pro Max / narrow phone and iPad Mini/Air widths that `/timecurve` and `/timecurve/arena` no longer clip on the right edge. Leaving this issue open for UX verification.

nullvector_ux commented 2026-05-13 12:03:05 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

@PlasticDigits

iPad Mini emulation

Checklist Item: 2.4 — Tablet layout uses width sensibly; split columns reflow without orphaned headings or stranded CTAsStatus: FAILDevice/Viewport: iPad Mini emulation, 768x1024Reason: On iPad Mini viewport, the landing page card grid does not fit within the visible screen. The right-side card/image is cut off, indicating the tablet layout is not reflowing correctly.Evidence: Screenshot attached.

Also this one fits:

Checklist Item: 2.6 — Images and illustrations scale without awkward croppingStatus: FAILDevice/Viewport: iPad Mini emulation, 768x1024Reason: The landing page card images are partially cut off on the right side instead of scaling or wrapping cleanly within the tablet viewport.Evidence: Screenshot attached.

And possibly:

Checklist Item: 2.1 — No horizontal scroll on any route at each viewport profileStatus: FAILDevice/Viewport: iPad Mini emulation, 768x1024Reason: Content appears wider than the viewport, causing the right-side landing page card to be clipped off-screen.

Evidence:

{width=509 height=600}

iPhone 14 Pro Max emulation

Checklist Item: 4.9 — Audio / media dock does not overlap nav, primary CTAs, or leaderboard table on narrow breakpointsStatus: FAILDevice/Viewport: iPhone 14 Pro Max emulation, 430x932Reason: The audio/media dock overlaps the Arena buy panel content on mobile. It sits on top of the card/header area instead of staying separate from the main content.Evidence: Screenshot attached.

Also mark this one:

Checklist Item: 2.9 — Sticky or fixed regions do not obscure contentStatus: FAILDevice/Viewport: iPhone 14 Pro Max emulation, 430x932Reason: A fixed/sticky media control overlaps page content while scrolling, reducing readability and creating a visual obstruction.Evidence: Screenshot attached.

For the second screenshot, there is another issue:

Checklist Item: 2.8 — Long addresses, numeric values, and monospace strings wrap or truncate per designStatus: FAILDevice/Viewport: iPhone 14 Pro Max emulation, 430x932Reason: The long CL8Y balance/numeric value is not truncated or wrapped cleanly and becomes hard to read on mobile.

Evidence:

{width=672 height=600}

{width=679 height=600}

@PlasticDigits `iPad Mini emulation` `Checklist Item: 2.4 — Tablet layout uses width sensibly; split columns reflow without orphaned headings or stranded CTAsStatus: FAILDevice/Viewport: iPad Mini emulation, 768x1024Reason: On iPad Mini viewport, the landing page card grid does not fit within the visible screen. The right-side card/image is cut off, indicating the tablet layout is not reflowing correctly.Evidence: Screenshot attached.` Also this one fits: `Checklist Item: 2.6 — Images and illustrations scale without awkward croppingStatus: FAILDevice/Viewport: iPad Mini emulation, 768x1024Reason: The landing page card images are partially cut off on the right side instead of scaling or wrapping cleanly within the tablet viewport.Evidence: Screenshot attached.` And possibly: `Checklist Item: 2.1 — No horizontal scroll on any route at each viewport profileStatus: FAILDevice/Viewport: iPad Mini emulation, 768x1024Reason: Content appears wider than the viewport, causing the right-side landing page card to be clipped off-screen.` `Evidence: ` {width=509 height=600} `iPhone 14 Pro Max emulation` `Checklist Item: 4.9 — Audio / media dock does not overlap nav, primary CTAs, or leaderboard table on narrow breakpointsStatus: FAILDevice/Viewport: iPhone 14 Pro Max emulation, 430x932Reason: The audio/media dock overlaps the Arena buy panel content on mobile. It sits on top of the card/header area instead of staying separate from the main content.Evidence: Screenshot attached.` Also mark this one: `Checklist Item: 2.9 — Sticky or fixed regions do not obscure contentStatus: FAILDevice/Viewport: iPhone 14 Pro Max emulation, 430x932Reason: A fixed/sticky media control overlaps page content while scrolling, reducing readability and creating a visual obstruction.Evidence: Screenshot attached.` For the second screenshot, there is another issue: `Checklist Item: 2.8 — Long addresses, numeric values, and monospace strings wrap or truncate per designStatus: FAILDevice/Viewport: iPhone 14 Pro Max emulation, 430x932Reason: The long CL8Y balance/numeric value is not truncated or wrapped cleanly and becomes hard to read on mobile.` `Evidence:` {width=672 height=600} {width=679 height=600}

PlasticDigits commented 2026-05-13 15:13:33 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

mentioned in commit e2d5c8b26f

mentioned in commit e2d5c8b26ff9dfa4219fbc098d37ca5bac81939b

PlasticDigits commented 2026-05-14 14:18:46 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

Merged and pushed the follow-up responsive layout fix for GitLab #201 to main.

What changed:

• Reflowed the Home product-card grid to two tablet columns before the three-column desktop layout so iPad Mini/Air widths no longer clip the right-side cards/images.
• Added mobile TimeCurve route clearance under the fixed Blockie Hills audio dock so the Arena buy hub does not sit under the media controls.
• Hardened long TimeCurve numeric displays so CL8Y totals / buy-panel values wrap inside their cards instead of widening the page.
• Expanded INV-FRONTEND-201-RESPONSIVE-LAYOUT, manual QA docs, frontend design docs, and skills/README.md cross-links for third-party agent/player verification.
• Added/updated Vitest CSS invariants and Playwright viewport checks for /home, /timecurve, and /timecurve/arena.

Verification completed:

• npm test -- timeCurveResponsiveLayoutCss.test.ts homeCardGridCss.test.ts mobileAlbumDockLayout.test.ts
• npm test
• npm run lint (passes with existing Fast Refresh warning in IndexerConnectivityContext.tsx)
• npm run typecheck
• npm run build
• npm run test:e2e -- e2e/timecurve.spec.ts --workers=5
• Full local QA stack: Anvil + indexer + bot swarm + Vite frontend
• Indexer status healthy (schema_version 1.18.0) with live swarm Buy rows indexed
• Cursor browser MCP snapshots at the manually resized mobile viewport: /timecurve Simple and /timecurve/arena show cards within the viewport and the audio dock clear of primary content

Please verify:

• iPad Mini/Air emulation at /home: product cards/images fit without right-side clipping or horizontal scroll.
• iPhone 14 Pro Max/narrow phone at /timecurve: Simple buy panel remains inside safe width.
• iPhone 14 Pro Max/narrow phone at /timecurve/arena: Blockie Hills dock does not obscure the Arena buy card/header.
• Long CL8Y balances / totals wrap or compact cleanly and do not force horizontal scroll.

@nullvector_ux please verify on the reported emulated/real devices when you can. Leaving the issue open for UX confirmation.

Merged and pushed the follow-up responsive layout fix for GitLab #201 to `main`. What changed: - Reflowed the Home product-card grid to two tablet columns before the three-column desktop layout so iPad Mini/Air widths no longer clip the right-side cards/images. - Added mobile TimeCurve route clearance under the fixed Blockie Hills audio dock so the Arena buy hub does not sit under the media controls. - Hardened long TimeCurve numeric displays so CL8Y totals / buy-panel values wrap inside their cards instead of widening the page. - Expanded `INV-FRONTEND-201-RESPONSIVE-LAYOUT`, manual QA docs, frontend design docs, and `skills/README.md` cross-links for third-party agent/player verification. - Added/updated Vitest CSS invariants and Playwright viewport checks for `/home`, `/timecurve`, and `/timecurve/arena`. Verification completed: - [x] `npm test -- timeCurveResponsiveLayoutCss.test.ts homeCardGridCss.test.ts mobileAlbumDockLayout.test.ts` - [x] `npm test` - [x] `npm run lint` (passes with existing Fast Refresh warning in `IndexerConnectivityContext.tsx`) - [x] `npm run typecheck` - [x] `npm run build` - [x] `npm run test:e2e -- e2e/timecurve.spec.ts --workers=5` - [x] Full local QA stack: Anvil + indexer + bot swarm + Vite frontend - [x] Indexer status healthy (`schema_version` 1.18.0) with live swarm `Buy` rows indexed - [x] Cursor browser MCP snapshots at the manually resized mobile viewport: `/timecurve` Simple and `/timecurve/arena` show cards within the viewport and the audio dock clear of primary content Please verify: - [ ] iPad Mini/Air emulation at `/home`: product cards/images fit without right-side clipping or horizontal scroll. - [ ] iPhone 14 Pro Max/narrow phone at `/timecurve`: Simple buy panel remains inside safe width. - [ ] iPhone 14 Pro Max/narrow phone at `/timecurve/arena`: Blockie Hills dock does not obscure the Arena buy card/header. - [ ] Long CL8Y balances / totals wrap or compact cleanly and do not force horizontal scroll. @nullvector_ux please verify on the reported emulated/real devices when you can. Leaving the issue open for UX confirmation.

nullvector_ux commented 2026-05-14 14:55:11 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

Please verify: @PlasticDigits

• iPad Mini/Air emulation at /home: product cards/images fit without right-side clipping or horizontal scroll.
• iPhone 14 Pro Max/narrow phone at /timecurve: Simple buy panel remains inside safe width.
• iPhone 14 Pro Max/narrow phone at /timecurve/arena: Blockie Hills dock does not obscure the Arena buy card/header.
• Long CL8Y balances / totals wrap or compact cleanly and do not force horizontal scroll.

Please verify: @PlasticDigits * [x] iPad Mini/Air emulation at `/home`: product cards/images fit without right-side clipping or horizontal scroll. * [x] iPhone 14 Pro Max/narrow phone at `/timecurve`: Simple buy panel remains inside safe width. * [x] iPhone 14 Pro Max/narrow phone at `/timecurve/arena`: Blockie Hills dock does not obscure the Arena buy card/header. * [x] Long CL8Y balances / totals wrap or compact cleanly and do not force horizontal scroll.

PlasticDigits (Migrated from gitlab.com) closed this issue 2026-05-15 06:11:05 +00:00

PlasticDigits commented 2026-05-22 00:14:56 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

mentioned in issue #236

mentioned in issue #236

PlasticDigits commented 2026-05-27 07:07:47 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

mentioned in issue #258

mentioned in issue #258

PlasticDigits commented 2026-06-03 13:37:20 +00:00 (Migrated from gitlab.com)

• Copy link
• Copy Markdown

mentioned in merge request !414

mentioned in merge request !414

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

Subscribe

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#201

No description provided.