From b2abb2761e400965fa95e0b5354e6d7f41ee99ef Mon Sep 17 00:00:00 2001
From: huchenxi <huchenxi@lattebank.com>
Date: Mon, 20 Apr 2026 01:08:01 +0800
Subject: [PATCH] feat(web): make content width responsive on wide screens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow-up to #493 which widened the content area from 720px to 960px.

On displays ≥1280px wide, replace the fixed max-width with a CSS
variable that scales to 90% of available width (capped at 1200px).
Screens below 1280px keep the 960px default, so the change is
invisible on smaller monitors.

The CSS custom property (`--content-max-w`) also opens the door for
future enhancements like sidebar-aware content resizing without
additional Tailwind config changes.
---
 web/src/index.css      | 7 +++++++
 web/tailwind.config.ts | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/web/src/index.css b/web/src/index.css
index 33477206c..3209459d5 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -165,6 +165,13 @@ body {
     opacity: 1;
 }
 
+/* Scale content area to use available space on wide screens */
+@media (min-width: 1280px) {
+    :root {
+        --content-max-w: min(90%, 1200px);
+    }
+}
+
 /* Desktop sidebar: use custom width from CSS variable */
 @media (min-width: 1024px) {
     .desktop-scrollbar-left {
diff --git a/web/tailwind.config.ts b/web/tailwind.config.ts
index 7f6b5547c..05ecb2313 100644
--- a/web/tailwind.config.ts
+++ b/web/tailwind.config.ts
@@ -5,7 +5,7 @@ export default {
     theme: {
         extend: {
             maxWidth: {
-                content: '960px'
+                content: 'var(--content-max-w, 960px)'
             }
         }
     },