From c448c856fe2b27ef074bd7244fe778f39047681f Mon Sep 17 00:00:00 2001
From: Leo McArdle <lmcardle@mozilla.com>
Date: Mon, 15 May 2023 10:33:38 +0000
Subject: [PATCH] fix(sidebar): incorrect offset and z-index on mobile

fixes https://github.com/mdn/yari/issues/8646
fixes https://github.com/mdn/yari/issues/8702
---
 client/src/app.scss            | 16 +++++++++-------
 client/src/document/index.scss |  6 ++++++
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/client/src/app.scss b/client/src/app.scss
index 5b73e574ac45..4d4c6f0b114b 100644
--- 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
index d39237aed49f..69e7c6d49d16 100644
--- 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;
     }