From 5c860547f890839675a02409f89f9e622de937c4 Mon Sep 17 00:00:00 2001 From: Gwadaking Date: Tue, 14 Apr 2026 17:06:06 -0400 Subject: [PATCH] fix: corriger le masquage du bas de l'app par la barre Android Co-Authored-By: Claude Sonnet 4.6 --- frontend/index.html | 2 +- frontend/src/App.css | 6 +++--- frontend/src/components/Map/SargassesMap.css | 12 +++++++++--- frontend/src/components/Map/SargassesMap.jsx | 2 +- frontend/src/components/SpotPanel/SpotPanel.css | 4 +++- 5 files changed, 17 insertions(+), 9 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index e036a97..ece42f3 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,7 @@ - + Radar Sargasses Caraïbes diff --git a/frontend/src/App.css b/frontend/src/App.css index 37a58b8..cf77957 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -10,14 +10,14 @@ body { .app { position: relative; width: 100vw; - height: 100vh; + height: 100dvh; /* dvh = dynamic, s'adapte à la barre d'adresse mobile */ } /* ── Boutons flottants (signalement + info) ── */ .app__actions { position: absolute; - bottom: 14px; - left: 16px; + bottom: max(14px, calc(14px + env(safe-area-inset-bottom))); + left: max(16px, calc(16px + env(safe-area-inset-left))); display: flex; flex-direction: column; gap: 8px; diff --git a/frontend/src/components/Map/SargassesMap.css b/frontend/src/components/Map/SargassesMap.css index 92049f8..fdf2e5d 100644 --- a/frontend/src/components/Map/SargassesMap.css +++ b/frontend/src/components/Map/SargassesMap.css @@ -1,7 +1,7 @@ /* ── Placeholder avant chargement du style ── */ .smap-placeholder { width: 100%; - height: 100vh; + height: 100dvh; background: #3ab5e6; /* couleur océan = pas de flash blanc */ } @@ -19,8 +19,8 @@ /* ── Indicateur fraîcheur données ── */ .smap-freshness { position: absolute; - bottom: 28px; - left: 10px; + bottom: max(28px, calc(28px + env(safe-area-inset-bottom))); + left: max(10px, calc(10px + env(safe-area-inset-left))); background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(4px); border-radius: 6px; @@ -31,6 +31,12 @@ z-index: 10; } +/* NavigationControl MapLibre — remonte au-dessus de la barre Android */ +.maplibregl-ctrl-bottom-right { + bottom: env(safe-area-inset-bottom) !important; + right: env(safe-area-inset-right) !important; +} + /* ── Spot markers ── */ .smap-marker { cursor: pointer; diff --git a/frontend/src/components/Map/SargassesMap.jsx b/frontend/src/components/Map/SargassesMap.jsx index 939fe40..4c4f2d9 100644 --- a/frontend/src/components/Map/SargassesMap.jsx +++ b/frontend/src/components/Map/SargassesMap.jsx @@ -271,7 +271,7 @@ export default function SargassesMap({ onSpotSelect, selectedSpotId, activeStep, onClick={() => onSpotSelect(null)} mapStyle={mapStyle} maxBounds={MAX_BOUNDS} - style={{ width: '100%', height: '100vh' }} + style={{ width: '100%', height: '100dvh' }} > diff --git a/frontend/src/components/SpotPanel/SpotPanel.css b/frontend/src/components/SpotPanel/SpotPanel.css index 311bd04..b9e0e35 100644 --- a/frontend/src/components/SpotPanel/SpotPanel.css +++ b/frontend/src/components/SpotPanel/SpotPanel.css @@ -367,8 +367,10 @@ transform: none; width: 100%; border-radius: 20px 20px 0 0; - max-height: 70vh; + max-height: 70dvh; overflow-y: auto; + /* Padding bas pour ne pas se faire couper par la barre Android */ + padding-bottom: max(20px, calc(20px + env(safe-area-inset-bottom))); } .spot-panel__feedback-btns { flex-direction: column; } .spot-panel__details { grid-template-columns: 1fr; }