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

@@ -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' : '',

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"