Owner review 46 — lane A: Strip, section-head count, 업적, tab counts, activity grid (2026-10-19)

Status: Reference · Date: 2026-10-19

Read-only research for owner review 46, marks M3/M17/M19/M26 (Strip), M7 (count), M8 (업적), M9 (tabs) and M5 (activity grid). Source read, nothing rendered; widths come from the kit's fvkTextW estimator and CSS box arithmetic. WF = docs/twomore_design_system/wireframes; D = docs/design. "Unverified" means not confirmed in this pass.

1. Strip

M3: "This is the only component that has a lot of empty space at the front and at the end. This breaks the visual alignment of the general page. How can we ameliorate that? What's the best practice for a summary row like this?"

Now. WF/flat-v2-kit-content.jsx:4852 FvkStrip (fit test 4829, grid 4759): n equal cells of content/n, each a centred stack (label 13/18·500 ink2, 4, figure 24/32·700 ink tabular, optional delta 12/16·600); min 80 (100 with deltas); no dividers. Spec D/flat-v2-component-library-2026-10-09.md:1066-1100 (laws 1072-1080, fit test 1090).

• 24 uses: hub 1467 (기록 전적), 1823, 2479 (회비), 3008; list-a 2021, 2363 (회비), 2678 (출석 현황), 3310, 3798, 3969, 4156 (출석 확인); list-b 853, 879, 1084, 1103, 1902; detail 4349, 4377, 4458 (action face), 4475, 5505, 5930, 6185, 6332.
• At 390 the first text starts 39.7 px inside the rail and the last ends 47.1 inside (전적); 신뢰 32/34; n=2 (list-b 853) 76/69; n=4 12/18.
• This is the fourth ruling on the same space. Review 1 #6 gave left-aligned equal pitch; review 2 #5 ("too much space at the end") gave hug-last; review 3 L5 ("too much spacing in the middle") gave centred equal cells; now front and end. The space is conserved (n=3: 238 of 350 px empty). Start, hug, centre and justify only move it.

References.

• D/research/owner-review-1-lane-a-2026-10-11.md:450-458 (App Store frames, 2026-10-11, not re-checked): NRC "This Week", Apple Health Activity and KakaoBank 내 계좌 are left-aligned; the Strava activity card is space-between with the last column pinned right (our rejected hug-last); Toss 증권 홈 원화/달러 is two equal gray tiles, gap 8, r16, label 13 over value 15 bold — "the fill is the container". Centred cells appear only for profile counts (unverified).
• Apple HIG, Layout (verified): "Align elements to make them easier to scan"; relate items with "negative space, container shapes, or separator lines". https://developer.apple.com/design/human-interface-guidelines/layout
• Ant Design Statistic (verified from source): title above value, no text-align, an "In Card" demo. https://ant.design/components/statistic

Recommendation: give the space an edge (tonal tiles).

• n tiles 8 apart, rail to rail (171 / 111.3 / 81.5 at 390; 160 / 104 / 76 at 360); fill gray100 (dark #232824), r12, min 80 (100 with deltas). Inside, today's stack, centred, 8 side padding; label pinned top and figure bottom so a wrapped label never shifts a neighbour's figure.
• Fit: figure and longest label word ≤ tile − 16, else two-up (8 apart, an odd last spans); the neighbour-gap test goes. At 200% figure 36/48, label 26/36; n=3 stays three-up ("68%" 78.5 ≤ 95.3).
• A linked tile presses whole (.98/.80, ring r12). The action face (detail 4458) becomes equal tonal tiles.
• Library: Strip anatomy, laws 2–3, fit test, Why. Verifier: first and last tile edge = rail ±0.5, replacing the empty-run check.
• Risk: review 34 removed the grey Band as "card-style separation". Tiles hold data like Notice and Choice do, but this is the owner's call. Fill-free fallback: Cell rows (label left, value right) for low-stakes stats.

2. Section-head count

M7: "can we focus on the alignment, position and best practices for the count next to the section header? They seem a bit out of alignment."

Now. WF/flat-v2-kit-content.jsx:3803-3934 FvkSectionHead: title 20/28·700 ink; count 15/22·500 ink2 on the title baseline, 4 apart (3898-3916); the action and Choice sit in a line slot (3921), box-centred on the 28 line. Spec D:1553-1568 (count suffix 1561); D:275 "Text beside text of another size shares the baseline". Uses: hub 1854 (친구 24명), 1856 (업적 3/20), 1176-1181 (랭킹 42명 + 전체 보기 + 클럽 ▾), plus count heads in list-a, list-b, detail.

Defect (computed with Inter-like metrics; Pretendard not measured): the count sits on the title baseline but 전체 보기 is box-centred, so two identical 15/22·500 ink2 texts sit about 1.8 px apart at 100% and 3.5 px at 200% (≈ 0.35 × the size difference). The 4 px gap is under a plain word space at 20/700 (≈ 5.6).

References. Primer UnderlineNav CSS (verified): counter margin-inline-start 8 px. Toss TDS ListHeader (verified): slots title / right / upper / lower, no count slot, so a count lives in the title or right text (https://tossmini-docs.toss.im/tds-react-native/components/list-header/). Apple HIG Layout (above). KakaoTalk 친구 labels: unverified.

Recommendation. One baseline for every text in the head: title, count and text action share it (align-items: baseline); glyphs and controls (16 chevron, Choice, pager) stay centred on the title's line in the line slot. Count 15/22·500 ink2 (never ink3), tabular, value with its unit ("24명") or earned/total ("3/20"); gap 4 → 8; still wraps under the title as one piece at large text; position directly after the title, the trailing slot being for the door and the scope Choice. Fallback if it still reads detached: a same-size count (20/28·500 ink2), one text run. Library: D:1561 "8 apart, on the title's baseline; the text action shares it"; extend D:275.

3. 업적

M8: "Achievements seem to have the same alignment issue where the section has too much spacing in front and at the end. Can we make this section horizontally scrollable?"

Now. WF/flat-v2-hub.jsx:1698-1753 HubBadges; head 1856; frames prof-ideal 1929, prof-200 1955 (rows from 1.5×); D:313, 325. Three 1fr columns, gap 12, rail 20 (a 108.7 column), each item centred: 64 tile r12, name 15/22·600 up to two lines, when 13/18·500 ink3. Tiles start 22.3 px inside each rail; names 17–33 inside. The library blocks the fix as written: D:304 "Horizontal scrolling only in a Shelf, or in a Tabs row"; the Shelf test (D:1318) excludes the viewer's own data.

References. Apple HIG Scroll views (verified): partial content at the edge signals more content (https://developer.apple.com/design/human-interface-guidelines/scroll-views). Material carousel (MDC-Android Carousel.md, verified): start-aligned by default; "uncontained" keeps item size and cuts the last item at the edge. Library Shelf Cell preset (D:1314): 76 wide, gap 8, four items plus a 34 px (45%) peek at 390. Apple Fitness Awards (unverified for today): top three plus "Show More".

Recommendation. 업적 becomes a Shelf with a "badge" preset on the Cell geometry: item 76, gap 8, the first tile's left edge on the rail, content running under the right edge; item = 64 tile start-aligned, 8, name 15/22·600 start-aligned up to two lines, when 13/18·500 ink3. Free scroll, no snap; at 390 four items and 34 px of the fifth. Up to five earned, then a 64 r12 gray100 door tile 전체 보기; 3/20 stays in the head. With four or fewer nothing scrolls, still start-aligned. From 1.5×, rows as today. Library: add the preset; the Shelf test gains "except earned trophies (업적): optional, visual, the gallery one tap away".

4. Club-home tabs

M9: "navigation tabs (홈, 채팅, 순위, etc.) should also underline the counts (like 3) next to the tab name."

Now. WF/flat-v2-kit-chrome.jsx:342-417 FvkTabs: the 2 px underline is a child of the label's column, so it is label-wide; FvkCountTag (kit-content 620, 20 tall, 11/16·700) sits outside it, 4 after, in a line slot. Spec D:616 ("underline the width of the label"), 623, 625; lib-chrome 521, 525; specimens 421-440, 484-495. Club home WF/flat-v2-hub.jsx:1979-2012 HubClubTop puts the count on 홈 (1987; danger tone; 3 at 2676; 120 → 99+). The 홈 underline is 13 px; with its count it would be 37.

References. Primer UnderlineNav (verified): the indicator is an ::after on the item that holds the counter, so it spans label and counter. Material tabs (MDC-Android Tabs.md, BadgeDrawable.md, verified): a corner badge outside the indicator by default (our current behaviour). Toss TDS Tab (verified): no count, a redBean dot. Apple HIG Tab bars (verified): a red oval for critical information only.

Recommendation. Label and count in one row; the 2 px ink underline is that row's width (label + 4 + count), 12 under the line as now, the first tab on the rail. Heights unchanged (48; 55 from 130%). 200%: label 19.5/29 (chrome cap 1.3), count 28. Dark: underline ink #DFE4DC, count danger #FA9B94 with ink text. Library: D:616 "…the width of the label and its count"; fix lib-chrome captions 521 and 436. Verifier: underline width = label + 4 + count.

5. Activity grid

M5: "In 200%, the monthly active doesn't render correctly. And I am not sure what the activity grid actually shows. Is it a heatmap of activity per month along the grid? Can it be scrolled then?"

Now. WF/flat-v2-kit-content.jsx:5349-5537 FvkHeatmap (sample 5339); hub 1471 in 전적; specimens lib-surfaces 1172-1213; spec D:1230-1242. One cell = one day; one column = one week (Sunday on top); time runs left to right to today (hard-coded Fri 18 Sep 2026). Columns = floor((350+4)/16) = 22 at 390 (20 at 360, 24 at 430): Sun 19 Apr to 18 Sep. Cells 12×12 r3, gap 4, five steps gray100 to ink; month labels mark where a month starts; legend 적음…많음; sentence "이번 달 12일 활동". Step thresholds are undefined. The shipped card (packages/features/records/src/cards/activity-heatmap-card.tsx) counts matches per day over a fixed 84 days with three steps. It does not scroll; the week count follows the width. Four statements disagree: 22 weeks drawn; aria-label "최근 12주, 31일 활동" (hub 1471); "12-week" (hub 1141, 3518); visible "this month, 12 days".

200% (computed): month labels are caption 12/18 → 24/36 (cap 2.0) inside a fixed 18 px row (5424) with absolute labels, so the 36 px label box runs 10 px into the first cell row and the grid paints over it.

References. GitHub docs (verified): "NUMBER contributions in the last year"; each square is a day. Kibo UI contribution graph (verified): a summary line above, Less–More legend, month labels, horizontal scrolling when narrow. Flutter contributions_chart (verified): scales to the widget. Apple HIG Charting data (verified): a headline or summary with the chart, which does not replace accessibility labels. WCAG 2.2 SC 2.5.8 (verified): the 12 px cells rely on the sentence and readout as the equivalent.

Recommendation. Say what it shows, once: "최근 22주 중 N일 활동" (weeks = drawn columns), the same string as the aria-label; remove the 12주 and 이번 달 wording (hub 1141, 1471, 3518; D:1234). Define steps (0, 1, 2, 3, 4+ matches that day); readout "9월 13일 · 3경기". Fixed window, no scroll; older history behind 분석 ›. 200%: month labels in the chrome class (cap 1.3, 15.6/23), row height from fvkLineH('caption', scale, 'chrome'), cells stay 12. Library D:1234 accordingly.

Decisions for the owner: tiles or a fill-free Strip; the Shelf-test amendment; keep the width-derived 22 weeks or fix the span.