fix(frontend): shared page gutters and centered max-width column - #5836
Conversation
dosubot
Bot
added
the
size:L
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughSummary by CodeRabbit
WalkthroughThe PR adds shared page gutter and content-width classes. It applies them across agent, session, overview, and settings pages. It simplifies settings variants, equalizes agent grid rows, and hides horizontal overflow for empty virtual tables. ChangesPage layout standardization
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
|
@coderabbitai review |
fe504c4 to
c1b7e45
Compare
ceab60f to
bfcc5f0
Compare
|
@coderabbitai review |
✅ Action performedReview finished.
|
Railway Preview Environment
Updated at 2026-08-09T21:22:24.113Z |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
web/packages/agenta-ui/src/components/pageWidth.ts (2)
27-27: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winMake the shared width contract independent of global
box-sizing.Line [27] combines
max-w-[1248px]with thepx-16padding from Line [8]. The documented 1120px inner column is correct only withbox-sizing: border-box; CSS otherwise applies the width to the content box and places padding outside it. (w3.org)PageLayout.tsxalso notes that Tailwind preflight is disabled. Addbox-borderhere, or verify that the global reset covers every consumer. Tailwind providesbox-borderfor this purpose. (tailwindcss.com)Proposed fix
-export const pageContentWidthClass = "mx-auto w-full max-w-[1248px]" +export const pageContentWidthClass = "mx-auto box-border w-full max-w-[1248px]"Source: MCP tools
1-7: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winShorten the new in-code layout rationale.
The changed comments contain historical and design context that is too long for in-code comments. Keep concise contract documentation in the code. Move durable rationale to external documentation or an ADR.
web/packages/agenta-ui/src/components/pageWidth.ts#L1-L7: Replace the gutter history with a short description of the exported class.web/packages/agenta-ui/src/components/pageWidth.ts#L10-L26: Replace the width rationale and example block with concise usage documentation.web/oss/src/components/pages/settings/components/SettingsPageShell.tsx#L7-L17: Remove the hard-coded page-count rationale and keep only the shell contract.web/oss/src/components/pages/settings/components/SettingsPageShell.tsx#L53-L54: Reduce the two-line rationale to one short constraint comment.As per coding guidelines, “Keep in-code comments to at most one short line; use longer comments only for genuinely surprising constraints such as bugs, races, or ordering requirements.”
Source: Coding guidelines
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: d0dc6ffa-1773-419c-b192-806bd99d282a
📒 Files selected for processing (13)
web/oss/src/components/pages/agent-home/StripHome.tsxweb/oss/src/components/pages/agents/AgentsGrid.tsxweb/oss/src/components/pages/agents/AgentsPage.tsxweb/oss/src/components/pages/agents/ArchivedAgentsPage.tsxweb/oss/src/components/pages/sessions/SessionsPage.tsxweb/oss/src/components/pages/settings/components/SettingsPageShell.tsxweb/oss/src/pages/w/[workspace_id]/p/[project_id]/apps/[app_id]/overview/index.tsxweb/oss/src/pages/w/[workspace_id]/p/[project_id]/settings/index.tsxweb/packages/agenta-ui/package.jsonweb/packages/agenta-ui/src/InfiniteVirtualTable/components/InfiniteVirtualTableInner.tsxweb/packages/agenta-ui/src/components/PageLayout.tsxweb/packages/agenta-ui/src/components/index.tsweb/packages/agenta-ui/src/components/pageWidth.ts
bfcc5f0 to
01bdd5c
Compare
One rule owns page spacing now: pageGutterClass (56px top, 64px sides, 32px bottom - Mahmoud's spec) applied by PageLayout for every page that uses it, and pageContentWidthClass (1120px content column, engaging above ~1490px) for the centered cap. Settings drops its own gutter scale and 1120 table cap for the shared ones; home and sessions wrap in the shared column. Also stop empty tables growing a horizontal scrollbar: rc-table hands the empty-state body its numeric scroll.x, one pixel wider than a bordered table's viewport, so suppress overflow-x while there are no rows.
AgentsPage and ArchivedAgentsPage opt into pageContentWidthClass like home, sessions and settings, so the agents list centres above ~1490px instead of running the full monitor width.
The h-full cards stretch to their row, and the create cell's min-h-[148px] made the last row taller than every other. auto-rows-fr sizes all rows the same, so every card matches.
The agent overview's hand-rolled insets (!pl-[4.5rem] !pr-14) give way to pageContentWidthClass, so its title and columns share Home's centred 1120px column and gutters. The prompt-app/evaluator overview branch stays full width for its charts and tables.
Preflight is off app-wide, so a plain div is content-box: w-full + px-16 sizes the box 128px wider than its parent and the 1248px cap yields a 1376px real box. box-border makes the gutters and the cap mean what the comments say.
01bdd5c to
5e10fb5
Compare
1 participant
What
Pages felt cramped since Dec 2025, when the 24px layout-level side padding was dropped (2f77dc9) and pages inherited only PageLayout's 16px. And on very large screens nothing capped the content, so lines ran the full monitor width.
One shared rule now owns both, in
@agenta/ui(components/page-width):pageGutterClass= 56px top, 64px sides, 32px bottom (Mahmoud's spec).PageLayoutapplies it by default, so every PageLayout page gets it; pages that deliberately go edge-to-edge (!p-0overrides like the playground) keep winning.pageContentWidthClass= a centered 1120px content column (1248px box including its own gutters). It engages only above ~1490px viewport; laptops keep their full width. Applied to Settings, home, and sessions now; other pages can opt in with one class.Settings drops its private gutter scale and its private 1120 table cap for the shared ones (its
variant="table"is gone; forms still cap at 640px). The page title aligns to the same centered column as the content.Empty-table scrollbar
Every empty table showed a horizontal scrollbar: rc-table hands its empty-state body the numeric
scroll.x, which on a bordered table is a pixel wider than the body's viewport. The IVT container now suppresses horizontal overflow only while the table has no rows.Base
Stacked on #5833 (the sessions toolbar revert) because the sessions page wrapper line builds on it; this PR's diff is exactly the nine layout files.
Screenshots
Verified at 2560x1400 and 1440x900 on the rel112 QA stack: settings (projects, API keys, preferences, audit log), home, sessions, observability, agents. Settings/home/sessions center above ~1490px; observability and agents keep full width with the new gutters.