UX: add MQ to change grid layout for main-outlet-wrapper (#37564)

The sidebar becomes a floating-overlay element at size = md, so by
updating the grid layout we avoid an invisible element interfering with
grid gap properties.

This shouldn't change anything visually and have no theme-impact afaict.

app/assets/stylesheets/common/base/discourse.scss

@@ -869,6 +869,13 @@ form {
   grid-template-columns: 0 minmax(0, 1fr); // 0 column width needs to be set for CSS transitions
   gap: 0;
 
+  @include viewport.until(md) {
+    grid-template-areas:
+      "content"
+      "below-content";
+    grid-template-columns: 1fr;
+  }
+
   #main-outlet {
     grid-area: content;
   }