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

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-19 13:34:00 -06:00
parent 99c5c28a51
commit d427d96a83
2 changed files with 14 additions and 1 deletions
@@ -146,7 +146,9 @@ export default function RootLayout({ children }: { children: ReactNode }) {
      <body
        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>
    </html>
  );
@@ -72,6 +72,17 @@ describe("RootLayout", () => {
    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)", () => {
    const testContent = "This is test content";
    const tree = RootLayout({ children: <div>{testContent}</div> });