Remove container div

quartz/components/Explorer.tsx

@@ -84,7 +84,6 @@ export default ((userOpts?: Partial<Options>) => {
       constructFileTree(allFiles, (fileData.filePath ?? "").replaceAll(" ", "-"))
     }
     return (
-      <div class="explorer-container">
       <div class={classNames(displayClass, "explorer")}>
         <button
           type="button"
@@ -148,7 +147,6 @@ export default ((userOpts?: Partial<Options>) => {
           </ul>
         </div>
       </div>
-      </div>
     )
   }
 

quartz/components/styles/explorer.scss

@@ -1,35 +1,42 @@
 @use "../../styles/variables.scss" as *;
 
-.explorer-container {
+.explorer {
-  overflow-y: hidden;
   @media all and ($mobile) {
     order: -1;
+    height: initial;
+    overflow: hidden;
   }
 
-  .explorer {
   display: flex;
+
   button#mobile-explorer {
     display: none;
   }
+
   button#desktop-explorer {
     display: flex;
   }
+
   @media all and ($mobile) {
     button#mobile-explorer {
       display: flex;
     }
+
     button#desktop-explorer {
       display: none;
     }
   }
+
   height: 100%;
   flex-direction: column;
   overflow-y: hidden;
+
   &.desktop-only {
     @media all and not ($mobile) {
       display: flex;
     }
   }
+
   /*&:after {
   pointer-events: none;
   content: "";
@@ -113,12 +120,14 @@
       max-height 0.35s ease,
       transform 0.35s ease,
       opacity 0.2s ease;
+
     & li > a {
       color: var(--dark);
       opacity: 0.75;
       pointer-events: all;
     }
   }
+
   > #explorer-ul {
     max-height: none;
   }
@@ -212,7 +221,7 @@
       background-color: var(--light);
       max-width: 100dvw;
       left: -100dvw;
-        width: 100dvw;
+      width: 100%;
       transition: all 300ms ease-in-out;
       overflow: hidden;
       padding: 2rem 2rem 4rem;
@@ -222,7 +231,6 @@
       visibility: visible;
 
       &:not(.collapsed) {
-          //height: 100dvh;
         left: 0;
       }
 
@@ -232,7 +240,6 @@
       }
 
       &.collapsed {
-          //height: 0;
         left: -100dvw;
         visibility: visible;
       }
@@ -240,13 +247,16 @@
 
     #mobile-explorer {
       margin: 5px;
+
       &:not(.collapsed) .lucide-menu {
-          transform: rotate(90deg);
+        transform: rotate(-90deg);
         transition: transform 200ms ease-in-out;
       }
+
       .lucide-menu {
         stroke: var(--darkgray);
         transition: transform 200ms ease;
+
         &:hover {
           stroke: var(--dark);
         }
@@ -269,16 +279,17 @@
     opacity: 1 !important;
     overflow: auto !important;
   }
+
   html:has(.no-scroll) {
     overflow: auto !important;
   }
 }
-}
 
 // Lock page scroll on mobile
 .lock-scroll {
   position: static;
 }
+
 @media all and ($mobile) {
   .lock-scroll {
     position: fixed;