diff --git a/frontend/src/components/NoteCard.vue b/frontend/src/components/NoteCard.vue index 97be5fb..04783c9 100644 --- a/frontend/src/components/NoteCard.vue +++ b/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(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)" >
- +