From e39c33f9773ef71064f235280c713fac5aa326e9 Mon Sep 17 00:00:00 2001 From: IliesAllali Date: Wed, 28 Oct 2026 08:15:51 +0100 Subject: [PATCH] =?UTF-8?q?T=C3=A9l=C3=A9phone=20:=20l'arbre=20d'abord=20?= =?UTF-8?q?=C3=A0=20l'arriv=C3=A9e,=20la=20personne=20touch=C3=A9e=20remon?= =?UTF-8?q?te=20au-dessus=20de=20la=20fiche=20(#188)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Sur téléphone, la fiche de la personne de départ ne s'ouvre plus à l'arrivée : elle couvrait le bas de l'écran et la personne avec, laissant un écran vide. La personne de départ arrive à 40 % de la hauteur au lieu de 56 %. Toucher quelqu'un dans l'arbre le remonte dans le tiers du haut, au-dessus de la fiche, comme le fait déjà la recherche (focusPerson). Ordinateur inchangé. Co-Authored-By: Claude Opus 5.5 --- frontend/src/App.jsx | 2 ++ frontend/src/components/Galaxy.jsx | 5 +++-- frontend/src/hooks/useTreeAccess.js | 6 ++++-- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index ddea931..805bcaf 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1013,6 +1013,8 @@ function App() { setAddPersonPanelVisible(false) tree.setSelectedPerson(freshPerson) + // Sur téléphone, la fiche couvre le bas : la personne touchée remonte dans le tiers du haut (#188) + if (freshPerson && window.matchMedia?.('(max-width: 768px)').matches) galaxyZoomApiRef.current?.focusPerson?.(freshPerson.id) trackTreeInteraction('text') trackDemoInteraction('person') }, [chooseSelectedPerson, leaveSelectedPerson, tree.setSelectedPerson, trackTreeInteraction, trackDemoInteraction]) // eslint-disable-line react-hooks/exhaustive-deps diff --git a/frontend/src/components/Galaxy.jsx b/frontend/src/components/Galaxy.jsx index cb3ec02..cdaa976 100644 --- a/frontend/src/components/Galaxy.jsx +++ b/frontend/src/components/Galaxy.jsx @@ -679,8 +679,9 @@ const Galaxy = ({ onPersonSelect, onMediaSelect, selectedPersonId, searchHighlig if (focusNode && fitScale < FOCUS_MIN_READABLE_SCALE) { scale = FOCUS_SCALE offsetX = (cssW < 768 ? (PHONE_SLIDER_BAND + cssW) / 2 : cssW / 2) - (focusNode.x + focusNode.width / 2) * scale - // Sur un écran étroit, la barre des familles couvre le haut : la personne de départ un peu plus bas - offsetY = cssH * (cssW < 768 ? 0.56 : 0.42) - (focusNode.y + focusNode.height / 2) * scale + // Sur un écran étroit, la barre des familles couvre le haut : la personne de départ un peu plus bas. Plus de + // fiche ouverte à l'arrivée sur téléphone (#188) : 0,4 et non plus 0,56, sinon le haut de l'écran reste vide + offsetY = cssH * (cssW < 768 ? 0.4 : 0.42) - (focusNode.y + focusNode.height / 2) * scale } const init = { x: offsetX, y: offsetY, scale } diff --git a/frontend/src/hooks/useTreeAccess.js b/frontend/src/hooks/useTreeAccess.js index 28fb03d..8547182 100644 --- a/frontend/src/hooks/useTreeAccess.js +++ b/frontend/src/hooks/useTreeAccess.js @@ -82,9 +82,11 @@ export function useTreeAccess() { const rootPerson = preferredRootPersonId ? graphPersons.find((person) => String(person.id) === String(preferredRootPersonId)) || null : null - // Par le lien de partage, la famille arrive sur l'arbre et sa carte d'accueil, pas sur une fiche ouverte + // Par le lien de partage, la famille arrive sur l'arbre et sa carte d'accueil, pas sur une fiche ouverte. + // Sur téléphone non plus : la fiche y couvre le bas de l'écran, et la personne de départ avec (#188). const openedByShareLink = (options.accessMode ?? '') === 'share' - setSelectedPerson(openedByShareLink ? null : rootPerson) + const phone = typeof window !== 'undefined' && window.matchMedia?.('(max-width: 768px)').matches + setSelectedPerson(openedByShareLink || phone ? null : rootPerson) setSelectedMedia(null) setTreeContext((current) => ({