Fix phone layout so name columns scroll sideways

Keep columns side-by-side with horizontal snap-scroll instead of
stacking the second column under the first on small screens.

static/v2.html

@@ -111,24 +111,47 @@
     .who a { color: var(--ink); }
     .boards-row {
       display: flex; gap: 0.75rem; align-items: stretch; margin-bottom: 1rem;
+      min-width: 0;
     }
+    /* Always side-by-side; swipe/scroll sideways on phone instead of stacking. */
     .boards {
-      display: grid; gap: 1rem; flex: 1; min-width: 0;
-      grid-template-columns: 1fr;
+      display: flex; gap: 1rem; flex: 1; min-width: 0;
+      overflow-x: auto;
+      overflow-y: hidden;
+      overscroll-behavior-x: contain;
+      -webkit-overflow-scrolling: touch;
+      scroll-snap-type: x mandatory;
+      padding-bottom: 0.35rem;
+      scrollbar-width: thin;
     }
-    @media (min-width: 700px) {
-      .boards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .boards .sheet {
+      margin-bottom: 0;
+      flex: 0 0 auto;
+      width: min(18.5rem, calc(100vw - 5.25rem));
+      max-width: 22rem;
+      scroll-snap-align: start;
     }
-    @media (min-width: 1100px) {
-      .boards.cols-3, .boards.cols-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
+    @media (min-width: 860px) {
+      .boards.cols-2 .sheet {
+        flex: 1 1 0;
+        width: auto;
+        min-width: 16rem;
+        max-width: none;
+      }
+      .boards.cols-3 .sheet,
+      .boards.cols-4 .sheet {
+        flex: 1 1 0;
+        width: auto;
+        min-width: 14rem;
+        max-width: none;
+      }
     }
-    .boards .sheet { margin-bottom: 0; }
     .add-col {
       flex: 0 0 auto;
       align-self: stretch;
-      min-width: 3rem;
+      min-width: 2.75rem;
       writing-mode: horizontal-tb;
-      background: transparent;
+      background: var(--sheet);
       color: var(--muted);
       border: 1px dashed var(--rule);
       font-size: 1.6rem;