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

fixes #8646 fixes #8702
mdn · May 15, 2023 · c448c85 · c448c85
1 parent 80094ea
commit c448c85
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/client/src/app.scss b/client/src/app.scss
@@ -97,16 +97,18 @@
   --article-actions-container-height: 2rem;
   --icon-size: 1rem;
   --sticky-header-height: calc(
-    var(--top-nav-height) + var(--article-actions-container-height) + 2px
+    var(--top-nav-height) + var(--article-actions-container-height) + 3px
   );
 }
 
-.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) {

diff --git a/client/src/document/index.scss b/client/src/document/index.scss
@@ -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-top);
+
   @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;
     }