more style fixes

quartz/components/styles/explorer.scss

@@ -16,10 +16,10 @@
       box-sizing: border-box;
       position: sticky;
       background-color: var(--light);
+      padding: 1rem 0 1rem 0;
+      margin: 0;
     }
 
-    // Hide Explorer on mobile until done loading.
-    // Prevents ugly animation on page load.
     .hide-until-loaded ~ #explorer-content {
       display: none;
     }
@@ -33,6 +33,15 @@
   flex: 0 1 auto;
   &.collapsed {
     flex: 0 1 1.2rem;
+    & .fold {
+      transform: rotateZ(-90deg);
+    }
+  }
+
+  & .fold {
+    margin-left: 0.5rem;
+    transition: transform 0.3s ease;
+    opacity: 0.8;
   }
 
   @media all and ($mobile) {
@@ -93,16 +102,6 @@ button#desktop-explorer {
     display: inline-block;
     margin: 0;
   }
-
-  & .fold {
-    margin-left: 0.5rem;
-    transition: transform 0.3s ease;
-    opacity: 0.8;
-  }
-
-  .explorer.collapsed .fold {
-    transform: rotateZ(-90deg);
-  }
 }
 
 #explorer-content {
@@ -113,7 +112,7 @@ button#desktop-explorer {
 
   & ul {
     list-style: none;
-    margin: 0.08rem 0;
+    margin: 0;
     padding: 0;
 
     & li > a {
@@ -231,6 +230,7 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
       position: absolute;
       top: 0;
       left: 0;
+      margin-top: 0;
       background-color: var(--light);
       max-width: 100vw;
       width: 100%;
@@ -239,7 +239,7 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
         transform 200ms ease,
         visibility 200ms ease;
       overflow: hidden;
-      padding: $topSpacing 0 2rem 0;
+      padding: 4rem 0 2rem 0;
       height: 100dvh;
       max-height: 100dvh;
       visibility: hidden;