fix: Vertically center the map on mobile when opening it

[PolariTOON]

This is an approximation. This would likely need to take into account the minimum height of the bottom sheet to be perfect, but it's not exposed by the component.

[bundlemon]

BundleMon

Files updated (1)

Status	Path	Size	Limits
✅	app/coachco2.(hash).js	39.61KB (+21B +0.05%)	-

Unchanged files (3)

Status	Path	Size	Limits
✅	vendors/coachco2.(hash).js	597.51KB	-
✅	vendors-coachco2.(hash).(hash).min.css	31.89KB	-
✅	app-coachco2.(hash).min.css	140B	-

Total files change +21B 0%

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history

[Crash--]

but it's not exposed by the component.

Do you have a ref on this component? Or can you add one? Something like: ref.current.clientHeight

[JF-Cozy]

ça me paraît bizarre qu'en changeant la valeur de mapPanRatio ça fonctionne toujours pour les trajets "horizontaux" 🤔 c'est le fait d'avoir remplacer le panBy par paddingBottomRight qui fait que ??

[PolariTOON]

Do you have a ref on this component? Or can you add one? Something like: ref.current.clientHeight

I can likely get a ref to the BottomSheet, but even so, i don't really need its current total height, but maybe something like the height of the visible part of the BottomSheet when it is collapsed (and it is not collapsed at this point). I can not directly read it, given it is an internal state of the component. I would have to parse the transform property instead which does not seem straightforward.

ça me paraît bizarre qu'en changeant la valeur de mapPanRatio ça fonctionne toujours pour les trajets "horizontaux" thinking c'est le fait d'avoir remplacer le panBy par paddingBottomRight qui fait que ??

Voici ce que dit la documentation à propos de l'option paddingTopLeft (de même pour paddingBottomRight) :

Sets the amount of padding in the top left corner of a map container that shouldn't be accounted for when setting the view to fit bounds. Useful if you have some control overlays on the map like a sidebar and you don't want them to obscure objects you're zooming to.

C'est typiquement notre cas de figure. Ça permet de réserver un certain espace et de centrer le trajet au sein de l'espace restant.

Exemple si la taille medium de la BottomSheet est initialisée à 2/3 (ce qui est le cas actuellement) :

Exemple si la taille medium de BottomSheet était initialisée à 1/3 :

À noter que si on rétracte la BottomSheet, ça ne recentre pas la carte pour autant, c'est seulement en arrivant sur la page.

[JF-Cozy]

il nous reste un mini souci avec un trajet

[PolariTOON]

There is still a small initial vertical shift when opening the map that disappears once the viewport is resized. This seems to be due to how we observe the toolbar height (replacing the variable with a magic number fixes the issue), but I did not manage to find any strategy with the right hooks to measure it at the right time. This might require changes to cozy-ui, so we should likely keep the work for another PR.

[JF-Cozy]

@PolariTOON ok merci pour le retour. Je pense qu'on peut valider ici et ouvrir une issue en parallèle sur cozy-ui 👍 Je te laisse gérer ça ?

[JF-Cozy]

• on peut sortir le const padding = 16 en constant hors du composant
• si c'est en fix en rapport à l'issue cozy-ui, on peut créer l'issue et ajouter le lien vers l'issue ici en // TODO:

[PolariTOON]

Non, c'est pas en fix, c'est juste par rapport à ta revue précédente, ça permet de compenser l'épaisseur du trait du trajet et de ses marqueurs au début et à la fin

[PolariTOON]

Le seul fix que j'ai trouvé pour l'instant ça serait de précalculer la hauteur :

 mapContainer: {
-  height: `calc(100vh - ${toolbarHeight}px - env(safe-area-inset-bottom))`
+  height: "calc(100vh - 47px - env(safe-area-inset-bottom))"
 }

[PolariTOON]

J'ai ouvert un ticket à ce propos ici : cozy/cozy-ui#2185