#146 - [responsive] TradePage collapses to single-column at iPad portrait — needs md: two-column layout - code/cl8y-dex-terraclassic

Brouie commented

2026-05-07 06:40:35 +00:00

(Migrated from gitlab.com)

@totdking — visual / responsive finding from source-level audit, assigning to you. extends DEX visual QA umbrella #133 and the responsive-layout work just landed in #136.

Scope

#136 fixed the header tablet collapse (768-1023px). this finding is about the TradePage which uses a single binary breakpoint at lg: (1024px) — so iPad-portrait users (768-1023px) get the full mobile stack despite plenty of horizontal real estate.

HIGH

frontend-dapp/src/pages/TradePage.tsx:

Line 117-118:

{/* Mobile / small: stacked */}
<div className="lg:hidden space-y-3">

Line 148-149:

{/* Desktop: resizable panels */}
<div className="hidden lg:block h-[min(85vh,920px)] min-h-[440px]">

The full chart + order book + ticket layout collapses into a single vertical column at any width below 1024px — including iPad-portrait widths around 768-1023px where there's plenty of horizontal real estate for a 2-column split.

Verified by grep: md:hidden / hidden md: does NOT appear ANYWHERE in frontend-dapp/src/. The codebase has zero tablet-only layout switches today. This means the precedent set by #136's fix (using useMediaQuery with HEADER_FULL_NAV_MIN_WIDTH_PX = 1024) is the only example so far, and TradePage is the most visible page that needs the same pattern.

Suggested fix shape

introduce a md: two-column layout for tablet portrait. one workable structure:

<md (mobile, <768px): existing single-column stack
md: to lg: (tablet, 768-1023px): chart + ticket side by side, order book collapsed under (or in a tabbed view)
>=lg (desktop, >=1024px): existing 3-panel resizable layout

three-state could either be CSS-only (Tailwind md:grid-cols-2 lg:hidden) or hooked into a useMediaQuery mirroring #136's approach. up to you / dev which fits the pattern better.

How to verify on local stack

Open dapp at http://127.0.0.1:3000
DevTools → toggle device toolbar (Cmd+Shift+M / Ctrl+Shift+M)
Set viewport to 768x1024 (iPad portrait) or 820x1180 (newer iPad)
Navigate to /trade or /trade/{pair_addr}
Observe the page renders the mobile-stack column even though horizontal width is 768+ px
Resize to >=1024 → desktop 3-panel layout kicks in. resize back to <1024 → collapses to single column

POLISH (lower priority, file as siblings if you find them)

other pages with similar narrow tablet treatment that you may want to walk during the same QA pass:

PoolPage.tsx:912 — filter row flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end. once it flips to row at sm:, search input + sort + order + checkbox all wrap onto multiple lines. a tablet-width pass could break the visual grid.
SwapPage.tsx:1038 — Trade Details grid grid-cols-2 ... sm:block sm:space-y-2 — flips from 2-col grid to stacked rows at >=sm. could hold the 2-col grid through md: for higher information density.
TraderPage.tsx:122, :179, :195 — stat grids grid-cols-2 md:grid-cols-4. surrounding hero/header at line 86 is flex-col sm:flex-row. worth a sweep at iPad portrait to check for double-jumps between 640px and 768px.

Severity

P2 — UX. trade is a primary surface; iPad-portrait is a real device class. a CEX-migrant trader on a tablet currently can't get the chart+ticket side-by-side experience they expect. compounds with #136's tablet header work — both gaps make iPad-portrait feel like a downgraded mobile rather than a real tablet experience.

Cross-reference

DEX #136 — header tablet collapse (already shipped, sister work)
DEX #133 — visual QA umbrella

cc @PlasticDigits

@totdking — visual / responsive finding from source-level audit, assigning to you. extends DEX visual QA umbrella #133 and the responsive-layout work just landed in #136. ## Scope #136 fixed the **header** tablet collapse (768-1023px). this finding is about the **TradePage** which uses a single binary breakpoint at `lg:` (1024px) — so iPad-portrait users (768-1023px) get the full mobile stack despite plenty of horizontal real estate. ## HIGH `frontend-dapp/src/pages/TradePage.tsx`: **Line 117-118**: ```tsx {/* Mobile / small: stacked */} <div className="lg:hidden space-y-3"> ``` **Line 148-149**: ```tsx {/* Desktop: resizable panels */} <div className="hidden lg:block h-[min(85vh,920px)] min-h-[440px]"> ``` The full chart + order book + ticket layout collapses into a single vertical column at any width below 1024px — including iPad-portrait widths around 768-1023px where there's plenty of horizontal real estate for a 2-column split. Verified by grep: `md:hidden` / `hidden md:` does NOT appear ANYWHERE in `frontend-dapp/src/`. **The codebase has zero tablet-only layout switches today.** This means the precedent set by #136's fix (using `useMediaQuery` with `HEADER_FULL_NAV_MIN_WIDTH_PX = 1024`) is the only example so far, and TradePage is the most visible page that needs the same pattern. ## Suggested fix shape introduce a `md:` two-column layout for tablet portrait. one workable structure: - `<md` (mobile, <768px): existing single-column stack - `md:` to `lg:` (tablet, 768-1023px): chart + ticket side by side, order book collapsed under (or in a tabbed view) - `>=lg` (desktop, >=1024px): existing 3-panel resizable layout three-state could either be CSS-only (Tailwind `md:grid-cols-2 lg:hidden`) or hooked into a `useMediaQuery` mirroring `#136`'s approach. up to you / dev which fits the pattern better. ## How to verify on local stack 1. Open dapp at http://127.0.0.1:3000 2. DevTools → toggle device toolbar (Cmd+Shift+M / Ctrl+Shift+M) 3. Set viewport to **768x1024** (iPad portrait) or **820x1180** (newer iPad) 4. Navigate to `/trade` or `/trade/{pair_addr}` 5. Observe the page renders the mobile-stack column even though horizontal width is 768+ px 6. Resize to >=1024 → desktop 3-panel layout kicks in. resize back to <1024 → collapses to single column ## POLISH (lower priority, file as siblings if you find them) other pages with similar narrow tablet treatment that you may want to walk during the same QA pass: - `PoolPage.tsx:912` — filter row `flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end`. once it flips to row at `sm:`, search input + sort + order + checkbox all wrap onto multiple lines. a tablet-width pass could break the visual grid. - `SwapPage.tsx:1038` — Trade Details `grid grid-cols-2 ... sm:block sm:space-y-2` — flips from 2-col grid to stacked rows at `>=sm`. could hold the 2-col grid through `md:` for higher information density. - `TraderPage.tsx:122, :179, :195` — stat grids `grid-cols-2 md:grid-cols-4`. surrounding hero/header at line 86 is `flex-col sm:flex-row`. worth a sweep at iPad portrait to check for double-jumps between 640px and 768px. ## Severity P2 — UX. trade is a primary surface; iPad-portrait is a real device class. a CEX-migrant trader on a tablet currently can't get the chart+ticket side-by-side experience they expect. compounds with #136's tablet header work — both gaps make iPad-portrait feel like a downgraded mobile rather than a real tablet experience. ## Cross-reference - DEX #136 — header tablet collapse (already shipped, sister work) - DEX #133 — visual QA umbrella cc @PlasticDigits

Brouie commented

2026-05-07 06:40:35 +00:00

(Migrated from gitlab.com)

assigned to @totdking

PlasticDigits commented

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

(Migrated from gitlab.com)

@Brouie see comment on #144 - not a verification issue, this is a bugfix request, so cannot be assinged to totdking

PlasticDigits commented

2026-05-09 05:17:50 +00:00

(Migrated from gitlab.com)

unassigned @totdking

PlasticDigits commented

2026-05-09 05:28:19 +00:00

(Migrated from gitlab.com)

mentioned in commit f619edf2af

mentioned in commit f619edf2af15383a887edefd594b713dbc6042f8

PlasticDigits commented

2026-05-09 05:29:04 +00:00

(Migrated from gitlab.com)

Shipped: tablet Trade layout (GitLab #146)

Implemented a Tailwind-only sub-desktop grid on TradePage.tsx (lg:hidden): from md: (768px) to lg:, price chart and limit order ticket share the first row; order book and recent trades span full width below. Phone layout (<md) stays a single column in DOM order: book → ticket → chart → tape. Desktop ≥lg resizable PanelGroup is unchanged.

Merged to main (commit cad1efa). Remote feature branch removed after merge.

Docs / agent playbooks

Invariants: docs/frontend.md § Trade page — responsive layout (cross-links #136 header band).
New skill: skills/AGENTS_FRONTEND_TRADE_PAGE_LAYOUT.md — linked from AGENTS_FRONTEND_RESPONSIVE_HEADER.md.
Sub-desktop root is marked data-testid="trade-sub-lg-workspace" so E2E avoids duplicate headings from the hidden desktop panel tree.

Verification checklist

npm ci in frontend-dapp then npm run test:unit — expect 329 tests green (includes TradePage.test.tsx).
With LocalTerra + indexer + .env.local per global setup: npx playwright test e2e/trade-page-responsive.spec.ts.
DevTools device toolbar 820×1180 (or 768×1024) on /trade/{terra1…}: chart left, ticket right, order book below that row.
390px width: vertical order Order book → Place limit → Price (USD).
≥1024px: existing 3-panel resizable layout unchanged.

Requesting verification from @Brouie when you have a moment.

Issue left open per process.

## Shipped: tablet Trade layout (GitLab #146) Implemented a **Tailwind-only** sub-desktop grid on `TradePage.tsx` (`lg:hidden`): from **`md:`** (768px) to **`lg:`**, **price chart** and **limit order ticket** share the first row; **order book** and **recent trades** span full width below. Phone layout (`<md`) stays a single column in DOM order: book → ticket → chart → tape. Desktop **`≥lg`** resizable `PanelGroup` is unchanged. Merged to **`main`** (commit `cad1efa`). Remote feature branch removed after merge. ### Docs / agent playbooks - Invariants: [docs/frontend.md § Trade page — responsive layout](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/docs/frontend.md#trade-page-responsive-layout) (cross-links #136 header band). - New skill: [`skills/AGENTS_FRONTEND_TRADE_PAGE_LAYOUT.md`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/skills/AGENTS_FRONTEND_TRADE_PAGE_LAYOUT.md) — linked from `AGENTS_FRONTEND_RESPONSIVE_HEADER.md`. - Sub-desktop root is marked `data-testid="trade-sub-lg-workspace"` so E2E avoids duplicate headings from the hidden desktop panel tree. ### Verification checklist - [ ] `npm ci` in `frontend-dapp` then `npm run test:unit` — expect **329** tests green (includes `TradePage.test.tsx`). - [ ] With LocalTerra + indexer + `.env.local` per global setup: `npx playwright test e2e/trade-page-responsive.spec.ts`. - [ ] DevTools device toolbar **820×1180** (or 768×1024) on `/trade/{terra1…}`: chart left, ticket right, order book **below** that row. - [ ] **390px** width: vertical order **Order book** → **Place limit** → **Price (USD)**. - [ ] **≥1024px**: existing 3-panel resizable layout unchanged. Requesting verification from @Brouie when you have a moment. Issue left **open** per process.

PlasticDigits commented

2026-05-09 05:30:05 +00:00

(Migrated from gitlab.com)

mentioned in commit a4f1b6d010

mentioned in commit a4f1b6d010b7fdc79c4f5794c3ae729c5bda1bdc

Brouie commented

2026-05-13 02:02:59 +00:00

(Migrated from gitlab.com)

mentioned in issue #151

Brouie commented

2026-05-25 08:04:00 +00:00

(Migrated from gitlab.com)

mentioned in issue #178

PlasticDigits commented

2026-05-27 03:21:31 +00:00

(Migrated from gitlab.com)

mentioned in commit dc27b0e029

mentioned in commit dc27b0e02918959c61a125181c436ea375ba612f

PlasticDigits commented

2026-05-27 03:21:45 +00:00

(Migrated from gitlab.com)

Verification complete (GitLab #146)

Verified the tablet two-column Trade layout shipped in f619edf / cad1efa. The responsive grid was already correct; the Playwright tablet assertion was a false failure because it compared the nested Place limit heading (~500px below the ticket column top) instead of the chart/ticket grid cells.

Fix merged (`dc27b0e`)

Added data-testid="trade-sub-lg-chart-col" and trade-sub-lg-ticket-col on the sub-desktop grid wrappers.
Updated e2e/trade-page-responsive.spec.ts to assert column bounding boxes (same grid row, chart left of ticket, order book below).

Checklist

npm run test:unit — 598 tests green (15 in TradePage.test.tsx, includes #146 grid class assertion).
npx playwright test e2e/trade-page-responsive.spec.ts — 2/2 pass after E2E fix.
820×1180 (browser MCP): chart left / ticket right on one row; order book full width below.
390px: vertical order Order book → Place limit → Price (USD).
≥1024px: trade-desktop-workspace 3-panel resizable layout unchanged.

Closing as verified.

## Verification complete (GitLab #146) Verified the **tablet two-column Trade layout** shipped in `f619edf` / `cad1efa`. The responsive grid was already correct; the Playwright tablet assertion was a **false failure** because it compared the nested **Place limit** heading (~500px below the ticket column top) instead of the chart/ticket grid cells. ### Fix merged (`dc27b0e`) - Added `data-testid="trade-sub-lg-chart-col"` and `trade-sub-lg-ticket-col` on the sub-desktop grid wrappers. - Updated `e2e/trade-page-responsive.spec.ts` to assert **column bounding boxes** (same grid row, chart left of ticket, order book below). ### Checklist - [x] `npm run test:unit` — 598 tests green (15 in `TradePage.test.tsx`, includes #146 grid class assertion). - [x] `npx playwright test e2e/trade-page-responsive.spec.ts` — 2/2 pass after E2E fix. - [x] **820×1180** (browser MCP): chart left / ticket right on one row; order book full width below. - [x] **390px**: vertical order Order book → Place limit → Price (USD). - [x] **≥1024px**: `trade-desktop-workspace` 3-panel resizable layout unchanged. Closing as verified.

PlasticDigits (Migrated from gitlab.com) closed this issue

2026-05-27 03:21:47 +00:00

PlasticDigits commented

2026-05-27 04:43:20 +00:00

(Migrated from gitlab.com)

Re-verification complete (independent pass)

Re-ran the full #146 checklist on main @ 3f6a2e5 using worktree verify/issue-146. No responsive-layout bugs found — implementation matches acceptance criteria.

Checklist

npm run test:unit — 599 tests green (15 in TradePage.test.tsx, includes md:grid-cols-2 assertion).
npx playwright test e2e/trade-page-responsive.spec.ts — 2/2 pass.
820×1180 (browser MCP): chart left / ticket right on one row; order book below.
390px: vertical order Order book → Place limit → Price (USD).
1280px: trade-desktop-workspace 3-panel resizable layout unchanged.

No code changes required. Issue remains closed.

## Re-verification complete (independent pass) Re-ran the full #146 checklist on `main` @ `3f6a2e5` using worktree `verify/issue-146`. No responsive-layout bugs found — implementation matches acceptance criteria. ### Checklist - [x] `npm run test:unit` — **599** tests green (15 in `TradePage.test.tsx`, includes `md:grid-cols-2` assertion). - [x] `npx playwright test e2e/trade-page-responsive.spec.ts` — **2/2** pass. - [x] **820×1180** (browser MCP): chart left / ticket right on one row; order book below. - [x] **390px**: vertical order Order book → Place limit → Price (USD). - [x] **1280px**: `trade-desktop-workspace` 3-panel resizable layout unchanged. No code changes required. Issue remains closed.

PlasticDigits commented

2026-08-15 13:18:35 +00:00

(Migrated from gitlab.com)

mentioned in issue #527

PlasticDigits commented

2026-08-18 12:08:53 +00:00

(Migrated from gitlab.com)

mentioned in issue #561

Rows
Columns

[responsive] TradePage collapses to single-column at iPad portrait — needs md: two-column layout #146

Scope

HIGH

Suggested fix shape

How to verify on local stack

POLISH (lower priority, file as siblings if you find them)

Severity

Cross-reference

Shipped: tablet Trade layout (GitLab #146)

Docs / agent playbooks

Verification checklist

Verification complete (GitLab #146)

Fix merged (dc27b0e)

Checklist

Re-verification complete (independent pass)

Checklist

Fix merged (`dc27b0e`)