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: "";
@@ -41,11 +48,11 @@
   opacity: 1;
   transition: opacity 0.3s ease;
   background: linear-gradient(transparent 0px, var(--light));
-  }*/
+}*/
-  }
+}
 
-  button#mobile-explorer,
+button#mobile-explorer,
-  button#desktop-explorer {
+button#desktop-explorer {
   background-color: transparent;
   border: none;
   text-align: left;
@@ -70,23 +77,23 @@
   &.collapsed .fold {
     transform: rotateZ(-90deg);
   }
-  }
+}
 
-  .folder-outer {
+.folder-outer {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 0.3s ease-in-out;
-  }
+}
 
-  .folder-outer.open {
+.folder-outer.open {
   grid-template-rows: 1fr;
-  }
+}
 
-  .folder-outer > ul {
+.folder-outer > ul {
   overflow: hidden;
-  }
+}
 
-  #explorer-content {
+#explorer-content {
   list-style: none;
   overflow: hidden;
   overflow-y: auto;
@@ -113,26 +120,28 @@
       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;
   }
-  }
+}
 
-  svg {
+svg {
   pointer-events: all;
 
   & > polyline {
     pointer-events: none;
   }
-  }
+}
 
-  .folder-container {
+.folder-container {
   flex-direction: row;
   display: flex;
   align-items: center;
@@ -173,36 +182,36 @@
       pointer-events: none;
     }
   }
-  }
+}
 
-  .folder-icon {
+.folder-icon {
   margin-right: 5px;
   color: var(--secondary);
   cursor: pointer;
   transition: transform 0.3s ease;
   backface-visibility: visible;
-  }
+}
 
-  li:has(> .folder-outer:not(.open)) > .folder-container > svg {
+li:has(> .folder-outer:not(.open)) > .folder-container > svg {
   transform: rotate(-90deg);
-  }
+}
 
-  .folder-icon:hover {
+.folder-icon:hover {
   color: var(--tertiary);
-  }
+}
 
-  .no-background::after {
+.no-background::after {
   background: none !important;
-  }
+}
 
-  #explorer-end {
+#explorer-end {
   // needs height so IntersectionObserver gets triggered
   height: 4px;
   // remove default margin from li
   margin: 0;
-  }
+}
 
-  .explorer {
+.explorer {
   @media all and ($mobile) {
     #explorer-content {
       box-sizing: border-box;
@@ -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,45 +247,49 @@
 
     #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);
         }
       }
     }
   }
-  }
+}
 
-  .no-scroll {
+.no-scroll {
   opacity: 0;
   overflow: hidden;
-  }
+}
 
-  html:has(.no-scroll) {
+html:has(.no-scroll) {
   overflow: hidden;
-  }
+}
 
-  @media all and not ($mobile) {
+@media all and not ($mobile) {
   .no-scroll {
     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;