fix(sidebar): fix scrolling behavior.

fixes mdn#8494
fiji-flo · Mar 27, 2023 · 04537d4 · 04537d4
1 parent 7abcf66
commit 04537d4
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 21 deletions.
diff --git a/client/src/document/index.scss b/client/src/document/index.scss
@@ -619,15 +619,23 @@ kbd {
 }
 
 .sidebar-container {
-  @media screen and (min-width: $screen-md) {
+  --offset: var(--main-document-header-height);
+  --max-height: calc(100vh - var(--offset));
+
+  @media screen and (max-width: $screen-lg) {
+    .mdn-cta-container ~ .document-page & {
+      --offset: calc(var(--main-document-header-height) + 3rem);
+      --max-height: calc(100vh - var(--offset));
+    }
+  }
+
+  @media screen and (min-width: $screen-md) and (min-height: $screen-height-limit) {
     display: flex;
     flex-direction: column;
   }
-  max-height: calc(100vh - var(--main-document-header-height) - 3rem);
-  overflow: auto;
+  max-height: var(--max-height);
   position: sticky;
   top: 5rem;
-
   @media screen and (min-width: $screen-md) {
     .sidebar {
       mask-image: linear-gradient(
@@ -637,6 +645,9 @@ kbd {
         rgba(0, 0, 0, 0) 100%
       );
     }
+    @media screen and (max-height: $screen-height-limit) {
+      overflow: auto;
+    }
   }
 
   .toc-container {
@@ -655,7 +666,7 @@ kbd {
         rgb(0, 0, 0) 3rem calc(100% - 3rem),
         rgba(0, 0, 0, 0) 100%
       );
-      overflow: scroll;
+      overflow: auto;
       position: sticky;
       top: var(--main-document-header-height);
 

diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss
@@ -1,16 +1,8 @@
 @use "../../../ui/vars" as *;
 
 .sidebar {
-  --offset: var(--main-document-header-height);
-  --max-height: calc(100vh - var(--offset));
-
   color: var(--text-secondary);
 
-  .mdn-cta-container ~ .document-page & {
-    --offset: calc(var(--main-document-header-height) + 3rem);
-    --max-height: calc(100vh - var(--offset));
-  }
-
   .backdrop {
     display: none;
   }
@@ -155,8 +147,7 @@
     .sidebar-inner {
       background: var(--background-primary);
       border-right: 1px solid var(--border-primary);
-      display: flex;
-      flex-direction: column;
+      display: grid;
       height: var(--max-height);
       max-height: var(--max-height);
       max-width: 20rem;
@@ -171,9 +162,7 @@
       z-index: var(--z-index-top);
 
       .sidebar-inner-nav {
-        @media screen and (min-height: 48rem) {
-          overflow: auto;
-        }
+        display: contents;
         mask-image: linear-gradient(
           to bottom,
           rgb(0, 0, 0) 0% calc(100% - 3rem),
@@ -182,8 +171,21 @@
         padding-bottom: 3rem;
       }
 
+      @media screen and (min-height: $screen-height-limit) {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+
+        .sidebar-inner-nav {
+          display: block;
+          overflow: auto;
+        }
+      }
+
       .place {
         align-self: center;
+        grid-row: 2/3;
+        justify-self: center;
         margin-bottom: 0;
       }
     }
@@ -230,9 +232,11 @@
   }
   @media screen and (min-width: $screen-md) {
     display: flex;
-    @media screen and (min-height: 48rem) {
-      overflow: auto;
-    }
+  }
+  @media screen and (min-height: $screen-height-limit),
+    screen and (min-width: $screen-lg) {
+    display: block;
+    overflow: auto;
   }
   @media screen and (min-width: $screen-xl) {
     max-height: var(--max-height);

diff --git a/client/src/ui/_vars.scss b/client/src/ui/_vars.scss
@@ -247,6 +247,8 @@ $screen-lg: 992px;
 $screen-xl: 1200px;
 $screen-xxl: 1441px;
 
+$screen-height-limit: 44rem;
+
 /*
  * z-index scale
  */