fix: complete the wide-screen breakpoints for the main layout

The desktop-xl/xxl/xxxl breakpoints were introduced with the extension
list UI, but the main .container was never updated to use them: every
screen wider than 1100px rendered the same fixed width, leaving half
the viewport unused on modern displays.

The container now steps through the existing bands, and the desktop
band widths are CSS custom properties so themes can retune each band
from :root without re-declaring media queries.

Wider containers must not mean longer text lines: from desktop-xl up
the discussion post stream is capped (also a custom property), with the
slack sitting between the prose and the scrubber sidebar.

Author: imorland

framework/core/less/common/root.less

@@ -175,6 +175,16 @@
 
 :root {
 
+  // Main container width per breakpoint band. Themes can retune each band
+  // (or pin them all to one value) without re-declaring media queries.
+  --container-hd:                  1200px;
+  --container-xl:                  1300px;
+  --container-xxl:                 1600px;
+
+  // Readability cap for the discussion post stream on wide screens: the
+  // container keeps growing, prose does not. See DiscussionPage.less.
+  --discussion-content-max-width:  1000px;
+
   --primary-color:                 @primary-color;
   --secondary-color:               @secondary-color;
 

framework/core/less/common/scaffolding.less

@@ -63,8 +63,19 @@ p {
   @media @desktop {
     width: @screen-desktop;
   }
+  // The xl/xxl breakpoints exist since the extension list UI introduced them,
+  // but the container never used them: every screen wider than 1100px got the
+  // same fixed width, wasting half the viewport on modern displays. The widths
+  // are CSS custom properties (see root.less) so themes can retune each band
+  // without re-declaring the media queries.
   @media @desktop-hd {
-    width: @screen-desktop-hd;
+    width: var(--container-hd);
+  }
+  @media @desktop-xl {
+    width: var(--container-xl);
+  }
+  @media @desktop-xxl {
+    width: var(--container-xxl);
   }
 }
 

framework/core/less/forum/DiscussionPage.less

@@ -69,3 +69,14 @@
     }
   }
 }
+
+// On the widest bands the container keeps growing but prose should not: long
+// text lines get hard to read. Cap the post stream and let the slack sit
+// between it and the scrubber sidebar (the container is row-reversed, so the
+// auto margin on the content's main-start side absorbs the slack).
+@media @desktop-xl {
+  .DiscussionPage .Page-content {
+    max-width: var(--discussion-content-max-width);
+    margin-right: auto;
+  }
+}