From 836f2a87ad1162aaf14d845b1ab34025e6a21bce Mon Sep 17 00:00:00 2001
From: saberzero1 <github@emilebangma.com>
Date: Tue, 1 Oct 2024 23:46:40 +0200
Subject: [PATCH] Fix folder/tag page

---
 quartz.layout.ts                             | 2 +-
 quartz/components/scripts/explorer.inline.ts | 2 +-
 quartz/components/styles/explorer.scss       | 3 +++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/quartz.layout.ts b/quartz.layout.ts
index ab4c0c84c..f45da0c92 100644
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -44,7 +44,7 @@ export const defaultListPageLayout: PageLayout = {
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Darkmode(),
-    Component.DesktopOnly(Component.Explorer()),
+    Component.Explorer(),
   ],
   right: [],
 }
diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts
index 49b9fdf08..139549dab 100644
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/quartz/components/scripts/explorer.inline.ts
@@ -62,7 +62,7 @@ function toggleExplorer(this: HTMLElement) {
   if (!content) return
   content.classList.toggle("collapsed")
   //content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
-  content.style.maxHeight = content.style.maxHeight === "0px" ? "100vh" : "0px"
+  content.style.maxHeight = content.style.maxHeight === "0px" ? "100dvh" : "0px"
 
   //prevent scroll under
   if (document.querySelector("#mobile-explorer")) {
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index 9f508fd22..421ddb4bc 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -9,6 +9,7 @@
     display: flex;
   }
   @media all and ($mobile) {
+    order: -1;
     .mobile-explorer {
       display: flex;
     }
@@ -236,6 +237,7 @@
     }
 
     #mobile-explorer {
+      margin: 5px;
       &:not(.collapsed) .lucide-menu {
         transform: rotate(90deg);
         transition: transform 200ms ease-in-out;
@@ -277,5 +279,6 @@
 @media all and ($mobile) {
   .lock-scroll {
     position: fixed;
+    width: calc(100% - 2rem);
   }
 }