fix(maps): the phone map carries no credit and no night pause labels

The credit was a round (i) under the locate button, and on a full-bleed phone map a
lone control there is the first thing the eye lands on. It is off on the phone now:
one rule in mobile.css against both engines' containers, so Leaflet, MapLibre and
Mapbox cannot drift apart. The desktop map is untouched and still shows the full
credit with its links. Owner's call, made knowingly.

With the credit gone the band the round controls floated on had nothing under it to
clear, so the 38px credit row comes out of --bottom-nav-h and out of the camera
padding the offered roads are framed with. The controls now stand on the map floor.

The night pause pills go with it. On the desktop one is a drag handle with a hint;
a phone has neither hover to explain it nor room to drag, and the markers come from
the whole drive rather than the stage on screen, so day 1 drew day 2's pill as well.
Both via lists go through the same filter, because the plan tab carries them too.
This commit is contained in:
Maurice
2026-09-17 12:43:45 +02:00
parent 222313d198
commit 782bb365b5
7 changed files with 97 additions and 327 deletions
+1 -21
View File
@@ -34,7 +34,6 @@ function alternativeLabelIcon(label: string, note: string, background: string, a
})
}
import L from 'leaflet'
import MapAttributionToggle from './MapAttributionToggle'
import 'leaflet.markercluster/dist/MarkerCluster.css'
import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
import { mapsApi } from '../../api/client'
@@ -999,16 +998,6 @@ export const MapView = memo(function MapView({
? 'calc(var(--bottom-nav-h, 84px) + 20px + var(--day-panel-h, 0px) + 12px)'
: 'calc(var(--bottom-nav-h, 84px) + 12px)'
/**
* Whether the credit is showing, on a phone where it starts as the (i).
*
* Held here rather than pushed into Leaflet's own container: Leaflet rewrites that
* container's markup from scratch whenever a layer with an attribution is added or
* removed, so anything injected into it dies on the next basemap switch. A class on
* the wrapper survives that, and the CSS lives with the rest of the mobile chrome.
*/
const [attribOpen, setAttribOpen] = useState(false)
const baseLayer = useSettingsStore(s => s.settings.map_base_layer) || 'default'
const updateSetting = useSettingsStore(s => s.updateSetting)
const isSatellite = baseLayer === 'satellite'
@@ -1027,7 +1016,7 @@ export const MapView = memo(function MapView({
return (
<>
<div className={`w-full h-full relative${isMobile && attribOpen ? ' m-attrib-open' : ''}`}>
<div className="w-full h-full relative">
<MapContainer
// The datum is in the element's identity, because react-leaflet builds the
// map once and Leaflet cannot change a CRS afterwards. Settings can arrive
@@ -1246,15 +1235,6 @@ export const MapView = memo(function MapView({
onClick={cycleTrackingMode}
bottomOffset={locationButtonBottom as unknown as number}
/>}
{/* The credit as the little (i), which is what both GL engines do on a narrow map
and Leaflet has no mode for. */}
{isMobile && (
<MapAttributionToggle
open={attribOpen}
onToggle={() => setAttribOpen(v => !v)}
bottomOffset={locationButtonBottom}
/>
)}
{/* 20px off the sidebar, not 12: the pill is round and frosted, so at the
smaller gap its shadow ran into the sidebar edge and the two read as one
surface. */}