CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Cap every page at 1920px so layouts stop stretching on ultrawide viewports.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilallo
2026-08-19 13:34:00 -06:00
co-authored by Cursor
parent 99c5c28a51
commit d427d96a83
2 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/layout.tsx
+3 -1
View File
@@ -146,7 +146,9 @@ export default function RootLayout({ children }: { children: ReactNode }) {
<body <body
className={`${inter.variable} ${bricolageGrotesque.variable} ${spaceGrotesk.variable}`} className={`${inter.variable} ${bricolageGrotesque.variable} ${spaceGrotesk.variable}`}
> >
<div className="min-h-screen flex flex-col">{children}</div> <div className="mx-auto flex min-h-screen w-full max-w-[1920px] flex-col">
{children}
</div>
</body> </body>
</html> </html>
); );
tests/unit/Layout.test.jsx
+11
View File
@@ -72,6 +72,17 @@ describe("RootLayout", () => {
expect(container).toBeTruthy(); expect(container).toBeTruthy();
}); });
test("caps the page shell at 1920px", () => {
const tree = RootLayout({ children: <div>Test content</div> });
const container = findDescendant(
tree,
(n) => n.type === "div" && n.props?.className?.includes("min-h-screen"),
);
expect(container.props.className).toContain("max-w-[1920px]");
expect(container.props.className).toContain("mx-auto");
expect(container.props.className).toContain("w-full");
});
test("renders children directly inside the flex container (no <main> at root)", () => { test("renders children directly inside the flex container (no <main> at root)", () => {
const testContent = "This is test content"; const testContent = "This is test content";
const tree = RootLayout({ children: <div>{testContent}</div> }); const tree = RootLayout({ children: <div>{testContent}</div> });