frontend/src/components/NoteCard.vue

@@ -54,6 +54,26 @@ const trashUrgent = computed(() => trashDays.value !== null && trashDays.value <
 const firstImage = computed(() => props.note.attachments.find((a) => a.mime.startsWith("image/")));
 const otherAttachments = computed(() => props.note.attachments.filter((a) => !a.mime.startsWith("image/")));
 
+// How much of a note the CARD shows. Android has always clamped to 8
+// (`MAX_PREVIEW_LINES`); the web rendered the whole body, so one long note could
+// produce a card taller than the screen and push everything else off the board.
+//
+// It matters more now that the title is gone (M13 step 4). The first line used to be
+// the thing your eye caught; with one weight throughout, an unbounded card is just a
+// wall, and the note next to it is the one you were looking for.
+//
+// Clamped in the STRING rather than with CSS `line-clamp`, which needs a
+// `-webkit-box` and behaves unreliably around the block elements MarkdownText emits
+// (lists, quotes, fenced code). This is deterministic, matches Android's semantics
+// exactly, and skips parsing a body the card was never going to show.
+const PREVIEW_LINES = 8;
+
+const bodyPreview = computed(() => {
+  const lines = props.note.body.split("\n");
+  if (lines.length <= PREVIEW_LINES) return props.note.body;
+  return lines.slice(0, PREVIEW_LINES).join("\n") + "\n…";
+});
+
 const root = ref<HTMLElement | null>(null);
 
 // --- Drag-to-reorder. Pointer Events, gated behind an explicit grip handle so a
@@ -222,7 +242,7 @@ onBeforeUnmount(() => document.removeEventListener("mousedown", onDocMousedown))
       @keydown.enter="emit('open', note)"
     >
       <div v-if="note.body" class="text-sm text-neutral-700 dark:text-neutral-300">
-        <MarkdownText :text="note.body" />
+        <MarkdownText :text="bodyPreview" />
       </div>
       <p
         v-if="!note.body && !note.items.length && !note.attachments.length"