Sidebar auto scaling

quartz/components/Backlinks.tsx

@@ -14,20 +14,22 @@ const Backlinks: QuartzComponent = ({
   const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug))
   return (
     <div class={classNames(displayClass, "backlinks")}>
-      <h3>{i18n(cfg.locale).components.backlinks.title}</h3>
-      <ul class="overflow">
-        {backlinkFiles.length > 0 ? (
-          backlinkFiles.map((f) => (
-            <li>
-              <a href={resolveRelative(fileData.slug!, f.slug!)} class="internal">
-                {f.frontmatter?.title}
-              </a>
-            </li>
-          ))
-        ) : (
-          <li>{i18n(cfg.locale).components.backlinks.noBacklinksFound}</li>
-        )}
-      </ul>
+      <div class="backlinks-container">
+        <h3>{i18n(cfg.locale).components.backlinks.title}</h3>
+        <ul class="overflow">
+          {backlinkFiles.length > 0 ? (
+            backlinkFiles.map((f) => (
+              <li>
+                <a href={resolveRelative(fileData.slug!, f.slug!)} class="internal">
+                  {f.frontmatter?.title}
+                </a>
+              </li>
+            ))
+          ) : (
+            <li>{i18n(cfg.locale).components.backlinks.noBacklinksFound}</li>
+          )}
+        </ul>
+      </div>
     </div>
   )
 }

quartz/components/styles/backlinks.scss

@@ -1,19 +1,48 @@
-.backlinks {
-  position: relative;
+@use "../../styles/variables.scss" as *;
 
-  & > h3 {
-    font-size: 1rem;
-    margin: 0;
+.backlinks {
+  @media all and not ($desktop) {
+    overflow-y: auto;
+    display: initial;
+    &:after {
+      pointer-events: none;
+      content: "";
+      width: 100%;
+      height: 50px;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      opacity: 1;
+      transition: opacity 0.3s ease;
+      background: linear-gradient(transparent 0px, var(--light));
+    }
   }
 
-  & > ul {
-    list-style: none;
-    padding: 0;
-    margin: 0.5rem 0;
+  & > .backlinks-container {
+    & > h3 {
+      font-size: 1rem;
+      margin: 0;
+    }
 
-    & > li {
-      & > a {
-        background-color: transparent;
+    & > ul {
+      list-style: none;
+      padding: 0;
+      margin: 0.5rem 0;
+
+      & > li {
+        & > a {
+          background-color: transparent;
+        }
+      }
+    }
+
+    & > .overflow {
+      max-height: unset;
+      & > li:last-of-type {
+        margin-bottom: 0;
+      }
+      &:after {
+        display: none;
       }
     }
   }

quartz/components/styles/explorer.scss

@@ -5,6 +5,18 @@
   &.tablet-only {
     overflow-y: auto;
   }
+  &:after {
+    pointer-events: none;
+    content: "";
+    width: 100%;
+    height: 50px;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    opacity: 1;
+    transition: opacity 0.3s ease;
+    background: linear-gradient(transparent 0px, var(--light));
+  }
 }
 
 button#explorer {
@@ -66,7 +78,7 @@ button#explorer {
   }
 
   &.collapsed > .overflow::after {
-    opacity: 0;
+    display: none;
   }
 
   & ul {

quartz/styles/base.scss

@@ -181,11 +181,11 @@ a {
       box-sizing: border-box;
       padding: 0 4rem;
       position: fixed;
+      max-height: calc(100vh - $topSpacing - 4rem);
     }
 
     & .sidebar.left {
       left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
-      max-height: calc(100vh - $topSpacing);
       @media all and ($desktop) {
         left: 0;
       }
@@ -203,7 +203,6 @@ a {
 
     & .sidebar.right {
       right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
-      flex-wrap: wrap;
       margin-left: $sidePanelWidth;
       margin-right: 0;
       @media all and ($mobile) {
@@ -211,6 +210,7 @@ a {
         margin-right: inherit;
       }
       @media all and ($desktop) {
+        max-height: unset;
         position: initial;
         flex-direction: row;
         padding: 0;