fix(sidebar): incorrect offset and z-index on mobile (#8856)

remove --z-index-top variable, and split into per-element variables -
not everything can be on top!

remove some unnecessary z-indexes due to relative positioning

I intend to follow up with another commit removing the rest of the
reused/unnecessary z-indexes later - but don't want to block fixing this
issue with that

fixes #8646
fixes #8702

client/src/app.scss

@@ -78,14 +78,21 @@
   // + border
   --top-banner-outer-height: calc(var(--top-banner-height) + 2 * 1px);
 
-  --z-index-back: -1;
-  --z-index-top: 9999;
+  /* Z-Indexes
+     Keep this in order, and avoid reusing variables so elements each
+     exist on a distinct layer - we hit a lot of bugs if they don't */
   --z-index-a11y: 10000;
+  --z-index-modal-content: 801;
+  --z-index-modal-overlay: 800;
+  --z-index-top-banner: 701;
+  --z-index-main-header: 700;
+  --z-index-sidebar-mobile: 600;
   --z-index-mid: 500;
   --z-index-nav-menu: 200;
   --z-index-search-results: 101;
   --z-index-low: 100;
   --z-index-search-results-home: 99;
+  --z-index-back: -1;
 
   /* Features */
   --elem-radius: 0.25rem;
@@ -101,12 +108,14 @@
   );
 }
 
-.top-banner.visible ~ *,
-.top-banner.loading ~ * {
-  --sticky-header-height: calc(
-    var(--top-nav-height) + var(--article-actions-container-height) +
-      var(--top-banner-outer-height) + 2px
-  );
+@media screen and (min-width: $screen-md) {
+  .top-banner.visible ~ *,
+  .top-banner.loading ~ * {
+    --sticky-header-height: calc(
+      var(--top-nav-height) + var(--article-actions-container-height) +
+        var(--top-banner-outer-height) + 2px
+    );
+  }
 }
 
 @media screen and (min-width: $screen-md) {

client/src/document/index.scss

@@ -7,7 +7,7 @@
 .main-document-header-container {
   position: sticky;
   top: 0;
-  z-index: var(--z-index-top);
+  z-index: var(--z-index-main-header);
   @media screen and (min-width: $screen-md) {
     .top-banner.visible ~ &,
     .top-banner.loading ~ & {
@@ -645,10 +645,15 @@ kbd {
     display: flex;
     flex-direction: column;
   }
+
   max-height: var(--max-height);
   position: sticky;
   top: var(--offset);
+  z-index: var(--z-index-sidebar-mobile);
+
   @media screen and (min-width: $screen-md) {
+    z-index: auto;
+
     .sidebar {
       mask-image: linear-gradient(
         to bottom,
@@ -657,6 +662,7 @@ kbd {
         rgba(0, 0, 0, 0) 100%
       );
     }
+
     @media screen and not (min-height: $screen-height-place-limit) {
       overflow: auto;
     }

client/src/document/organisms/sidebar/index.scss

@@ -142,7 +142,6 @@
     right: 0;
     top: var(--offset);
     transform: translateX(-100%);
-    z-index: var(--z-index-top);
 
     .sidebar-inner {
       background: var(--background-primary);
@@ -159,7 +158,6 @@
       transition: 0.2s linear transform;
       width: 80vw;
       will-change: transform;
-      z-index: var(--z-index-top);
 
       .sidebar-inner-nav {
         display: contents;
@@ -205,7 +203,6 @@
       transition: opacity 0.2s linear;
       width: 100%;
       will-change: opacity;
-      z-index: var(--z-index-mid);
     }
 
     &.is-animating {

client/src/ui/_vars.scss

@@ -249,12 +249,3 @@ $screen-xxl: 1441px;
 
 // screen is to small for sticky placement
 $screen-height-place-limit: 44rem;
-
-/*
- * z-index scale
- */
-$send-to-back: -1;
-$bring-to-front: 9999;
-$bottom-layer: 100;
-$middle-layer: 200;
-$top-layer: 300;

client/src/ui/atoms/modal/index.scss

@@ -15,7 +15,7 @@ body.ReactModal__Body--open {
   position: fixed;
   right: 0;
   top: 0;
-  z-index: var(--z-index-top);
+  z-index: var(--z-index-modal-overlay);
 
   &.wait {
     &,
@@ -30,7 +30,7 @@ body.ReactModal__Body--open {
   flex-basis: 32.5rem;
   outline: none;
   padding: 1.5rem;
-  z-index: var(--z-index-top);
+  z-index: var(--z-index-modal-content);
 }
 
 .modal-header {

client/src/ui/organisms/article-actions/index.scss

@@ -11,6 +11,10 @@
     text-transform: initial;
   }
 
+  .article-actions-toggle {
+    display: block;
+  }
+
   @media screen and (min-width: $screen-md) {
     display: block;
 

client/src/ui/organisms/placement/index.scss

@@ -172,7 +172,7 @@ section.place {
   height: var(--top-banner-height);
   position: sticky;
   top: 0;
-  z-index: var(--z-index-top);
+  z-index: var(--z-index-top-banner);
 
   &.fallback {
     position: initial;

client/src/ui/organisms/top-navigation/index.scss

@@ -5,7 +5,6 @@
   border-bottom: 1px solid var(--border-primary);
   position: relative;
   width: 100%;
-  z-index: $bottom-layer;
 
   .container {
     align-items: center;
@@ -34,7 +33,6 @@
 
   &.show-nav {
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
-    z-index: var(--z-index-top);
 
     .container {
       height: auto;