Skip to content

Owner review 40 — every Block in three rows (2026-10-16) ​

Status: Active — its open question (the tier bar or the 30-day line) was closed in review 41: the line stays · Date: 2026-10-16

Answers: "One concern on the home tab with its block is that it now renders in four rows. Anyway we can always keep all the blocks within 3 rows? I don't want it to get bloated. Perhaps keeping it within the size of the feed item below might be better? What is the best practice for this?"

Boards: flat-v2-lib-surfaces § Block, Block 홈 day, Block ELO; flat-v2-hub § 홈 and § 기록. Library: §4 Block (the three-row law), Block 홈 day, Block ELO.

Ruling: three rows, 150 tall ​

Every Block is three rows and no more:

  • A: the label and its door.
  • B: the figure, with at most one graphic at its right.
  • C: one line of facts.

At 1× a Block is 150 tall (20 · A 24 · 8 · B 48 · 8 · C 22 · 20). Anything more sits behind the door. From 1.5× the graphic drops under the figure and rows may wrap, which is the reflow rule.

The audit:

BlockBeforeNow
홈 day (your next game)four rows, 196three, 150: the faces and 6/8 moved to the time's right; the venue and the weather share row 3
ELO (기록)three rows plus an 8 tier bar, 166three, 150: the 30-day line at the figure's right; no bar
Identity (프로필)two rowsunchanged
Match (live, records)A and two team linesunchanged

What it cost:

  • A fee due: row 3 becomes the fee and its deadline ("참가비 10,000원 … 오늘 18:00까지", door 입금하기), so the venue leaves the Block in that state. It is one tap away, on the session.
  • The ELO tier bar is gone. Row 3 says the distance in words ("마스터까지 518점"), and the 30-day line holds B's one graphic slot. If you would rather keep the bar, it can take that slot in place of the line, but not alongside it.

Why not the Feed item's 128 ​

  • The arithmetic. Three rows at the Block's own figure size (display, 40/48) need 134 even with no gaps between them. Reaching 128 means two things:
    • dropping the figure to hero (24/32), the same step as a page title;
    • taking the inner padding off the 20 rail.
  • The hierarchy. The Block would then read as a dark Feed item, the first row of the list rather than the page's answer. That is the list-rendered-flat look you flagged in review 27.
  • The evidence puts glance cards at about 150–160, not 128:
    • Apple sizes a medium widget on a 390 × 844 phone at 338 × 158, and says a small widget "typically show[s] a single piece of information" (HIG, Widgets).
    • A Lock Screen Live Activity runs 84–160 tall: "Focus on important information that people need to see at a glance. Your Live Activity doesn't need to display everything… they can tap your Live Activity to open your app" (HIG, Live Activities).
    • Metric cards carry one metric with its context (a change, a sparkline) and link to the detail (Shopify, metric card; PatternFly, dashboards).
  • The result: 150 sits inside that band, and the old four-row 196 sat outside it.

Changes ​

  • Kit (flat-v2-kit-content.jsx):
    • FvkBlock kind="day" is now the 홈 next-game Block. It takes the props pay, venue, weather, faces and going.
    • kind="elo" carries the 30-day line (spark).
    • FvkCSpark and FvkCFacePile are B's two graphics.
    • The Block frame's progress bar is removed.
    • The hub's local copies (HubNextBlock, HubFacePile, HubSpark) are deleted, so one Block implementation serves every board.
  • Library §4: the three-row law with its evidence, the day and ELO anatomy, and the state table's C row (one line).
  • Checked:
    • 1×, a fee due, nothing ahead, offline, loading, error, long text, 200% and dark.
    • The board verifier passes every board, and the flows board finds every tap.

Markdown remains the source of truth. Run yarn docs:check before handoff.