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

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

Hide file tree

Showing 2 changed files with 11 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
@@ -635,6 +635,8 @@ kbd {
   --max-height: calc(100vh - var(--offset));
 
   @media screen and (max-width: $screen-lg) {
+    z-index: var(--z-index-top);
+
     .mdn-cta-container ~ .document-page & {
       // minus 3 rem to ~ account for the top banner
       --offset: calc(var(--sticky-header-height) + 3rem);