From 32961d480c8db188e14c49501ea528f1c71f0485 Mon Sep 17 00:00:00 2001
From: Sami Mazouz <sychocouldy@gmail.com>
Date: Thu, 8 Sep 2022 20:33:32 +0100
Subject: [PATCH] fix(qa): grid layout causes overflowing of content

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 |  5 +++--
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/framework/core/less/common/root.less b/framework/core/less/common/root.less
index 1b0e6988a..694ce557a 100644
--- a/framework/core/less/common/root.less
+++ b/framework/core/less/common/root.less
@@ -116,4 +116,8 @@
   @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 e0cafb51f..3d65bd1f2 100644
--- a/framework/core/less/common/scaffolding.less
+++ b/framework/core/less/common/scaffolding.less
@@ -55,17 +55,8 @@ 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 052d02479..5a5d300b4 100644
--- a/framework/core/less/forum/DiscussionPage.less
+++ b/framework/core/less/forum/DiscussionPage.less
@@ -25,9 +25,10 @@
 @media @tablet-up {
   .DiscussionPage-discussion {
     > .container {
+      --container-gap: 75px;
       display: grid;
-      grid-gap: 75px;
-      grid-template-columns: 1fr 150px;
+      grid-gap: var(--container-gap);
+      grid-template-columns: calc(~"var(--container-width) - 150px - var(--container-gap)") 150px;
       grid-template-areas: 'stream nav';
 
       &::before, &::after {