diff --git a/web/src/styles.css b/web/src/styles.css
index f9aafe3..40c4ea1 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -2023,6 +2023,51 @@ input.leaf-rename:focus {
   min-height: 0;
 }
 
+/* Mobile: the spawn form is the tallest dialog we have, so it takes the whole
+   screen and lays out as one flex column — header, scrolling body, actions
+   pinned to the bottom edge. Below the fold is where the Submit button used to
+   hide. */
+@media (max-width: 599px) {
+  .modal.spawn-modal {
+    height: 100dvh;
+    max-height: none;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .spawn-modal .spawn-form {
+    flex: 1 1 auto;
+    padding-bottom: 0;
+  }
+
+  /* One scroll box, not four: the pickers' own caps stack scrollable regions
+     inside a screen that is already short. Let them grow and let the form
+     scroll. */
+  .spawn-modal .picker,
+  .spawn-modal .picker.projects,
+  .spawn-modal .picker.wt-choices {
+    max-height: none;
+    overflow-y: visible;
+  }
+
+  /* Rides the bottom of the scroll box: reachable at any scroll position, and
+     `margin-top: auto` keeps it at the screen's foot when the form is short. */
+  .spawn-modal .form-actions {
+    position: sticky;
+    bottom: 0;
+    margin-top: auto;
+    padding: var(--sp-2) 0 calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
+    background: var(--surface);
+    box-shadow: 0 -8px 12px -8px oklch(0 0 0 / 0.5);
+  }
+
+  .spawn-modal .form-actions .btn {
+    flex: 1 1 0;
+    justify-content: center;
+    min-height: 44px;
+  }
+}
+
 /* ---------- forms ---------- */
 
 .spawn-form {