fix(client): page sans overflow, listes scrollables, miniatures agrandies #6

Merged

kyuno merged 1 commit from fix/layout-scroll-and-thumbnails into main

2026-09-16 23:24:28 +02:00

kyuno commented

2026-09-16 23:12:35 +02:00

Owner

Résumé

La page principale ne défile plus (overflow supprimé).
La liste de la file d'attente et la liste de résultats de recherche défilent chacune en interne.
Liste de résultats plus large, miniatures agrandies (96×54 → 144×81, ratio 16:9) pour mieux différencier les vidéos qu'avec le seul titre.

Détails techniques

Layout en hauteur pleine page : html/body/.shell à height:100%/100vh, overflow:hidden sur body. Seules download-form__results et queue-panel__list défilent (flex:1 1 0; min-height:0; overflow-y:auto).

Point d'attention : min-height: 0 est nécessaire à chaque niveau flex descendant entre .shell et la liste scrollable - un enfant flex ne rétrécit jamais sous la taille de son contenu par défaut, ce qui aurait fait déborder toute la page au lieu de faire défiler juste la liste concernée. Chaque vue neutralise le grow/shrink de ses enfants directs non-scrollables via > * { flex: 0 0 auto; }, la règle de l'élément scrollable (même spécificité, déclarée après donc prioritaire) le fait ensuite remplir l'espace restant.

Au passage : colonnes .shell__main 3fr/2fr → 2fr/1fr et max-width 960px → 1280px (liste de vidéos plus large), titre de résultat sur 2 lignes (line-clamp) plutôt qu'une troncature sur une seule ligne.

Vérifications locales

npm run lint (Biome) + tests + typecheck + build, serveur et client : clean (63 tests serveur, 7 tests client - aucun changement de logique métier, uniquement CSS)
Testé en navigateur réel, pas juste visuellement : 16 éléments ajoutés à la file + 12 résultats de recherche factices injectés, puis mesuré via scrollHeight/clientHeight - document.body.scrollHeight reste strictement égal à window.innerHeight (page sans overflow) alors que les deux listes ont un scrollHeight très supérieur à leur clientHeight (défilement interne réel confirmé, pas juste un scrollbar visuel qui ne défilerait rien)

🤖 Generated with Claude Code

## Résumé - La page principale ne défile plus (`overflow` supprimé). - La liste de la file d'attente et la liste de résultats de recherche défilent chacune en interne. - Liste de résultats plus large, miniatures agrandies (96×54 → 144×81, ratio 16:9) pour mieux différencier les vidéos qu'avec le seul titre. ## Détails techniques Layout en hauteur pleine page : `html`/`body`/`.shell` à `height:100%`/`100vh`, `overflow:hidden` sur `body`. Seules `download-form__results` et `queue-panel__list` défilent (`flex:1 1 0; min-height:0; overflow-y:auto`). Point d'attention : `min-height: 0` est nécessaire à **chaque niveau flex descendant** entre `.shell` et la liste scrollable - un enfant flex ne rétrécit jamais sous la taille de son contenu par défaut, ce qui aurait fait déborder toute la page au lieu de faire défiler juste la liste concernée. Chaque vue neutralise le grow/shrink de ses enfants directs non-scrollables via `> * { flex: 0 0 auto; }`, la règle de l'élément scrollable (même spécificité, déclarée après donc prioritaire) le fait ensuite remplir l'espace restant. Au passage : colonnes `.shell__main` 3fr/2fr → 2fr/1fr et `max-width` 960px → 1280px (liste de vidéos plus large), titre de résultat sur 2 lignes (`line-clamp`) plutôt qu'une troncature sur une seule ligne. ## Vérifications locales - `npm run lint` (Biome) + tests + typecheck + build, serveur et client : clean (63 tests serveur, 7 tests client - aucun changement de logique métier, uniquement CSS) - **Testé en navigateur réel**, pas juste visuellement : 16 éléments ajoutés à la file + 12 résultats de recherche factices injectés, puis mesuré via `scrollHeight`/`clientHeight` - `document.body.scrollHeight` reste strictement égal à `window.innerHeight` (page sans overflow) alors que les deux listes ont un `scrollHeight` très supérieur à leur `clientHeight` (défilement interne réel confirmé, pas juste un scrollbar visuel qui ne défilerait rien) 🤖 Generated with [Claude Code](https://claude.com/claude-code)

kyuno added 1 commit 2026-09-16 23:12:35 +02:00

fix(client): page sans overflow, listes scrollables, miniatures agrandies

Publier l'image Docker / test (pull_request) Failing after 4s

Details

Publier l'image Docker / publish (pull_request) Has been skipped

Details

d8dc263690

- Layout en hauteur pleine (html/body/.shell à 100%/100vh, overflow
  hidden sur body) : la page ne défile plus jamais. Seules
  download-form__results et queue-panel__list défilent en interne
  (flex:1 1 0 + min-height:0 + overflow-y:auto), propagé depuis .shell
  via min-height:0 à chaque niveau flex descendant.
- .shell__main : ratio de colonnes 3fr/2fr -> 2fr/1fr et max-width
  960px -> 1280px, pour une liste de vidéos plus large.
- Miniatures de résultats agrandies (96x54 -> 144x81, ratio 16:9) et
  titre sur 2 lignes (line-clamp) plutôt qu'une troncature sur une seule
  ligne, pour mieux différencier les vidéos au premier coup d'œil.

Vérifié en navigateur avec des données de test (16 éléments de file,
12 résultats factices injectés) : bodyScrollHeight reste égal à
windowInnerHeight (page sans overflow) alors que les deux listes ont un
scrollHeight très supérieur à leur clientHeight (défilement interne
réel, pas juste visuel).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>