Skip to content

docs(web): consolidate responsive breakpoints into a documented scale#277

Merged
Zach Dunn (zachdunn) merged 1 commit into
mainfrom
claude/responsive-follow-ups-9c23a6
Jul 19, 2026
Merged

docs(web): consolidate responsive breakpoints into a documented scale#277
Zach Dunn (zachdunn) merged 1 commit into
mainfrom
claude/responsive-follow-ups-9c23a6

Conversation

@zachdunn

Copy link
Copy Markdown
Member

Closes #276.

The signed-in shell carried four ad-hoc breakpoint values across three stylesheets, kept in sync only by scattered per-query comments:

  • 680 / 681 — the stack boundary (account-shell.css + signed-in-shell.css)
  • 1080 — mid-width rail restack (account-shell.css)
  • 560 — file-grid column drop (account-content.css)

The #274 review flagged that a third responsive surface already exists, so this introduces the documented breakpoint scale that follow-up called for.

What changed

  • Added a single Responsive breakpoint scale block at the top of signed-in-shell.css naming the three boundaries — --bp-rail (1080), --bp-stack (680), --bp-file-grid (560) — with the rationale for the 680/681 adjacency in one place.
  • Each of the four media queries now references the scale by name in its comment.

Media queries can't read CSS custom properties and the app has no PostCSS pipeline, so the scale is documentation (not --bp-* variables) per the option the issue sanctioned — a note in the block warns against defining them as variables that would silently fail in a media query.

Comment-only — no media query conditions or pixel values changed, so rendering is identical.

The signed-in shell carried four ad-hoc breakpoint values across three
stylesheets (680/681, 1080, 560) kept in sync only by scattered comments.
Add a single documented breakpoint scale in signed-in-shell.css and
reference each media query by name (--bp-stack / --bp-rail / --bp-file-grid).

Comment-only: no media query or pixel value changes. Closes #276.
@coderabbitai

coderabbitai Bot commented Jul 19, 2026

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are limited based on label configuration.

🏷️ Required labels (at least one) (2)
  • coderabbit:review
  • review
🚫 Excluded labels (none allowed) (1)
  • wip

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8b31aa51-d1b4-4692-bdf9-5a37ebac026c

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/responsive-follow-ups-9c23a6

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

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
uploads-web b3e0b8d Commit Preview URL

Branch Preview URL
Jul 19 2026, 11:32 PM

@zachdunn
Zach Dunn (zachdunn) merged commit a001695 into main Jul 19, 2026
4 checks passed
@zachdunn
Zach Dunn (zachdunn) deleted the claude/responsive-follow-ups-9c23a6 branch July 19, 2026 23:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Consolidate responsive breakpoints in the account shell styles

1 participant