From f7028c563adcbe9de83463e80f6b5a79af66a8d6 Mon Sep 17 00:00:00 2001
From: josh <josh@thewrightserver.net>
Date: Mon, 20 Apr 2026 21:28:44 -0400
Subject: [PATCH] Let Dashboard and wide Layout spread on 2xl screens

Dashboard now opts into `wide`, and the wide container scales from 1400
to 1800px at the 2xl breakpoint so content uses the extra room on big
monitors. Queue-load grid gains xl/2xl column counts for the new width.
Below 1536px nothing changes.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 client/src/components/Layout.tsx | 6 +++---
 client/src/pages/Dashboard.tsx   | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Layout.tsx b/client/src/components/Layout.tsx
index e612365..d7b2ad6 100644
--- a/client/src/components/Layout.tsx
+++ b/client/src/components/Layout.tsx
@@ -112,7 +112,7 @@ export default function Layout({ children, title, action, subheader, wide }: Lay
     <div className="min-h-screen bg-background text-foreground flex flex-col">
       {/* Top nav */}
       <header className="sticky top-0 z-30 flex-shrink-0 border-b border-border bg-card/95 backdrop-blur">
-        <div className="mx-auto max-w-[1400px] px-4 h-12 flex items-center gap-4">
+        <div className="mx-auto max-w-[1400px] 2xl:max-w-[1800px] px-4 h-12 flex items-center gap-4">
           <Link
             to="/dashboard"
             className="flex items-center gap-2 font-semibold text-sm whitespace-nowrap"
@@ -233,7 +233,7 @@ export default function Layout({ children, title, action, subheader, wide }: Lay
       {(title || action || subheader) && (
         <div className="border-b border-border bg-card/50">
           <div
-            className={`mx-auto px-4 py-3 ${wide ? 'max-w-[1400px]' : 'max-w-6xl'} flex items-center justify-between gap-3`}
+            className={`mx-auto px-4 py-3 ${wide ? 'max-w-[1400px] 2xl:max-w-[1800px]' : 'max-w-6xl'} flex items-center justify-between gap-3`}
           >
             <div className="min-w-0 flex-1">
               {title && (
@@ -246,7 +246,7 @@ export default function Layout({ children, title, action, subheader, wide }: Lay
         </div>
       )}
 
-      <main className={`flex-1 mx-auto w-full px-4 py-6 ${wide ? 'max-w-[1400px]' : 'max-w-6xl'}`}>
+      <main className={`flex-1 mx-auto w-full px-4 py-6 ${wide ? 'max-w-[1400px] 2xl:max-w-[1800px]' : 'max-w-6xl'}`}>
         {children}
       </main>
 
diff --git a/client/src/pages/Dashboard.tsx b/client/src/pages/Dashboard.tsx
index e033f07..463fdc3 100644
--- a/client/src/pages/Dashboard.tsx
+++ b/client/src/pages/Dashboard.tsx
@@ -45,7 +45,7 @@ export default function Dashboard() {
   const maxSeverity = Math.max(...(a?.openBySeverity.map((r) => r.count) ?? [1]));
 
   return (
-    <Layout title="Dashboard" subheader={<p className="text-xs text-muted-foreground">Last 30 days</p>}>
+    <Layout wide title="Dashboard" subheader={<p className="text-xs text-muted-foreground">Last 30 days</p>}>
       {!a ? (
         <p className="py-16 text-center text-sm text-muted-foreground">Loading analytics…</p>
       ) : (
@@ -143,7 +143,7 @@ export default function Dashboard() {
             {a.queueByAssignee.length === 0 ? (
               <p className="text-xs text-muted-foreground">No open tickets right now.</p>
             ) : (
-              <div className="grid gap-2 md:grid-cols-2 lg:grid-cols-3">
+              <div className="grid gap-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6">
                 {a.queueByAssignee
                   .slice()
                   .sort((x, y) => y.count - x.count)