2026-10-21 21:40:00 -04:00
2 changed files with 7 additions and 3 deletions
@@ -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' : '',
@@ -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"