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; }