From 75c249f0710b3495eb7c78bcffd0c3834cf315a9 Mon Sep 17 00:00:00 2001
From: saberzero1 <github@emilebangma.com>
Date: Fri, 16 Aug 2024 17:06:57 +0200
Subject: [PATCH] Sidebar auto scaling

---
 quartz/components/Backlinks.tsx         | 30 +++++++-------
 quartz/components/styles/backlinks.scss | 53 +++++++++++++++++++------
 quartz/components/styles/explorer.scss  | 14 ++++++-
 quartz/styles/base.scss                 |  4 +-
 4 files changed, 72 insertions(+), 29 deletions(-)

diff --git a/quartz/components/Backlinks.tsx b/quartz/components/Backlinks.tsx
index aa412a2e0..041a54131 100644
--- a/quartz/components/Backlinks.tsx
+++ b/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>
   )
 }
diff --git a/quartz/components/styles/backlinks.scss b/quartz/components/styles/backlinks.scss
index 04302f22e..2f4e4425a 100644
--- a/quartz/components/styles/backlinks.scss
+++ b/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;
       }
     }
   }
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index 4d691e7d0..2717a8a5c 100644
--- a/quartz/components/styles/explorer.scss
+++ b/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 {
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 5944dd26a..a3a3213c3 100644
--- a/quartz/styles/base.scss
+++ b/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;