Let the connection screen scroll, so the trainer can be reached

On the phone the D100 was found, listed, and completely unreachable: it
sat below the fold and nothing scrolled.

.screen declared grid-template-rows: auto auto 1fr but has four children
— header, ClickPanel, the trainer gate, the list. The gate is
conditional, so whenever it rendered it took the 1fr track and the list
fell into an implicit auto row past the bottom of the screen. overflow-y
was on the list, which was not the box overflowing, so there was nothing
to scroll. On a desktop window everything fit and the bug never showed;
on a 412px viewport the Click panel alone is taller than the screen.

Flex has no fixed track count, so a conditional child cannot displace
anything — the same reason .ride is a column and not a grid.

On compact the whole screen scrolls as one document rather than pinning a
header above a scrolling list. Giving the list its own scroll region
there would leave it a few pixels tall: technically scrollable, still
unusable.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

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;
+    display: flex;
-    grid-template-rows: auto auto 1fr;
+    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;