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)'
             }
         }
     },