diff --git a/ui/src/components/ConnectionScreen.svelte b/ui/src/components/ConnectionScreen.svelte
index d1ebbe1..01e28e5 100644
--- a/ui/src/components/ConnectionScreen.svelte
+++ b/ui/src/components/ConnectionScreen.svelte
@@ -184,13 +184,33 @@
 </div>
 
 <style>
+  /*
+   * A column, not a fixed grid — the same lesson as `.ride`.
+   *
+   * This was `grid-template-rows: auto auto 1fr` with *four* children: header,
+   * ClickPanel, the trainer gate, and the list. The gate is conditional, so
+   * when it rendered it took the 1fr track and the device list fell into an
+   * implicit `auto` row past the bottom of the screen — with `overflow-y` set
+   * on the list rather than on the thing that was actually overflowing, so
+   * nothing scrolled. On a desktop window everything fit and it never showed.
+   * On a phone it meant the trainer could not be reached at all: the Click
+   * panel alone is taller than the viewport, and the D100's Connect button was
+   * below the fold with no way to get to it.
+   *
+   * Flex has no fixed track count, so a conditional child cannot displace
+   * anything.
+   */
   .screen {
-    display: grid;
-    grid-template-rows: auto auto 1fr;
+    display: flex;
+    flex-direction: column;
     height: 100%;
     min-height: 0;
   }
 
+  .screen > :global(*) {
+    flex: none;
+  }
+
   header {
     display: flex;
     align-items: flex-end;
@@ -235,10 +255,29 @@
   }
 
   .list {
+    flex: 1 1 auto;
+    min-height: 0;
     overflow-y: auto;
     padding: 0.4rem var(--edge) 2rem;
   }
 
+  /*
+   * On a phone the whole screen scrolls as one document instead of pinning a
+   * header over a scrolling list. Giving the list its own scroll region there
+   * would leave it a few pixels tall — the Click panel is taller than the
+   * viewport on its own — so the list would technically scroll and still be
+   * unusable.
+   */
+  :global([data-size='compact']) .screen {
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :global([data-size='compact']) .list {
+    flex: none;
+    overflow-y: visible;
+  }
+
   .row {
     display: grid;
     grid-template-columns: minmax(0, 1.5fr) auto minmax(0, 1.4fr) auto;