mirror of
https://github.com/R0m1k3/CollectFlow.git
synced 2026-10-20 05:28:11 +02:00
fix(grille): défilement horizontal visible et barre du bas dans le flux
Les deux symptômes n'en faisaient qu'un. L'ascenseur horizontal EXISTAIT déjà (conteneur en overflow-auto, table en min-width ~2600 px), mais il était caché sous la carte de synthèse. Celle-ci était en `position: fixed` et ne réservait donc aucune hauteur : seul un `pb-12` posé sur la page compensait, trop court d'une quarantaine de pixels — exactement la bande où se trouvent la barre de défilement et la dernière ligne. Son `left-[264px]` était en prime calé sur une barre latérale dépliée, alors qu'elle est repliée par défaut : 200 px de vide à gauche, qui écrasaient ses statistiques en hauteur. Elle est remise dans le flux : la grille lui cède exactement la place nécessaire, et il n'y a plus de valeur magique à tenir en phase avec la sidebar. L'ascenseur devient visible : la règle générale (8 px, rail transparent, pouce à 12 % d'opacité) convient aux panneaux où le défilement est accessoire, pas à la Grille où il est l'outil de navigation principal. Classe `.grid-scroll` dédiée, avec rail dessiné, pouce saisissable, et prise en charge de Firefox que les sélecteurs -webkit- ignorent. Corrigé aussi : - totalWidth lisait `columnDef.size` au lieu de `getSize()`. Le redimensionnement de colonnes étant actif et persisté, la largeur plancher restait figée sur l'ancienne somme : dernières colonnes rognées, course de défilement trop courte. - Conteneur non focusable : flèches, Origine et Fin ne défilaient pas la grille. - Barre de filtres qui passait sur deux lignes sous ~1200 px, volant 48 px au tableau : largeurs réduites en dessous de xl. - Barre d'actions groupées sans flex-wrap, qui s'écrasait sur petit écran. - Double croix dans la recherche : `type="search"` ajoutait la croix native du navigateur par-dessus le bouton maison. Masquage local — la recherche de l'en-tête n'a pas de bouton propre et garde donc le sien. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y26nRZxTR57K7h8yqsF675
This commit is contained in:
6 files changed
+83
-11
No files matched your search
@@ -238,6 +238,47 @@
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
/* ── Défilement de la Grille ──
|
||||
La règle ci-dessus (8 px, rail transparent, pouce très pâle) convient aux
|
||||
panneaux où l'ascenseur est accessoire. Dans la Grille, le tableau fait
|
||||
~2600 px de large : l'ascenseur HORIZONTAL est l'outil de navigation
|
||||
principal, et un rail invisible ne dit pas qu'il reste des colonnes à
|
||||
droite. On lui donne donc un rail dessiné et un pouce saisissable.
|
||||
`scrollbar-*` couvre Firefox, que les sélecteurs -webkit- ignorent. */
|
||||
.grid-scroll {
|
||||
scrollbar-width: auto;
|
||||
scrollbar-color: var(--text-muted) var(--bg-elevated);
|
||||
}
|
||||
|
||||
.grid-scroll::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.grid-scroll::-webkit-scrollbar-track:horizontal {
|
||||
background: var(--bg-elevated);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.grid-scroll::-webkit-scrollbar-thumb {
|
||||
background: var(--text-muted);
|
||||
border-radius: 99px;
|
||||
/* Bordure transparente + background-clip : le pouce garde de l'air dans son
|
||||
rail sans qu'on ait à jouer sur des marges, impossibles ici. */
|
||||
border: 3px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.grid-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-secondary);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
/* Le coin entre les deux ascenseurs, sinon laissé en blanc par le navigateur. */
|
||||
.grid-scroll::-webkit-scrollbar-corner {
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
/* ── Heatmap cells ── */
|
||||
.heatmap-zero {
|
||||
background: var(--bg-elevated);
|
||||
|
||||
Reference in new issue
Block a user