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"