From af601057c4c178ae9ae09ce300988efb720b61b6 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Fri, 29 May 2026 20:40:14 -0500
Subject: [PATCH] style: wider max-width at 2xl+ (1500px -> 2000px) (batch
 0.33.8.6)

- Layout, AdminShell, Sidebar, footer, mobile nav: 2xl:max-w-[2000px]
- Content area grows from ~1436px to ~1936px, enough room for
  dual-bucket tracker at 2xl+
- Bump v0.33.8.5 -> v0.33.8.6
---
 HISTORY.md                           | 8 ++++++++
 client/App.jsx                       | 2 +-
 client/components/layout/Layout.jsx  | 4 ++--
 client/components/layout/Sidebar.jsx | 4 ++--
 package.json                         | 2 +-
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/HISTORY.md b/HISTORY.md
index 40a630c..ceb01e4 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -1,5 +1,13 @@
 # Bill Tracker — Changelog
 
+## v0.33.8.6
+
+### 🎨 Design
+
+- **Wider max-width at 2xl+** — All layout containers (Sidebar, Layout, AdminShell, footer, mobile nav) now cap at 2000px at ≥1536px instead of 1500px. With `lg:px-8`, content area grows from ~1436px to ~1936px — each tracker bucket gets ~958px, enough for all 8 columns with Notes clearly readable.
+
+---
+
 ## v0.33.8.5
 
 ### 🎨 Design
diff --git a/client/App.jsx b/client/App.jsx
index 639fb05..2cc7c10 100644
--- a/client/App.jsx
+++ b/client/App.jsx
@@ -83,7 +83,7 @@ function AdminShell({ children }) {
   return (
     <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,oklch(var(--primary)/0.10),transparent_34rem),linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.28))] text-foreground">
       <AppNavigation adminMode />
-      <main className="mx-auto w-full max-w-[1500px] px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
+      <main className="mx-auto w-full max-w-[1500px] 2xl:max-w-[2000px] px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
         {children}
       </main>
     </div>
diff --git a/client/components/layout/Layout.jsx b/client/components/layout/Layout.jsx
index 394c482..4cfb242 100644
--- a/client/components/layout/Layout.jsx
+++ b/client/components/layout/Layout.jsx
@@ -31,13 +31,13 @@ export default function Layout({ mainContentId }) {
       <AppNavigation mainContentId={mainContentId} />
 
       <main className="w-full">
-        <div className="mx-auto w-full max-w-[1500px] px-4 py-6 sm:px-6 lg:px-8 lg:py-8"
+        <div className="mx-auto w-full max-w-[1500px] 2xl:max-w-[2000px] px-4 py-6 sm:px-6 lg:px-8 lg:py-8"
           id={mainContentId}
         >
           <Outlet />
         </div>
       </main>
-      <footer className="mx-auto flex w-full max-w-[1500px] flex-wrap items-center justify-center gap-x-4 gap-y-2 px-4 pb-6 text-xs text-muted-foreground sm:px-6 lg:px-8"
+      <footer className="mx-auto flex w-full max-w-[1500px] 2xl:max-w-[2000px] flex-wrap items-center justify-center gap-x-4 gap-y-2 px-4 pb-6 text-xs text-muted-foreground sm:px-6 lg:px-8"
         aria-label="Footer"
       >
         <Link to="/about" className="underline-offset-4 hover:text-foreground hover:underline">About</Link>
diff --git a/client/components/layout/Sidebar.jsx b/client/components/layout/Sidebar.jsx
index 30d8b15..b2bb774 100644
--- a/client/components/layout/Sidebar.jsx
+++ b/client/components/layout/Sidebar.jsx
@@ -172,7 +172,7 @@ export default function Sidebar({ adminMode = false }) {
 
   return (
     <header className="sticky top-0 z-40 border-b border-border/80 bg-card/95 shadow-sm shadow-foreground/10 backdrop-blur-md supports-[backdrop-filter]:bg-card/90">
-      <div className="mx-auto flex h-16 w-full max-w-[1500px] items-center gap-4 px-4 sm:px-6 lg:px-8">
+      <div className="mx-auto flex h-16 w-full max-w-[1500px] 2xl:max-w-[2000px] items-center gap-4 px-4 sm:px-6 lg:px-8">
         <BrandBlock adminMode={adminMode} />
 
         <nav className="hidden items-center gap-1 lg:flex">
@@ -216,7 +216,7 @@ export default function Sidebar({ adminMode = false }) {
 
       {mobileOpen && (
         <div className="max-h-[70vh] overflow-y-auto border-t border-border/70 bg-card/95 px-4 py-3 shadow-lg shadow-foreground/10 lg:hidden">
-          <nav className="mx-auto grid max-w-[1500px] gap-1">
+          <nav className="mx-auto grid max-w-[1500px] 2xl:max-w-[2000px] gap-1">
             {!adminMode && trackerItems.map(item => (
               <NavPill key={item.to} item={item} onNavigate={() => setMobileOpen(false)} />
             ))}
diff --git a/package.json b/package.json
index 37ffacb..597d68d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bill-tracker",
-  "version": "0.33.8.5",
+  "version": "0.33.8.6",
   "description": "Monthly bill tracking system",
   "main": "server.js",
   "scripts": {