On a 390×844 phone with Student details already collapsed, the shipped page still
shows only one and a half piece rows. Two causes, and the second is the bigger one: ~360 pt of
chrome before the list starts, and a piece row that is ~214 pt tall because each marker chip takes
its own line and the two actions are a full-width grid. The fix below is one component set with
container-query tiers — not a separate mobile design. The same markup renders as a 3-line card at phone
width, a 2-line row in the iPad main column, and a single-line table row in the desktop main column beside
the 28 rem rail, exactly as piece_table_row already does with @container.
Faithful recreation of the screenshot. Chrome: 41 pt page-title bar + 59 pt name row + 42 pt collapsed disclosure + 68 pt section header with a two-line subtitle + 42 pt full-width Add piece. Then the row itself: title 19 pt, goal line, stage strip, three chips at one per line, and a 44 pt two-button grid.
1.5 piece rows visible · 43% of the screen is chrome
Repertoire & Assignments
One row per piece. Continue a piece for next week's goal, or add a new piece.
Play it through · 1 week
Decoding Assignedopening phrase · m. 1–m. 8 · 1 week
80Decoding SubmittediPhone · 390×844 · Student details collapsed
One 44 pt sticky header (back · 28 pt avatar · name · status · overflow) replaces both headers. Overview collapses to a one-line meta strip with Details ›. The section title carries the Add action instead of a full-width button. The row keeps a fixed 3-line rhythm — title, one clipped meta line, one clipped marker rail — with actions on the right edge. Nothing is removed: takes stay behind the count badge, lessons/practice/activity keep their cards further down the same single scroll.
6 piece rows visible · chrome 118 pt
Your timezone (UTC+8) · set at UTC 4:00 PM · View schedule
Tier 1 · 3-line card row, ~64 pt
The container is now wide enough that the goal line joins the title and the marker rail gets its own full width; the cover grows to 40 pt and the stage strip gains its text label. Header, meta strip and section bars are identical to the phone — the only change is the tier, so there is no second layout to keep in sync.
Your timezone (UTC+8) · set at UTC 4:00 PM · View schedule
iPad portrait · 834 pt · Tier 2 · 2-line row
Once the main column clears 56 rem the row becomes a real table line: cover, title, marker rail, tempo/stage column, fixed action column. Worth knowing: at 1280 beside the 26 rem rail the main column is only ~50 rem, so that width stays on Tier 2 — the single-line row simply cannot hold title + goal + markers + tempo + two actions there, and forcing it just clips the markers. Same conclusion for iPad landscape. The rail keeps the practice dashboard and activity log and is still where the composer swaps in.
Your timezone (UTC+8) · set at UTC 4:00 PM · View schedule
Piano Adventures 2A · next: Rockin' Rhythm Band
Assign next item5 sessions this week · last yesterday, 22 min · goal 20/8/3
Show practice detail
The assignment composer swaps into
this rail (#composer-rail) — unchanged from today.
Laptop 1512 · Tier 3 · single-line row + 26 rem rail
@container queries on the list, so a
row behaves correctly in the phone viewport and in the desktop main column next to the rail —
which is exactly why the existing @3xl: tier in piece_table_row is the right
place to work.grid-cols-2 block is
the thing that goes away.| Width | Row height | Chrome before list | Piece rows in viewport |
|---|---|---|---|
| 390 today | ~214 pt | ~360 pt | 1.5 |
| 390 Tier 1 | ~64 pt | ~118 pt | 6 |
| 834 Tier 2 | ~62 pt | ~110 pt | 9 |
| 1280 (Tier 2 · rail open) | ~62 pt | ~110 pt | 10 |
| 1512 Tier 3 | ~46 pt | ~110 pt | 14 |