make mobile look nice

quartz/components/styles/explorer.scss

@@ -32,7 +32,7 @@
   overflow-y: hidden;
   flex: 0 1 auto;
   &.collapsed {
-    flex: 0 1 1.2em;
+    flex: 0 1 1.2rem;
   }
 
   @media all and ($mobile) {
@@ -100,7 +100,7 @@ button#desktop-explorer {
     opacity: 0.8;
   }
 
-  .explorer.collapsed > & .fold {
+  .explorer.collapsed .fold {
     transform: rotateZ(-90deg);
   }
 }
@@ -207,51 +207,51 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
 
 .explorer {
   @media all and ($mobile) {
-    #explorer-content {
-      box-sizing: border-box;
-      overscroll-behavior: none;
-      z-index: 100;
-      position: absolute;
-      top: 0;
-      background-color: var(--light);
-      max-width: 100dvw;
-      left: -100dvw;
-      width: 100%;
-      transition: transform 300ms ease-in-out;
-      overflow: hidden;
-      padding: $topSpacing 2rem 2rem;
-      height: 100dvh;
-      max-height: 100dvh;
-      margin-top: 0;
-      visibility: hidden;
+    &.collapsed {
+      flex: 0 0 34px;
 
-      &:not(.collapsed) {
-        transform: translateX(100dvw);
-        visibility: visible;
+      & > #explorer-content {
+        transform: translateX(-100vw);
+        visibility: hidden;
       }
+    }
 
-      &.collapsed {
+    &:not(.collapsed) {
+      flex: 0 0 34px;
+
+      & > #explorer-content {
         transform: translateX(0);
         visibility: visible;
       }
     }
 
-    #mobile-explorer {
-      margin: 5px;
-      z-index: 101;
+    #explorer-content {
+      box-sizing: border-box;
+      z-index: 100;
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-color: var(--light);
+      max-width: 100vw;
+      width: 100%;
+      transform: translateX(-100vw);
+      transition:
+        transform 200ms ease,
+        visibility 200ms ease;
+      overflow: hidden;
+      padding: $topSpacing 0 2rem 0;
+      height: 100dvh;
+      max-height: 100dvh;
+      visibility: hidden;
+    }
 
-      &:not(.collapsed) .lucide-menu {
-        transform: rotate(-90deg);
-        transition: transform 200ms ease-in-out;
-      }
+    #mobile-explorer {
+      margin: 0;
+      padding: 5px;
+      z-index: 101;
 
       .lucide-menu {
         stroke: var(--darkgray);
-        transition: transform 200ms ease;
-
-        &:hover {
-          stroke: var(--dark);
-        }
       }
     }
   }