Merge pull request #180 from IliesAllali/fix/barre-familles

Barre des familles : elle ne s'écarte que si la fiche monte jusqu'à elle

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) {

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 (
     <div
+      ref={cardRef}
       className={`person-card ${editMode ? 'person-card--edit-mode' : ''}`}
       role="dialog"
       aria-label={t('Fiche de {name}', { name: fullNameLabel(person) })}