feat(ui): desktop content column for entry screens

[gelbh]

Summary

• Add useDesktopLayout (1024px) and DesktopContentColumn (28rem entry).
• Constrain home/join/premium/feedback/auth CTAs to ≤20rem at desktop; mobile unchanged.
• Shared ops rail CSS tokens; admin aliases onto --ops-*.

Test plan

• Targeted Vitest for layout gate + column
• Desktop @smoke layout-ops e2e
• Manually: ≥1024 home CTAs capped; <1024 unchanged

Summary by CodeRabbit

• New Features

  • Added a reusable desktop layout container (DesktopContentColumn) and a useDesktopLayout hook for consistent desktop sizing and centering.
  • Updated Home, Feedback, Join Session, Premium, and Play Hub to use the new desktop-constrained layout.
  • Introduced shared desktop “ops” design tokens and new desktop styling for entry controls.

• Bug Fixes

  • Ensured desktop entry actions (including “Join session”) respect the intended maximum width.

• Tests

  • Added unit tests for the desktop layout container and hook.
  • Added an E2E smoke test validating the desktop link width constraint.

[coderabbitai]

Walkthrough

Adds desktop viewport detection, a reusable content-width wrapper, shared layout tokens, constrained entry controls, and desktop layout coverage across entry routes and Play Hub. Unit and end-to-end tests verify breakpoint behavior, width classes, visibility, and CTA sizing.

Changes

Desktop entry layout

Layer / File(s)	Summary
Desktop layout primitives src/hooks/useDesktopLayout.ts, src/hooks/useDesktopLayout.test.ts, src/components/ui/DesktopContentColumn.tsx, src/components/ui/DesktopContentColumn.test.tsx	Adds 1024px desktop detection and a reusable wrapper supporting centered entry and social max-width variants, with unit tests.
Shared desktop sizing styles src/styles/desktop-ops.css, src/index.css, src/styles/map-shell.css, src/styles/home-entry.css	Adds shared rail tokens, imports them globally, reuses them in the map shell, and constrains desktop entry controls to centered 20rem-wide elements.
Entry surface integration src/routes/Home.tsx, src/routes/Feedback.tsx, src/routes/JoinSession.tsx, src/routes/Premium.tsx, src/components/home/PlayHubSheet.tsx, src/components/auth/*	Wraps desktop entry content and action groups with shared layout constraints while preserving existing navigation, form, and action behavior.
Desktop layout validation e2e/features/desktop/layout-ops.spec.ts	Adds a 1280px Playwright check that verifies the Play Hub “Join session” link is visible and no wider than 320px.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Browser
  participant EntryRoute
  participant DesktopContentColumn
  participant useDesktopLayout
  participant CSSLayout
  Browser->>EntryRoute: open desktop entry screen
  EntryRoute->>DesktopContentColumn: render entry content
  DesktopContentColumn->>useDesktopLayout: check 1024px breakpoint
  useDesktopLayout-->>DesktopContentColumn: return desktop match
  DesktopContentColumn->>CSSLayout: apply centered 28rem wrapper
  CSSLayout-->>Browser: render constrained entry controls

Loading

Possibly related PRs

• gelbh/jetlag#2: Related Home entry-screen viewport, scroll-locking, and layout adjustments.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/desktop-entry-column

---

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

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@e2e/features/desktop/layout-ops.spec.ts`:
- Around line 14-15: Update the width assertion in the layout test to enforce
the actual 20rem limit of 320px at the stated root size, replacing the
permissive 336px threshold or asserting the computed max-width directly.

In `@src/components/ui/DesktopContentColumn.tsx`:
- Around line 24-25: Update the non-desktop branch of DesktopContentColumn to
apply the supplied className while preserving its current no-width-constraint
behavior and rendering children unchanged. Add a regression assertion covering
className preservation below the desktop breakpoint, using the component’s
existing test conventions.

In `@src/routes/Feedback.tsx`:
- Around line 24-28: Move the `flex min-h-0 flex-1 flex-col justify-between`
layout classes from `DesktopContentColumn` onto an inner wrapper that renders at
all viewport sizes, preserving the existing `space-y-3` and
`screenHeaderOffsetClassName` content while ensuring the feedback CTA group
keeps the same flex layout on mobile.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 071dcd13-0ef6-4426-8a5f-aff0bf4d050f

📥 Commits

Reviewing files that changed from the base of the PR and between 1e9ea51 and 776ab29.

📒 Files selected for processing (16)

• e2e/features/desktop/layout-ops.spec.ts
• src/components/auth/AccountSignInGate.tsx
• src/components/auth/UsernameSetupGate.tsx
• src/components/home/PlayHubSheet.tsx
• src/components/ui/DesktopContentColumn.test.tsx
• src/components/ui/DesktopContentColumn.tsx
• src/hooks/useDesktopLayout.test.ts
• src/hooks/useDesktopLayout.ts
• src/index.css
• src/routes/Feedback.tsx
• src/routes/Home.tsx
• src/routes/JoinSession.tsx
• src/routes/Premium.tsx
• src/styles/desktop-ops.css
• src/styles/home-entry.css
• src/styles/map-shell.css

[gelbh]

@coderabbitai approve

[coderabbitai]

✅ Action performed

Comments resolved and changes approved.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/routes/Feedback.tsx`:
- Around line 24-25: Update the desktop layout around DesktopContentColumn so
the outer column is the flex-growing child again, allowing the CTA group to
remain pushed to the bottom. Retain the inner div wrapper and its mobile flex
behavior, but remove or relocate the desktop flex-growth styling from the inner
wrapper as needed.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: fd298aac-c0bb-4211-9305-11d440f173a5

📥 Commits

Reviewing files that changed from the base of the PR and between 776ab29 and 54dfba5.

📒 Files selected for processing (4)

• e2e/features/desktop/layout-ops.spec.ts
• src/components/ui/DesktopContentColumn.test.tsx
• src/components/ui/DesktopContentColumn.tsx
• src/routes/Feedback.tsx

[gelbh]

@coderabbitai approve

[coderabbitai]

✅ Action performed

Comments resolved and changes approved.

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/ui/DesktopContentColumn.test.tsx`:
- Around line 39-56: Add desktop-branch coverage in the existing
DesktopContentColumn max-width test by passing className="flex flex-1" and
asserting both caller classes remain alongside the expected max-width class.
Keep the test focused on the desktop wrapper behavior and preserve the existing
entry or social max-width assertion.

In `@src/hooks/useDesktopLayout.test.ts`:
- Around line 7-14: Update the matchMedia stub in the desktop layout tests to
set matches only when query exactly equals "(min-width: 1024px)", while
preserving false results for other queries. Ensure the related assertions cover
both the expected width query and an incorrect query such as "(min-height:
1024px)" without relying on substring matching.

In `@src/routes/JoinSession.tsx`:
- Around line 192-250: Update the DesktopContentColumn usages to preserve
desktop vertical spacing: in src/routes/JoinSession.tsx lines 192-250, add
className="flex flex-col gap-8"; in src/routes/Premium.tsx lines 149-199, add
className="flex flex-col gap-4" to both DesktopContentColumn instances. No other
changes are needed.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 14162892-c067-4f43-abdc-2a873ce88e05

📥 Commits

Reviewing files that changed from the base of the PR and between 54dfba5 and 2f646e2.

📒 Files selected for processing (16)

• e2e/features/desktop/layout-ops.spec.ts
• src/components/auth/AccountSignInGate.tsx
• src/components/auth/UsernameSetupGate.tsx
• src/components/home/PlayHubSheet.tsx
• src/components/ui/DesktopContentColumn.test.tsx
• src/components/ui/DesktopContentColumn.tsx
• src/hooks/useDesktopLayout.test.ts
• src/hooks/useDesktopLayout.ts
• src/index.css
• src/routes/Feedback.tsx
• src/routes/Home.tsx
• src/routes/JoinSession.tsx
• src/routes/Premium.tsx
• src/styles/desktop-ops.css
• src/styles/home-entry.css
• src/styles/map-shell.css

[gelbh]

@coderabbitai approve

[coderabbitai]

✅ Action performed

Comments resolved and changes approved.

[gelbh]

@coderabbitai approve

[coderabbitai]

♻️ Duplicate comments (1)

src/components/ui/DesktopContentColumn.test.tsx (1)

42-49: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Assert both caller classes as distinct tokens.

toMatch(/flex/) also matches flex-1, so the test does not verify that the bare flex class is preserved. Use classList.contains("flex") and classList.contains("flex-1").

As per path instructions, tests should use behavior-focused assertions.

Suggested assertion update

-    expect(root?.className).toMatch(/flex/);
-    expect(root?.className).toMatch(/flex-1/);
+    expect(root).not.toBeNull();
+    expect(root?.classList.contains("flex")).toBe(true);
+    expect(root?.classList.contains("flex-1")).toBe(true);

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/ui/DesktopContentColumn.test.tsx` around lines 42 - 49, Update
the DesktopContentColumn test assertions to use root.classList.contains for
separate exact-token checks of “flex” and “flex-1”, while retaining the existing
max-width assertion.

Source: Path instructions

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Duplicate comments:
In `@src/components/ui/DesktopContentColumn.test.tsx`:
- Around line 42-49: Update the DesktopContentColumn test assertions to use
root.classList.contains for separate exact-token checks of “flex” and “flex-1”,
while retaining the existing max-width assertion.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: dd69a0dd-eaa1-4b1b-b026-e7c526468204

📥 Commits

Reviewing files that changed from the base of the PR and between 2f646e2 and ce67ecc.

📒 Files selected for processing (4)

• src/components/ui/DesktopContentColumn.test.tsx
• src/hooks/useDesktopLayout.test.ts
• src/routes/JoinSession.tsx
• src/routes/Premium.tsx

[coderabbitai]

✅ Action performed

Comments resolved and changes approved.