merge: feature/44-home-progress-scroll dans develop (liste des livres en cours scrollable après 6 éléments — évolution #44)

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");
+  });
+});

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 {