Draw every row of a todo list inside the card that holds it

e2e/pageobjects/canvas.page.ts

@@ -137,6 +137,33 @@ export const canvas = {
     );
   },
 
+  /**
+   * How far each todo row is drawn **outside** the box that holds it, in pixels. ⚠️ Counting
+   * the rows in the DOM is not the same question: `.card-items` is `overflow: hidden` and
+   * anchored to the bottom, so a row that no longer fits is still there and simply gets cut
+   * off the top.
+   */
+  rowOverflow(title: string): Promise<number[] | null> {
+    return browser.execute(
+      (cardSelector: string, titleSelector: string, rowSelector: string, wanted: string) => {
+        const shell = [...document.querySelectorAll(cardSelector)].find(
+          (each) => (each.querySelector(titleSelector)?.textContent ?? '').trim() === wanted,
+        );
+        const list = shell?.querySelector('.card-items')?.getBoundingClientRect();
+        if (!list) return null;
+
+        return [...(shell?.querySelectorAll(rowSelector) ?? [])].map((row) => {
+          const box = row.getBoundingClientRect();
+          return Math.max(0, Math.round(list.top - box.top), Math.round(box.bottom - list.bottom));
+        });
+      },
+      testid('note-card'),
+      testid('note-card-title'),
+      testid('note-card-item'),
+      title,
+    );
+  },
+
   async waitForCard(title: string): Promise<void> {
     await browser.waitUntil(async () => (await canvas.titles()).includes(title), {
       timeout: 15_000,

e2e/specs/07-checklists.e2e.ts

@@ -145,6 +145,21 @@ describe('Todo lists', () => {
     expect(smallest.filter(([, side]) => side < 24)).toEqual([]);
   });
 
+  /**
+   * ⚠️ The assertion #176 needed and did not have. Growing a row to 24px pushed the list past
+   * the 53px it gets inside a 150px card, and `.card-items` is anchored to the bottom — so
+   * the first row was drawn nine pixels above its own box and cut in half. Counting the rows
+   * and checking the badge both passed the whole time.
+   */
+  it('draws every row it shows inside the box that holds them', async () => {
+    await canvas.waitForCard(title);
+    const overflow = await canvas.rowOverflow(title);
+
+    expect(overflow).not.toBeNull();
+    expect(overflow?.length).toBeGreaterThan(0);
+    expect(overflow).toEqual(overflow?.map(() => 0));
+  });
+
   it('still shows the items it counts, rather than clipping one', async () => {
     const card = await canvas.cardWithTitle(title);
     const shown = (await card.$$(testid('note-card-item')).getElements()).length;
@@ -153,7 +168,7 @@ describe('Todo lists', () => {
     // Two on a card, and the badge accounts for exactly the rest.
     expect(shown).toBe(Math.min(2, total));
     if (total > shown) {
-      expect(await card.$('.card-items-more').getText()).toContain(String(total - shown));
+      expect(await card.$(testid('note-card-more')).getText()).toContain(String(total - shown));
     }
   });
 

src/app/notes/canvas/note-card/note-card.component.html

@@ -70,6 +70,13 @@
         <span class="progress-count" data-testid="note-card-progress">
           {{ 'notes.checklistProgress' | transloco: { done: progress().done, total: progress().total } }}
         </span>
+        <!-- ⚠️ Here and not under the rows: inside the list it cost them 14px of a box that
+             is only 53 tall, and the first row was drawn outside it. -->
+        @if (hiddenItemCount() > 0) {
+          <span class="progress-more" data-testid="note-card-more">
+            {{ 'notes.checklistMore' | transloco: { count: hiddenItemCount() } }}
+          </span>
+        }
       </span>
 
       <!-- In the flow now that the card is not a button: the items used to be a layer of
@@ -92,11 +99,6 @@
             </button>
           </li>
         }
-        @if (hiddenItemCount() > 0) {
-          <li class="card-items-more">
-            {{ 'notes.checklistMore' | transloco: { count: hiddenItemCount() } }}
-          </li>
-        }
       </ul>
     } @else if (snippetIsCode()) {
       <app-code-viewer

src/app/notes/canvas/note-card/note-card.component.scss

@@ -310,8 +310,9 @@ app-copy-button {
   border-radius: 4px;
 }
 
-.card-items-more {
-  padding-top: 2px;
-  font-size: 10px;
+.progress-more {
+  flex-shrink: 0;
+  font-size: 9.5px;
   color: var(--text-2);
+  white-space: nowrap;
 }

src/app/notes/canvas/note-card/note-card.component.spec.ts

@@ -538,7 +538,7 @@ describe('NoteCardComponent', () => {
       await fixture.whenStable();
 
       expect(fixture.nativeElement.querySelectorAll('.card-item')).toHaveLength(2);
-      expect(text('.card-items-more')).toBe('+3 autres');
+      expect(text('[data-testid="note-card-more"]')).toBe('+3 autres');
     });
 
     it('shows no language badge, a checklist having no format to announce', () => {