From e03bf6ee945c7a714d1e2899904e167720860eb6 Mon Sep 17 00:00:00 2001
From: Valentin Millet <valentin.millet39@gmail.com>
Date: Tue, 15 Sep 2026 00:04:37 +0200
Subject: [PATCH] Give a card's body the line the badge row was taking
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The language badge owned a row of its own above the title: ~17px plus an
8px margin out of the 122px a card has, spent before a character of body.
Badge, title and marks now share one line.

The title gains the line budget it never had — clamped at two — and the
head reserves a gutter for the selection tick, which floats at left: 8px
and sat on the badge whenever a card was ticked.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../note-card/note-card.component.html        | 54 ++++++++++---------
 .../note-card/note-card.component.scss        | 38 +++++++++++--
 .../note-card/note-card.component.spec.ts     | 23 ++++++--
 .../note-card/note-card.component.ts          |  3 +-
 4 files changed, 84 insertions(+), 34 deletions(-)

diff --git a/src/app/notes/canvas/note-section/note-card/note-card.component.html b/src/app/notes/canvas/note-section/note-card/note-card.component.html
index 2f7903e..948d254 100644
--- a/src/app/notes/canvas/note-section/note-card/note-card.component.html
+++ b/src/app/notes/canvas/note-section/note-card/note-card.component.html
@@ -24,36 +24,40 @@
            information does not exist for a screen reader. -->
       <span class="visually-hidden">{{ 'notes.pinnedState' | transloco }}</span>
     }
-    <span class="card-top">
+    <!-- One line for the badge, the title and the glyphs. It was two, and the first of
+         them was a whole row spent on a badge and three small marks. -->
+    <span class="card-head">
       <!-- No format for a todo list: a "TXT" badge would announce a language nothing
            shows. -->
       @if (!isChecklist()) {
         <app-language-badge [language]="note().language" />
       }
-      @if (hasPlaceholders()) {
-        <span class="card-fields" data-testid="note-card-fields" aria-hidden="true">⚡</span>
-        <span class="visually-hidden">
-          {{ 'notes.placeholdersCount' | transloco: { count: note().placeholders.length } }}
-        </span>
-      }
-      @if (note().attachmentCount > 0) {
-        <span class="card-clip" data-testid="note-card-clip" aria-hidden="true"
-          >📎 {{ note().attachmentCount }}</span
-        >
-        <span class="visually-hidden">
-          {{ 'notes.attachmentsCount' | transloco: { count: note().attachmentCount } }}
-        </span>
-      }
-      @if (note().pinned) {
-        <span class="card-pin" data-testid="note-card-pin" aria-hidden="true">📌</span>
-      }
-    </span>
-    <span class="card-title" data-testid="note-card-title">
-      @if (note().title) {
-        {{ note().title }}
-      } @else {
-        {{ 'notes.untitled' | transloco }}
-      }
+      <span class="card-title" data-testid="note-card-title">
+        @if (note().title) {
+          {{ note().title }}
+        } @else {
+          {{ 'notes.untitled' | transloco }}
+        }
+      </span>
+      <span class="card-marks">
+        @if (hasPlaceholders()) {
+          <span class="card-fields" data-testid="note-card-fields" aria-hidden="true">⚡</span>
+          <span class="visually-hidden">
+            {{ 'notes.placeholdersCount' | transloco: { count: note().placeholders.length } }}
+          </span>
+        }
+        @if (note().attachmentCount > 0) {
+          <span class="card-clip" data-testid="note-card-clip" aria-hidden="true"
+            >📎 {{ note().attachmentCount }}</span
+          >
+          <span class="visually-hidden">
+            {{ 'notes.attachmentsCount' | transloco: { count: note().attachmentCount } }}
+          </span>
+        }
+        @if (note().pinned) {
+          <span class="card-pin" data-testid="note-card-pin" aria-hidden="true">📌</span>
+        }
+      </span>
     </span>
     @if (isChecklist()) {
       <!-- Decorative: the count beside it carries the same information as text. -->
diff --git a/src/app/notes/canvas/note-section/note-card/note-card.component.scss b/src/app/notes/canvas/note-section/note-card/note-card.component.scss
index 2af8bde..839efcc 100644
--- a/src/app/notes/canvas/note-section/note-card/note-card.component.scss
+++ b/src/app/notes/canvas/note-section/note-card/note-card.component.scss
@@ -50,27 +50,55 @@ app-copy-button:focus-within {
 
 // The children are <span>s — the parent <button> allows nothing else — so they need
 // their block behaviour handed back explicitly.
-.card-top {
+//
+// One line carrying the badge, the title and the marks. The badge used to own a row of
+// its own: ~17px plus an 8px margin out of the 122px a card has, spent before a character
+// of body. `baseline` and not `center` so the badge and the glyphs sit on the title's
+// first line whether it takes one line or two.
+.card-head {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   gap: 7px;
   margin-bottom: 8px;
   // Reserves room for the copy and ⋯ buttons floating over the top-right corner.
   padding-right: 50px;
+  // ⚠️ And for the selection tick on the left, which floats at `left: 8px` while the card's
+  // own padding starts at 14px. It therefore lands on whatever begins this line — and it is
+  // not a hover-only concern: `checked` keeps it on with no pointer at all, which is the
+  // state a multiple selection leaves every card in. Unreserved, it sat squarely on the
+  // language badge, and on a todo list, which has no badge, it would sit on the title.
+  // A permanent gutter rather than one that appears with the tick: the second would shift
+  // the title sideways under the pointer.
+  padding-left: 14px;
 }
 
 .card-pin {
-  margin-left: auto;
   font-size: 11px;
 }
 
 .card-title {
-  display: block;
+  flex: 1;
+  // Without it a flex item refuses to shrink below its content, and a long unbroken
+  // title would push the marks out past the card.
+  min-width: 0;
   font-size: 13px;
   font-weight: 600;
   color: var(--text-0);
-  margin-bottom: 8px;
   line-height: 1.3;
+  // ⚠️ A budget, not a nicety. The title had none: a long one took three lines and ate
+  // the body, so two cards side by side showed different amounts of it for no reason the
+  // user had chosen.
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.card-marks {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  flex-shrink: 0;
 }
 
 // `app-code-viewer` brings the colouring only; the typography stays decided here.
diff --git a/src/app/notes/canvas/note-section/note-card/note-card.component.spec.ts b/src/app/notes/canvas/note-section/note-card/note-card.component.spec.ts
index 1b36ac6..1d75bc4 100644
--- a/src/app/notes/canvas/note-section/note-card/note-card.component.spec.ts
+++ b/src/app/notes/canvas/note-section/note-card/note-card.component.spec.ts
@@ -57,6 +57,23 @@ describe('NoteCardComponent', () => {
     expect(badge.language()).toBe('json');
   });
 
+  /**
+   * The badge used to own a row of its own above the title — ~17px plus an 8px margin out
+   * of the 122px a card has, spent before a character of body. Structural rather than
+   * visual on purpose: jsdom lays nothing out, so what is asserted is that the three share
+   * one parent, which is what makes them one line.
+   */
+  it('puts the badge, the title and the marks on a single line', async () => {
+    fixture.componentRef.setInput('note', createNote({ title: 'My note', pinned: true, attachmentCount: 2 }));
+    await fixture.whenStable();
+
+    const head = fixture.nativeElement.querySelector('.card-head');
+    expect(head.querySelector('app-language-badge')).not.toBeNull();
+    expect(head.querySelector('[data-testid="note-card-title"]')).not.toBeNull();
+    expect(head.querySelector('[data-testid="note-card-clip"]')).not.toBeNull();
+    expect(head.querySelector('[data-testid="note-card-pin"]')).not.toBeNull();
+  });
+
   it('falls back to a translated placeholder for an untitled note', async () => {
     fixture.componentRef.setInput('note', createNote({ title: '' }));
     await fixture.whenStable();
@@ -64,12 +81,12 @@ describe('NoteCardComponent', () => {
     expect(text('.card-title')).toBe('Sans titre');
   });
 
-  it('shows only the first 3 lines of content as a snippet', async () => {
-    fixture.componentRef.setInput('note', createNote({ content: 'one\ntwo\nthree\nfour' }));
+  it('shows only the first 4 lines of content as a snippet', async () => {
+    fixture.componentRef.setInput('note', createNote({ content: 'one\ntwo\nthree\nfour\nfive' }));
     await fixture.whenStable();
 
     const lines = fixture.debugElement.queryAll(By.css('.card-snippet .line-content'));
-    expect(lines.map((line) => line.nativeElement.textContent)).toEqual(['one', 'two', 'three']);
+    expect(lines.map((line) => line.nativeElement.textContent)).toEqual(['one', 'two', 'three', 'four']);
   });
 
   it('colours the snippet according to the note language', async () => {
diff --git a/src/app/notes/canvas/note-section/note-card/note-card.component.ts b/src/app/notes/canvas/note-section/note-card/note-card.component.ts
index f13c1f6..3697c6e 100644
--- a/src/app/notes/canvas/note-section/note-card/note-card.component.ts
+++ b/src/app/notes/canvas/note-section/note-card/note-card.component.ts
@@ -34,7 +34,8 @@ export interface NoteActivation {
   readonly extendRange: boolean;
 }
 
-const SNIPPET_LINES = 3;
+/** What fits under a head that no longer spends a row on the language badge. */
+const SNIPPET_LINES = 4;
 const MAX_VISIBLE_TAGS = 2;
 /** What fits between the progress bar and the footer on a 150 px card. */
 const MAX_VISIBLE_ITEMS = 2;