From 8cdb36dc2acf47ef71958ad31efff57b27e32869 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 8 Oct 2026 08:32:16 -0400
Subject: [PATCH] web: two board columns on a phone, as the Android app has

The board was one column below 640px, so on a phone it read as a list
while the app showed two. It is now two columns from the smallest width,
with an 8px gap there (16px from sm up). Two columns at 16px on a 390px
screen would leave ~170px cards. NoteCard's bottom margin, the vertical
half of the gap, tightens with it.

NoteGrid is the only place the board's columns are defined, so board,
search, timeline and reminders all change together.

Fill order is untouched. CSS columns fill top to bottom, so note #2 sits
under #1 rather than beside it, unlike Android. That is left until it has
been looked at on a phone, as #2950 recommends.

Scribe #2950.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/components/NoteCard.vue | 2 +-
 frontend/src/components/NoteGrid.vue | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/NoteCard.vue b/frontend/src/components/NoteCard.vue
index 8a44ab9..630e85c 100644
--- a/frontend/src/components/NoteCard.vue
+++ b/frontend/src/components/NoteCard.vue
@@ -217,7 +217,7 @@ const tagColors = computed<Record<string, string>>(() => {
 <template>
   <div
     ref="root"
-    class="group relative mb-4 break-inside-avoid rounded-xl border border-[#b8b8b8] p-3 shadow-sm transition hover:shadow-md dark:border-[#404040]"
+    class="group relative mb-2 break-inside-avoid sm:mb-4 rounded-xl border border-[#b8b8b8] p-3 shadow-sm transition hover:shadow-md dark:border-[#404040]"
     :class="[
       NOTE_CARD_SURFACE,
       dragging ? 'opacity-40' : '',
diff --git a/frontend/src/components/NoteGrid.vue b/frontend/src/components/NoteGrid.vue
index 25c71d5..a40301a 100644
--- a/frontend/src/components/NoteGrid.vue
+++ b/frontend/src/components/NoteGrid.vue
@@ -35,12 +35,16 @@ defineEmits<{
 
 <template>
   <!-- `board` is the transition name defined in style.css; `appear` covers first
-       paint so a lens arrives eased rather than snapping in. -->
+       paint so a lens arrives eased rather than snapping in.
+       Two columns even on a phone, as the Android board has (Scribe #2950): one
+       column made a phone's board a list. The gap tightens to match there, since
+       two columns at 16px on a 390px screen leave ~170px cards. NoteCard's
+       bottom margin is the vertical half of this gap and moves with it. -->
   <TransitionGroup
     tag="div"
     name="board"
     appear
-    class="columns-1 gap-4 sm:columns-2 lg:columns-3 xl:columns-4"
+    class="columns-2 gap-2 sm:gap-4 lg:columns-3 xl:columns-4"
   >
     <NoteCard
       v-for="n in notes"