[evanpelle]

Summary

• In short windows the homepage's right column used to split its height between the teams and the special lobby cards. In Poki's 1031×580 frame each card came out tiny.
• In windows at most 700px tall, from sm up, when both lobbies are listed, the special card is hidden and the teams card spans both rows. That covers Poki's 580px and 470px frames, while an iPad mini in landscape (744px tall) keeps both cards. The special lobby is still listed in the "See all" lobby browser.
• If there's no teams lobby, the special card still shows. Phones (below sm) keep their stacked, full-width cards, and larger screens are unchanged.

Test plan

Headed Chromium against a local dev server, measuring the right column:

Viewport	Teams card	Special card
1031×580	236×182	hidden
836×470	263×138	hidden
1366×650	236×210	hidden
1133×744 (iPad mini landscape)	236×116	236×116 (unchanged)
744×1133 (iPad mini portrait)	232×159	232×159 (unchanged)
390×844	358×176	358×176 (unchanged)

• npx vitest run tests/client: 5010 passed. npm run typecheck, oxlint and oxfmt are clean.

🤖 Generated with Claude Code

[coderabbitai]

No actionable comments were generated in the recent review.

Recent review info

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: f35e949e-4aaf-4b11-b9e3-e1c464b9dce3

Commits

Reviewing files that changed from the base of the PR and between 8bde745 and e2d7fb3.

Files selected for processing: 1

• src/client/GameModeSelector.ts

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

Walkthrough

When both secondary cards are present, the special card appears on row two and the teams card appears on row three. At viewport heights of 700px or less, the special card is hidden and the teams card spans both rows.

Changes

Lobby card layout

Layer / File(s)	Summary
Compact card placement src/client/GameModeSelector.ts	When both cards are present, the special card uses row two and is hidden at viewport heights of 700px or less. The teams card uses row three at greater heights and spans both rows at 700px or less.

Priority: Low

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

Change: Bug fix

Suggested labels: small-fix

Suggested reviewers: ryanbarlow97

Merge Risk: Minimal · up to e2d7f

No actionable merge-blocking risk remains.

Pre-merge checks: 5

Check name	Status	Explanation
Title check		The title names the main change: on compact screens, only the teams lobby card is shown when both lobbies are listed. It matches the raw summary, which describes hiding the special card and expanding …
Description check		The description explains the layout problem, the 700px height rule from sm upward, the hidden special card when a teams lobby exists, and the unchanged phone and large-screen layouts. It also gives vi…
Docstring Coverage		No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1 files.
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.

Full details: Title check

Explanation

The title names the main change: on compact screens, only the teams lobby card is shown when both lobbies are listed. It matches the raw summary, which describes hiding the special card and expanding the team card at heights of 700px or less. The title is short, specific, and uses no vague terms.

Full details: Description check

Explanation

The description explains the layout problem, the 700px height rule from sm upward, the hidden special card when a teams lobby exists, and the unchanged phone and large-screen layouts. It also gives viewport measurements and test results. This fits the changeset, which modifies the GameModeSelector render logic.

Finishing Touches: 💡 1

🛠️ Fix failing CI checks: 💡

• Commit to this branch
• Create a new PR

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

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Two cards find their place in line
Row two, then row three by design
When the screen grows short
One card steps out of court
The teams card spans the space just right}

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

🤖 Claude Code Review

Verdict: looks good — 0 findings (0 high, 0 medium, 0 low).

No issues found. Checked for bugs and CLAUDE.md compliance.

The sm:compact: classes match the compact custom variant in src/client/styles.css. The important modifiers (row-start-2!, row-span-2!) reliably override sm:row-start-3 in the column's auto_1fr_1fr inner grid. When there is no teams lobby, the special card still takes the single-card path, so it isn't hidden.

[github-actions]

🤖 Claude Code Review

Reviewed range: 8bde745..e2d7fb3 (incremental).

Verdict: looks good. 0 findings (0 high, 0 medium, 0 low).

No issues found. Checked for bugs and CLAUDE.md compliance.

This range changes the breakpoint from the shared compact variant (max-height: 800px in src/client/styles.css) to an inline Tailwind v4 arbitrary variant, sm:[@media(max-height:700px)]:. The syntax is valid and the classes are static string literals, so the Tailwind scanner picks them up. The ! important modifiers still override sm:row-start-3, and the case with only a special lobby is unaffected. The 700px cutoff matches the PR description: the special card is hidden in the 580px and 470px Poki frames and stays visible in iPad mini landscape (744px).

[github-actions]

🍒 Cherry-picked onto v35 as 9188675.