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,36 +67,9 @@
     }
   }
 
-  button#mobile-explorer,
-  button#desktop-explorer {
-    background-color: transparent;
-    border: none;
-    text-align: left;
-    cursor: pointer;
-    padding: 0;
-    color: var(--dark);
-    display: flex;
-    align-items: center;
-
-    & h2 {
-      font-size: 1rem;
-      display: inline-block;
-      margin: 0;
-    }
-
-    & .fold {
-      margin-left: 0.5rem;
-      transition: transform 0.3s ease;
-      opacity: 0.8;
-    }
-
-    .explorer.collapsed > & .fold {
-      transform: rotateZ(-90deg);
-    }
-  }
-
   svg {
     pointer-events: all;
+    transition: transform 0.35s ease;
 
     & > polyline {
       pointer-events: none;
@@ -100,23 +77,44 @@
   }
 }
 
+button#mobile-explorer,
+button#desktop-explorer {
+  background-color: transparent;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  padding: 0;
+  color: var(--dark);
+  display: flex;
+  align-items: center;
+
+  & h2 {
+    font-size: 1rem;
+    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 {
   list-style: none;
   overflow: hidden;
   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%;
 }