Layout: Restructured tri-layout for sidebar control

Restructured tri-layout grid system, so the sidebars are contained in
their own child grid system, mimicking the parent grid, so we can treat
them as part of the same parent scroll container at smaller screen
sizes for consistent scroll/sticky behavior.

Tested on Firefox, Chromium, Gnome Web and Safari (MacOS).

For #4394
Changes made during review of #4562

Author: ssddanbrown

resources/sass/_layout.scss

@@ -354,59 +354,84 @@ body.flexbox {
   grid-template-columns: 1fr 4fr 1fr;
   grid-template-areas: "a b c";
   grid-column-gap: $-xl;
-  .tri-layout-right {
-    grid-area: c;
-    min-width: 0;
-  }
-  .tri-layout-left {
-    grid-area: a;
-    min-width: 0;
-  }
-  .tri-layout-middle {
-    grid-area: b;
-    padding-top: $-m;
-    min-width: 0;
-  }
+  position: relative;
 }
-@include smaller-than($xxl) {
-  .tri-layout-container {
-    grid-template-areas:  "c b b"
-    "a b b"
-    ". b b";
-    grid-template-columns: 1fr 3fr;
-    grid-template-rows: min-content min-content 1fr;
-    padding-inline-end: $-l;
-  }
+.tri-layout-sides {
+  grid-column-start: a;
+  grid-column-end: c;
+  grid-row: 1;
+  min-width: 0;
+  z-index: 4;
 }
-@include between($xxl, $xxxl) {
-  .tri-layout-container {
-    grid-template-columns: 1fr calc(940px + (2 * $-m)) 1fr;
-    grid-column-gap: $-s;
-    margin-inline-start: $-m;
-    margin-inline-end: $-m;
-  }
+.tri-layout-sides-content {
+  display: grid;
+  grid-template-areas: "a b c";
+  grid-template-columns: 1fr 4fr 1fr;
+  height: 100%;
 }
-@include between($l, $xxl) {
-  .tri-layout-left {
-    position: sticky;
-    top: $-m;
-  }
-  .tri-layout-left-contents {
+.tri-layout-middle {
+  grid-area: b;
+  padding-top: $-m;
+  min-width: 0;
+  z-index: 5;
+}
+.tri-layout-right {
+  grid-area: c;
+  min-width: 0;
+}
+.tri-layout-left {
+  grid-area: a;
+  min-width: 0;
+}
+
+@include larger-than($xxl) {
+  .tri-layout-left-contents, .tri-layout-right-contents {
+    padding: $-xl $-m;
     position: sticky;
     top: 0;
     max-height: 100vh;
+    min-height: 50vh;
     overflow-y: scroll;
+    overflow-x: hidden;
     height: 100%;
     scrollbar-width: none;
     -ms-overflow-style: none;
     &::-webkit-scrollbar {
       display: none;
     }
   }
+  .tri-layout-middle-contents {
+    max-width: 940px;
+    margin: 0 auto;
+  }
 }
-@include larger-than($xxl) {
-  .tri-layout-left-contents, .tri-layout-right-contents {
-    padding: $-xl $-m;
+@include between($xxl, $xxxl) {
+  .tri-layout-sides-content, .tri-layout-container {
+    grid-template-columns: 1fr calc(940px + (2 * $-m)) 1fr;
+  }
+  .tri-layout-container {
+    grid-column-gap: $-s;
+    margin-inline-start: $-m;
+    margin-inline-end: $-m;
+  }
+}
+@include smaller-than($xxl) {
+  .tri-layout-container {
+    grid-template-areas:  "a b b";
+    grid-template-columns: 1fr 3fr;
+    grid-template-rows: min-content min-content 1fr;
+    padding-inline-end: $-l;
+  }
+  .tri-layout-sides {
+    grid-column-start: a;
+    grid-column-end: a;
+  }
+  .tri-layout-sides-content {
+    display: block;
+  }
+}
+@include between($l, $xxl) {
+  .tri-layout-sides-content {
     position: sticky;
     top: 0;
     max-height: 100vh;
@@ -420,31 +445,39 @@ body.flexbox {
       display: none;
     }
   }
-  .tri-layout-middle-contents {
-    max-width: 940px;
-    margin: 0 auto;
+}
+@include larger-than($l) {
+  .tri-layout-mobile-tabs {
+    display: none;
+  }
+  .tri-layout-left-contents > *, .tri-layout-right-contents > * {
+    @include lightDark(opacity, 0.6, 0.75);
+    transition: opacity ease-in-out 120ms;
+    &:hover, &:focus-within {
+      opacity: 1 !important;
+    }
+    @media (prefers-contrast: more) {
+      opacity: 1 !important;
+    }
   }
 }
-
 @include smaller-than($l) {
   .tri-layout-container {
     grid-template-areas:  none;
     grid-template-columns: 1fr;
     grid-column-gap: 0;
     padding-inline-end: $-xs;
     padding-inline-start: $-xs;
-    .tri-layout-left-contents, .tri-layout-right-contents {
+    .tri-layout-sides {
       padding-inline-start: $-m;
       padding-inline-end: $-m;
+      grid-column: 1/1;
     }
     .tri-layout-left > *, .tri-layout-right > * {
       display: none;
       pointer-events: none;
     }
     .tri-layout-left, .tri-layout-right {
-      grid-area: none;
-      grid-column: 1/1;
-      grid-row: 1;
       padding-top: 0 !important;
     }
     .tri-layout-middle {
@@ -470,21 +503,6 @@ body.flexbox {
     }
   }
 }
-@include larger-than($l) {
-  .tri-layout-mobile-tabs {
-    display: none;
-  }
-  .tri-layout-left-contents > *, .tri-layout-right-contents > * {
-    @include lightDark(opacity, 0.6, 0.75);
-    transition: opacity ease-in-out 120ms;
-    &:hover, &:focus-within {
-      opacity: 1 !important;
-    }
-    @media (prefers-contrast: more) {
-      opacity: 1 !important;
-    }
-  }
-}
 
 @include smaller-than($m) {
   .tri-layout-container {

resources/views/layouts/tri.blade.php

@@ -27,23 +27,27 @@ class="tri-layout-mobile-tab px-m py-m text-link active">
 
     <div refs="tri-layout@container" class="tri-layout-container" @yield('container-attrs') >
 
-        <div class="tri-layout-left print-hidden" id="sidebar">
-            <aside class="tri-layout-left-contents">
-                @yield('left')
-            </aside>
+        <div class="tri-layout-sides print-hidden">
+            <div class="tri-layout-sides-content">
+                <div class="tri-layout-right print-hidden">
+                    <aside class="tri-layout-right-contents">
+                        @yield('right')
+                    </aside>
+                </div>
+
+                <div class="tri-layout-left print-hidden" id="sidebar">
+                    <aside class="tri-layout-left-contents">
+                        @yield('left')
+                    </aside>
+                </div>
+            </div>
         </div>
 
         <div class="@yield('body-wrap-classes') tri-layout-middle">
             <div id="main-content" class="tri-layout-middle-contents">
                 @yield('body')
             </div>
         </div>
-
-        <div class="tri-layout-right print-hidden">
-            <aside class="tri-layout-right-contents">
-                @yield('right')
-            </aside>
-        </div>
     </div>
 
 @stop