v good

src/style/_app-shell.scss

@@ -73,6 +73,10 @@ html > body {
       pointer-events: none;
       user-select: none;
       white-space: pre;
+
+      &[hidden] {
+        display: none;
+      }
     }
 
     > .errors-container {

src/style/_control-dock.scss

@@ -1,17 +1,19 @@
 html > body > aside.control-dock {
+  --dock-hidden-translate-y: calc(100% + env(safe-area-inset-bottom, 0px) + 16px);
+
   position: absolute;
-  left: 50%;
-  bottom: env(safe-area-inset-bottom);
+  left: 0;
+  right: 0;
+  bottom: env(safe-area-inset-bottom, 0px);
   z-index: 4;
   width: min(calc(100vw - 1rem), 980px);
-  transform: translate(-50%, 0);
-  translate: 0 0;
+  margin: 0 auto;
+  transform: translateY(0);
   visibility: visible;
   pointer-events: none;
   transition:
     opacity var(--transition-time-long),
     transform var(--transition-time-long),
-    translate var(--transition-time-long),
     visibility 0s;
 
   > .toolbar-row,
@@ -22,7 +24,7 @@ html > body > aside.control-dock {
   &.menu-hidden {
     opacity: 0;
     visibility: hidden;
-    transform: translate(-50%, 10px);
+    transform: translateY(var(--dock-hidden-translate-y));
     pointer-events: none;
     transition:
       opacity var(--transition-time-long),
@@ -34,32 +36,4 @@ html > body > aside.control-dock {
       pointer-events: none;
     }
   }
-
-  &.menu-hidden.has-persistent-settings {
-    opacity: 1;
-    visibility: visible;
-    transform: translate(-50%, 0);
-
-    > .pages,
-    > .toolbar-row > .vibe-button,
-    > .toolbar-row > .toolbar-shell > .garden-controls,
-    > .toolbar-row > .toolbar-shell > nav.buttons > button:not(.settings),
-    > .toolbar-row > .toolbar-shell > nav.buttons > .export-status {
-      opacity: 0;
-      visibility: hidden;
-      pointer-events: none;
-    }
-
-    > .toolbar-row,
-    > .toolbar-row > .toolbar-shell,
-    > .toolbar-row > .toolbar-shell > nav.buttons {
-      pointer-events: none;
-    }
-
-    > .toolbar-row > .toolbar-shell > nav.buttons > button.settings {
-      visibility: visible;
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
 }

src/style/_loading.scss

@@ -71,11 +71,7 @@
       bottom: 0;
       width: var(--loading-progress);
       border-radius: inherit;
-      background: linear-gradient(
-        90deg,
-        rgb(255 255 255 / 72%),
-        rgb(255 255 255 / 96%)
-      );
+      background: linear-gradient(90deg, rgb(255 255 255 / 72%), rgb(255 255 255 / 96%));
       box-shadow: 0 0 12px rgb(255 255 255 / 38%);
       transition: width var(--transition-time-long) ease-out;
     }
@@ -94,7 +90,7 @@ html > body.is-loading {
   aside.control-dock {
     opacity: 0;
     visibility: hidden;
-    translate: 0 36px;
+    transform: translateY(var(--dock-hidden-translate-y));
   }
 }
 

src/style/_motion.scss

@@ -12,10 +12,7 @@
     }
 
     > aside.control-dock {
-      &,
-      &.menu-hidden {
-        transform: translateX(-50%);
-      }
+      transform: translateY(0);
 
       > .toolbar-row {
         button:hover,
@@ -30,5 +27,9 @@
         }
       }
     }
+
+    &.is-loading aside.control-dock {
+      transform: translateY(0);
+    }
   }
 }