From 8aec252452cef3f5a72515059272f32e3a9286b9 Mon Sep 17 00:00:00 2001
From: Sami Mazouz <sychocouldy@gmail.com>
Date: Thu, 8 Sep 2022 20:51:13 +0100
Subject: [PATCH] fix(qa): simpler grid layout fix for overflow

Signed-off-by: Sami Mazouz <sychocouldy@gmail.com>
---
 framework/core/less/common/root.less          |  4 ----
 framework/core/less/common/scaffolding.less   | 11 ++++++++++-
 framework/core/less/forum/DiscussionPage.less |  7 ++++---
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/framework/core/less/common/root.less b/framework/core/less/common/root.less
index 694ce557a..1b0e6988a 100644
--- a/framework/core/less/common/root.less
+++ b/framework/core/less/common/root.less
@@ -116,8 +116,4 @@
   @media @tablet { --flarum-screen: tablet; }
   @media @desktop { --flarum-screen: desktop; }
   @media @desktop-hd { --flarum-screen: desktop-hd; }
-
-  @media @tablet { --container-width: @screen-tablet; }
-  @media @desktop { --container-width: @screen-desktop; }
-  @media @desktop-hd { --container-width: @screen-desktop-hd; }
 }
diff --git a/framework/core/less/common/scaffolding.less b/framework/core/less/common/scaffolding.less
index 3d65bd1f2..e0cafb51f 100644
--- a/framework/core/less/common/scaffolding.less
+++ b/framework/core/less/common/scaffolding.less
@@ -55,8 +55,17 @@ p {
   margin-left: auto;
   padding-left: 15px;
   padding-right: 15px;
-  width: var(--container-width);
   .clearfix();
+
+  @media @tablet {
+    width: @screen-tablet;
+  }
+  @media @desktop {
+    width: @screen-desktop;
+  }
+  @media @desktop-hd {
+    width: @screen-desktop-hd;
+  }
 }
 
 .containerNarrow {
diff --git a/framework/core/less/forum/DiscussionPage.less b/framework/core/less/forum/DiscussionPage.less
index 5a5d300b4..5aee15228 100644
--- a/framework/core/less/forum/DiscussionPage.less
+++ b/framework/core/less/forum/DiscussionPage.less
@@ -25,10 +25,9 @@
 @media @tablet-up {
   .DiscussionPage-discussion {
     > .container {
-      --container-gap: 75px;
       display: grid;
-      grid-gap: var(--container-gap);
-      grid-template-columns: calc(~"var(--container-width) - 150px - var(--container-gap)") 150px;
+      grid-gap: 75px;
+      grid-template-columns: 1fr 150px;
       grid-template-areas: 'stream nav';
 
       &::before, &::after {
@@ -65,6 +64,8 @@
 
   .DiscussionPage-stream {
     grid-area: stream;
+    max-width: 100%;
+    min-width: 0;
   }
 }