Make account Activity usable on narrow viewports

[kentcdodds]

Intent

Make /account/activity readable and usable on phones and other narrow viewports instead of forcing a crushed two-column layout.

Summary

• Shared account list/detail layout stacks until 1100px, so the still-visible 200px account rail cannot squeeze the detail pane.
• Account nav still collapses at 860px.
• When a run is selected, the detail pane moves above the list on stacked screens.
• Long ids wrap, metadata goes single-column earlier, and logs stay readable.

Testing

• Playwright screenshots at exact CSS widths 390, 700, 960 (stacked, detail first) and 1200 (two-column).
• CI Validate / Preview on this PR.

System recap — composes existing primitives (low risk)

Mode: recap · Base: main @ d142d133 · Head: 328bace4

Classification: composes — no primitives added or changed; this PR restyles the existing account list/detail layout for narrow viewports.

Primitives touched

Primitive	Group	Impact
app-ui	surfaces	composes — account list/detail stacking and Activity wrapping

System map

Account Activity still uses the same run-record UI; the layout stacks and wraps before two content columns can crush.

Legend: green = composes (wiring only) · amber = extended by this PR · red = new primitive · gray = context (unchanged, included only when an edge crosses it).

flowchart LR
	appUi["app-ui<br/>Browser app"]:::touched
	appUi -->|"stack list/detail below 1100px"| appUi
	classDef touched fill:#1a7f37,color:#fff
	classDef extended fill:#9a6700,color:#fff
	classDef added fill:#cf222e,color:#fff
	classDef untouched fill:#57606a,color:#fff

Loading

  

Summary by CodeRabbit

• UI Improvements
  • Improved account activity and account management layouts on narrow screens.
  • Detail content can now appear before sidebar navigation on smaller displays.
  • Filter controls stack vertically for easier mobile use.
  • Prevented detail cards and metadata from overflowing.
  • Improved wrapping and column handling for long values, code, and activity logs.
  • Enhanced readability and navigation across mobile and smaller displays.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 84298873-c5d8-4df5-a019-3ade452b98ac

📥 Commits

Reviewing files that changed from the base of the PR and between 81c194b and 328bace.

📒 Files selected for processing (1)

• packages/worker/client/routes/account-management-components.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/worker/client/routes/account-management-components.tsx

---

📝 Walkthrough

Walkthrough

The account management and account activity layouts now share 860px and 1100px responsive breakpoints. Selected activity details can appear before navigation, filters stack vertically, and long content wraps without overflowing.

Changes

Account activity responsive layout

Layer / File(s)	Summary
Shared narrow-screen layout foundation packages/worker/client/routes/account-management-components.tsx	Exports shared navigation and stacking breakpoints, adds optional detail-first ordering, and constrains long metadata values.
Account activity narrow-screen behavior packages/worker/client/routes/account-activity.tsx	Prioritizes selected details, stacks filters, constrains detail cards, collapses log rows, and wraps metadata content at narrow widths.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• kentcdodds/kody#1233: Extends responsive layout and metadata behavior in the same account activity and account management files.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: improving Account Activity usability on narrow viewports.
Description check	✅ Passed	The description includes the required Intent, Summary, and Testing sections and explains the responsive layout changes and validation performed.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ 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 cursor/activity-narrow-viewport-2541

---

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

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

[github-actions]

🔎 Preview deployed: https://kody-pr-1265.kody-a99.workers.dev

Worker: kody-pr-1265
D1: kody-pr-1265-db
KV: kody-pr-1265-oauth-kv

Mocks:

• cloudflare: https://kody-pr-1265-mock-cloudflare.kody-a99.workers.dev/__mocks (kody-pr-1265-mock-cloudflare)

[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 `@packages/worker/client/routes/account-activity.tsx`:
- Around line 778-784: Update the detail content rendered within the section
using cardCss so direct children such as AccountManagementMessage can shrink and
wrap unbreakable error text: add minWidth: 0 and overflowWrap: 'anywhere' to the
relevant detail wrapper or text element, or limit overflow: 'hidden' to the log
and metadata scroll containers instead.

🪄 Autofix

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: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 687b7818-0910-4dc8-af70-5efd4197467e

📥 Commits

Reviewing files that changed from the base of the PR and between d142d13 and 0c63a23.

📒 Files selected for processing (2)

• packages/worker/client/routes/account-activity.tsx
• packages/worker/client/routes/account-management-components.tsx