From 1d0b389c1ed233627634b4875c8ca56db32e0d93 Mon Sep 17 00:00:00 2001
From: Git Agent <git@readabook.local>
Date: Fri, 28 Aug 2026 22:40:59 +0200
Subject: [PATCH] =?UTF-8?q?feat(web):=20accueil=20=E2=80=94=20rendre=20scr?=
 =?UTF-8?q?ollable=20la=20liste=20des=20livres=20en=20cours=20apr=C3=A8s?=
 =?UTF-8?q?=206=20=C3=A9l=C3=A9ments=20visibles=20(hauteur=20de=20.continu?=
 =?UTF-8?q?e-grid=20born=C3=A9e=20=C3=A0=206=20tuiles=20de=20118px,=20over?=
 =?UTF-8?q?flow-y=20auto,=20scrollbar-gutter=20stable,=20tuiles=20=C3=A0?=
 =?UTF-8?q?=20block-size=20fixe=20=E2=80=94=20=C3=A9volution=20#44)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/HomePageProgressScroll.test.ts   | 18 ++++++++++++++++++
 apps/web/src/styles/app.css                    | 11 +++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 apps/web/src/pages/HomePageProgressScroll.test.ts

diff --git a/apps/web/src/pages/HomePageProgressScroll.test.ts b/apps/web/src/pages/HomePageProgressScroll.test.ts
new file mode 100644
index 0000000..c553ee7
--- /dev/null
+++ b/apps/web/src/pages/HomePageProgressScroll.test.ts
@@ -0,0 +1,18 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+describe("home progress list layout", () => {
+  it("keeps the continue reading list scrollable after six visible books", () => {
+    const styles = readFileSync(new URL("../styles/app.css", import.meta.url), "utf8");
+    const continueGrid = styles.match(/\.continue-grid\s*\{[^}]+\}/)?.[0] ?? "";
+    const continueTile = styles.match(/\.continue-tile\s*\{[^}]+\}/)?.[0] ?? "";
+
+    expect(continueGrid).toContain("--continue-visible-rows: 6");
+    expect(continueGrid).toContain("--continue-tile-block-size: 118px");
+    expect(continueGrid).toContain("max-height: calc((var(--continue-tile-block-size) * var(--continue-visible-rows)) + (10px * (var(--continue-visible-rows) - 1)))");
+    expect(continueGrid).toContain("overflow-y: auto");
+    expect(continueGrid).toContain("scrollbar-gutter: stable");
+    expect(continueTile).toContain("block-size: var(--continue-tile-block-size)");
+    expect(continueTile).toContain("overflow: hidden");
+  });
+});
diff --git a/apps/web/src/styles/app.css b/apps/web/src/styles/app.css
index 31faea7..1ede815 100644
--- a/apps/web/src/styles/app.css
+++ b/apps/web/src/styles/app.css
@@ -363,6 +363,15 @@ h2 {
   gap: 10px;
 }
 
+.continue-grid {
+  --continue-visible-rows: 6;
+  --continue-tile-block-size: 118px;
+  max-height: calc((var(--continue-tile-block-size) * var(--continue-visible-rows)) + (10px * (var(--continue-visible-rows) - 1)));
+  overflow-y: auto;
+  padding-right: 4px;
+  scrollbar-gutter: stable;
+}
+
 .job-list {
   max-height: 350px;
   overflow: auto;
@@ -409,6 +418,8 @@ h2 {
 .continue-tile {
   grid-template-columns: 52px minmax(0, 1fr);
   align-items: start;
+  block-size: var(--continue-tile-block-size);
+  overflow: hidden;
 }
 
 .continue-cover {