android/app/src/main/java/com/fabledsword/thoughtsync/ui/NoteCard.kt

@@ -58,9 +58,23 @@ fun NoteCard(
                 .border(1.dp, if (dark) CARD_EDGE_DARK else CARD_EDGE_LIGHT, RoundedCornerShape(CARD_RADIUS))
                 .padding(12.dp),
     ) {
-        // Body then checklist, in order — a note can carry both (M13 step 2), and
-        // nothing above them: the first line of the body IS the note's name, at the
-        // same weight as the rest of it (M13 steps 3 and 4).
+        // TAGS FIRST. They used to sit under everything else, which on a tall note put
+        // the one thing that says what a note IS below the fold of a glance. A board is
+        // scanned, not read, and the answer to "which of these is about the thing I am
+        // looking for" should be the first thing the eye lands on rather than the last.
+        //
+        // Above the body rather than beside it, because the body's first line is the
+        // note's NAME (M13 steps 3 and 4) and a chip floated next to it would compete
+        // with the thing that identifies the note. A row of its own costs one line and
+        // only on notes that have tags at all.
+        if (note.labels.isNotEmpty()) {
+            LabelChips(labels = note.labels)
+            Spacer(Modifier.height(8.dp))
+        }
+
+        // Body then checklist, in order — a note can carry both (M13 step 2). The
+        // first line of the body IS the note's name, at the same weight as the rest of
+        // it (M13 steps 3 and 4).
         if (note.body.isNotBlank()) {
             NoteBody(note = note, onToggleItem = onToggleItem)
         }
@@ -76,11 +90,6 @@ fun NoteCard(
             )
         }
 
-        if (note.labels.isNotEmpty()) {
-            Spacer(Modifier.height(8.dp))
-            LabelChips(labels = note.labels)
-        }
-
         note.remindAt?.let { at ->
             Spacer(Modifier.height(8.dp))
             ReminderChip(instant = at, recurrence = note.recurrence)

frontend/src/components/NoteCard.vue

@@ -259,6 +259,24 @@ onBeforeUnmount(() => document.removeEventListener("mousedown", onDocMousedown))
 
          `shadow-sm`, back down from `shadow`: the border is the boundary again, so the
          shadow is only depth. -->
+    <!-- TAGS FIRST. They used to sit under everything else, which on a tall note put
+         the one thing that says what a note IS below the fold of a glance. A board is
+         scanned, not read, and the answer to "which of these is about the thing I am
+         looking for" should be the first thing the eye lands on rather than the last.
+
+         Above the image and the body rather than beside them, because the body's first
+         line is the note's NAME (M13 steps 3 and 4) and a chip floated next to it would
+         compete with the thing that identifies the note. -->
+    <div v-if="note.labels.length" class="mb-2 flex flex-wrap gap-1">
+      <span
+        v-for="lb in note.labels"
+        :key="lb.id"
+        class="rounded-full px-2 py-0.5 text-xs"
+        :class="labelChip(lb)"
+        >{{ lb.via_tag ? "#" + lb.name : lb.name }}</span
+      >
+    </div>
+
     <img
       v-if="firstImage"
       :src="firstImage.url"
@@ -317,16 +335,6 @@ onBeforeUnmount(() => document.removeEventListener("mousedown", onDocMousedown))
          two paragraphs instead of always after them. Rendering both would have shown
          every list twice. -->
 
-    <div v-if="note.labels.length" class="mt-2 flex flex-wrap gap-1">
-      <span
-        v-for="lb in note.labels"
-        :key="lb.id"
-        class="rounded-full px-2 py-0.5 text-xs"
-        :class="labelChip(lb)"
-        >{{ lb.via_tag ? "#" + lb.name : lb.name }}</span
-      >
-    </div>
-
     <div v-if="note.remind_at" class="mt-2 flex flex-wrap items-center gap-1.5">
       <span
         class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs"