[lilyshen0722]

Follow-up to #3422, from its CodeRabbit review.

What changed

• Every rule in the empty-state CSS block now starts with #s-empty. docs(d215): empty and error frames for the pod list, board, memory and an unknown page #3422 ported the block from docs(design): d215 empty and error states on drawn pages (TASK-757) #3220 unscoped, and .app.m .mbody2 > .search also matched the agent-memory 390 frame. That grew its search box from 34 to 44 px and pushed everything below it down.
• The two three-phone rows use a .row2--three class in place of an inline grid-template-columns. The inline style beat the one-column breakpoint at max-width: 640px, so on a phone-width page each frame shrank to about 100 px.

Proof

Headless Chromium, every element's box in every frame outside #s-empty (138 frames), measured against main as it was before #3422:

page width	#3422 as merged	this branch	main against itself
1600	1 frame differs: agent-memory 390	0 differ	not run at 1600
390	agent-memory 390 + animated frames	animated frames only	the same animated frames differ (handoff "working", task-record "unavailable")

The animated frames differ between two loads of main itself, so they're timing noise. At a 390 px page width, the #s-empty frames now render 340 px wide, which means they stack. node --test cap/measure_after.test.js passes.

Between 640 and 1180 px, the three-phone rows now follow the 1180 breakpoint like every other .row2 row: two frames per row, with the third wrapping alone. Before, the inline style held them at three across.

🤖 Generated with Claude Code

https://claude.ai/code/session_01MDs9DT6tbhKm6UhsmFhLk9

[coderabbitai]

No actionable comments were generated in the recent review.

Walkthrough

The empty-state artboard adds a three-column layout utility, scopes empty and error styles to #s-empty, and separates the 390px examples into two rows. The displayed mock content remains unchanged.

Changes: Empty-state layout

Layer / File(s)	Summary
Three-column layout and selector scoping docs/design/artboards/d215/index.html	Adds .row2--three with three equal columns capped at 280px. Scopes empty and error styles to #s-empty. Uses the utility for separate rows of 390px examples.

Estimated code review effort: 1 (Trivial) | ~4 minutes

Change: Bug fix

Possibly related PRs

• Team-Commonly/commonly#3422: Adds the #s-empty block, its empty and error styles, and 390px phone rows that this change updates.

Merge Risk: Minimal · up to 3b8b5

No actionable merge-blocking risk remains from the reviewed changes.

Pre-merge checks: 4

Check name	Status	Explanation
Title check		The title clearly summarizes both main changes: scoping empty-state CSS rules and fixing narrow-screen phone-row layout.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.
Description check		The description states that every rule in the empty-state CSS block now starts with #s-empty to stop .app.m .mbody2 > .search from changing the agent-memory 390 frame. It also says the three-phone…

Full details: Description check

Explanation

The description states that every rule in the empty-state CSS block now starts with #s-empty to stop .app.m .mbody2 > .search from changing the agent-memory 390 frame. It also says the three-phone rows now use a .row2--three class in place of inline grid styles, so the one-column breakpoint applies on narrow screens. The changeset adds .row2--three and scopes the empty and error state styles to #s-empty, which matches these claims. The description gives specific measurements and test results, so it is clearly related to the changes.

Finishing Touches

Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Recent review info

Run configuration

• Source mode: Auto
• Repository: Team-Commonly/commonly
• Branch: main
• File: .coderabbit.yaml
• Commit: d7c5266
• Layers: Repository YAML
• Review profile: QUIET
• Plan: Advanced
• Run ID: 0b27e1d1-9e3d-4e3f-b585-d531cd97a980

Commits

Reviewing files that changed from the base of the PR and between d7c5266 and 3b8b520.

Files selected for processing: 1

• docs/design/artboards/d215/index.html

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 0 remain after this review.

[lilyshen0722]

Review at 3b8b520 (one subagent review, Opus; tier 0: a design artboard). Headless Chromium compared every computed style and box size in all frames, origin/main against this head, at 1600, 1000 and 390 px.

• Scoping: all 19 rules start with #s-empty, and so does each part of both comma lists. No rule is dead: every element they target sits inside <section id="s-empty">, and so does the only .focus with a .mu child.
• Specificity: the block was already last in the stylesheet, so the id changes no result. At 1600 px the only computed difference on the page is the intended fix: agent-memory 390's .search goes back from 44 to 34 px. Nothing inside #s-empty changes.
• Breakpoints: .row2--three (0,1,0) comes before the 1180 and 640 px media rules, so both now apply.
  • 390 px: the phone frames go from 102 to 340 px wide, so they stack.
  • 1000 px: two per row, like every other .row2 row. The body now says so.
  • 1600 px: identical to the old inline style.
• Body: its claims match the measurements.

GATE: PASS