Nicolas
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>
57 lines
1.2 KiB
SCSS
57 lines
1.2 KiB
SCSS
.shell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
margin: 0;
|
|
|
|
&__header {
|
|
flex: 0 0 auto;
|
|
padding: 1rem 1.5rem;
|
|
background: var(--color-surface);
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
h1 {
|
|
font-size: 1.15rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
color: var(--color-text);
|
|
}
|
|
}
|
|
|
|
// min-height: 0 est nécessaire ici (et à chaque niveau descendant
|
|
// jusqu'aux listes scrollables) : par défaut un enfant flex ne
|
|
// rétrécit jamais sous la taille de son contenu, ce qui empêcherait
|
|
// tout overflow interne et ferait déborder toute la page à la place.
|
|
&__main {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 1fr 1fr;
|
|
gap: 1.25rem;
|
|
padding: 1.5rem;
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@media (min-width: 800px) {
|
|
&__main {
|
|
grid-template-columns: 2fr 1fr;
|
|
grid-template-rows: 1fr;
|
|
}
|
|
}
|
|
|
|
&__panel {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 12px;
|
|
padding: 1.25rem;
|
|
overflow: hidden;
|
|
}
|
|
}
|