make flex more consistent, remove transition

quartz.layout.ts

@@ -26,9 +26,8 @@ export const defaultContentPageLayout: PageLayout = {
     Component.PageTitle(),
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
-
-    Component.Explorer(),
     Component.Darkmode(),
+    Component.Explorer(),
   ],
   right: [
     Component.Graph(),

quartz/components/styles/darkmode.scss

@@ -8,6 +8,7 @@
   height: 20px;
   margin: 0 10px;
   text-align: inherit;
+  flex-shrink: 0;
 
   & svg {
     position: absolute;

quartz/components/styles/explorer.scss

@@ -30,6 +30,10 @@
   display: flex;
   flex-direction: column;
   overflow-y: hidden;
+  flex: 0 1 auto;
+  &.collapsed {
+    flex: 0 1 1.2em;
+  }
 
   @media all and ($mobile) {
     order: -1;
@@ -63,8 +67,18 @@
     }
   }
 
-  button#mobile-explorer,
+  svg {
-  button#desktop-explorer {
+    pointer-events: all;
+    transition: transform 0.35s ease;
+
+    & > polyline {
+      pointer-events: none;
+    }
+  }
+}
+
+button#mobile-explorer,
+button#desktop-explorer {
   background-color: transparent;
   border: none;
   text-align: left;
@@ -89,15 +103,6 @@
   .explorer.collapsed > & .fold {
     transform: rotateZ(-90deg);
   }
-  }
-
-  svg {
-    pointer-events: all;
-
-    & > polyline {
-      pointer-events: none;
-    }
-  }
 }
 
 #explorer-content {
@@ -106,17 +111,10 @@
   overflow-y: auto;
   margin-top: 0.5rem;
 
-  .explorer.collapsed > & > ul.overflow {
-    max-height: 0px;
-  }
-
   & ul {
     list-style: none;
     margin: 0.08rem 0;
     padding: 0;
-    transition:
-      max-height 0.35s ease,
-      transform 0.35s ease;
 
     & li > a {
       color: var(--dark);

quartz/components/styles/toc.scss

@@ -4,8 +4,10 @@
   display: flex;
   flex-direction: column;
 
-  &.desktop-only {
+  overflow-y: hidden;
-    max-height: 40%;
+  flex: 0 1 auto;
+  &:has(button#toc.collapsed) {
+    flex: 0 1 1.2rem;
   }
 }
 
@@ -44,22 +46,7 @@ button#toc {
 
 #toc-content {
   list-style: none;
-  overflow: hidden;
-  overflow-y: auto;
-  max-height: 100%;
-  transition:
-    max-height 0.35s ease,
-    visibility 0s linear 0s;
   position: relative;
-  visibility: visible;
-
-  &.collapsed {
-    max-height: 0;
-    transition:
-      max-height 0.35s ease,
-      visibility 0s linear 0.35s;
-    visibility: hidden;
-  }
 
   & ul {
     list-style: none;

quartz/styles/base.scss

@@ -543,7 +543,6 @@ video {
 
 div:has(> .overflow) {
   display: flex;
-  overflow-y: auto;
   max-height: 100%;
 }