diff --git a/frontend/src/components/Galaxy.css b/frontend/src/components/Galaxy.css index 1f5606d..5887f78 100644 --- a/frontend/src/components/Galaxy.css +++ b/frontend/src/components/Galaxy.css @@ -100,12 +100,13 @@ se limite à la moitié gauche sur grand écran et descend sous le message sur téléphone */ .family-tabs--lowered { max-width: calc(50vw - 200px); } -/* Fiche ouverte sur grand écran (à gauche, 384 px depuis 24 px) : la barre passe à sa droite */ +/* Fiche ouverte sur grand écran (à gauche, 384 px depuis 24 px, posée en bas) : la barre passe à sa droite + seulement quand la fiche monte jusqu'à elle (data-fiche-haute, posé par PersonCard) */ @media (min-width: 769px) { - body:has(.person-card) .family-tabs { left: 424px; max-width: calc(100vw - 424px - 96px); } + body[data-fiche-haute] .family-tabs { left: 424px; max-width: calc(100vw - 424px - 96px); } /* Recherche ouverte (environ 540 px à droite) : la barre s'arrête avant elle et se fond au bord */ body:has(.expandable-search.expanded) .family-tabs { max-width: calc(100vw - 16px - 560px); } - body:has(.person-card):has(.expandable-search.expanded) .family-tabs { max-width: calc(100vw - 424px - 560px); } + body[data-fiche-haute]:has(.expandable-search.expanded) .family-tabs { max-width: calc(100vw - 424px - 560px); } } @media (max-width: 768px) { diff --git a/frontend/src/components/PersonCard.jsx b/frontend/src/components/PersonCard.jsx index 547c7ce..5663ad8 100644 --- a/frontend/src/components/PersonCard.jsx +++ b/frontend/src/components/PersonCard.jsx @@ -160,6 +160,22 @@ const PersonCard = ({ // Feuille du bas (téléphone) : on la ferme en la glissant par la poignée ou l'en-tête, comme la croix const sheetMode = useSheetMode() const drag = useSheetDrag({ enabled: sheetMode, zone: '.pc-grab, .pc-head, .pc-close', onClose }) + // La barre des familles (en haut à gauche) ne s'écarte que si la fiche, posée en bas, monte jusqu'à elle + const cardRef = useRef(null) + useEffect(() => { + const el = cardRef.current + if (!el) return undefined + const update = () => document.body.toggleAttribute('data-fiche-haute', el.getBoundingClientRect().top < 72) + update() + const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(update) + observer?.observe(el) + window.addEventListener('resize', update) + return () => { + observer?.disconnect() + window.removeEventListener('resize', update) + document.body.removeAttribute('data-fiche-haute') + } + }, []) // Reset edits quand la personne change useEffect(() => { @@ -666,6 +682,7 @@ const PersonCard = ({ return (