From 1c0d4319b7612b3192e66143bd8644dd4e7892d2 Mon Sep 17 00:00:00 2001 From: ekke Date: Thu, 20 Aug 2026 17:04:08 +0200 Subject: [PATCH] Drawing toolbar: lift the phone strip clear of the map controls MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Now that the strip paints on iPhone, it turned out to sit at the very bottom edge — under the right-edge control stack and clipped by the dock. The strip spans the full width, so it has to clear that stack rather than sit beside it: My Location bottom: 90px + 44px tall -> top at 134px Base map switcher bottom: 144px + 44px tall -> top at 188px so bottom: 196px, 8px above the topmost of them. The arithmetic is written into the rule, with a pointer to .ls-locate-toggle and the LayerSwitcher button in layerswitcher.css, since a change to either silently reintroduces the overlap. Landscape still fits: the map is ~270px tall there and the strip is one row at that width, so 196 + 52 = 248px. Verified against stand-ins for both buttons at phone and tablet widths: no overlap in either the one-row or the wrapped two-row layout. Service Worker v18 -> v19. Co-Authored-By: Claude Opus 4.8 --- dist/index.html | 8 +++++++- dist/sw.js | 6 +++++- index.html | 8 +++++++- public/sw.js | 6 +++++- 4 files changed, 24 insertions(+), 4 deletions(-) diff --git a/dist/index.html b/dist/index.html index 5460668..9b93f95 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1802,7 +1802,13 @@ justify-content: center; row-gap: 3px; top: auto; - bottom: 12px; + /* Clear of the right-edge control stack, which the strip spans the full + width of and would otherwise sit under: + My Location bottom: 90px + 44px tall -> top at 134px + Base map switcher bottom: 144px + 44px tall -> top at 188px + so 188 + 8px gap. Keep these in step with .ls-locate-toggle and the + LayerSwitcher button in src/styles/layerswitcher.css. */ + bottom: 196px; left: 8px; /* width rather than `right`, which is the more conventional pairing with `left` and avoids another layout edge case. */ diff --git a/dist/sw.js b/dist/sw.js index d130acd..7a55441 100644 --- a/dist/sw.js +++ b/dist/sw.js @@ -103,7 +103,11 @@ // become hairline dividers so the grouping survives the narrower layout. // Building the rail is now also wrapped in a fallback: if it throws, the // default ol-ext bar is shown instead of no bar at all. -const CACHE_VERSION = 'v18'; +// v19: The phone strip sat at the very bottom edge, under the My Location and +// base-map buttons on the right and clipped by the dock. It now sits above +// that whole right-edge stack (bottom: 196px = the switcher's 144px anchor +// + its 44px height + an 8px gap). +const CACHE_VERSION = 'v19'; const SHELL_CACHE = `shell-${CACHE_VERSION}`; const MODULES_CACHE = `modules-${CACHE_VERSION}`; const API_CACHE = `api-${CACHE_VERSION}`; diff --git a/index.html b/index.html index 057215a..f55cca7 100644 --- a/index.html +++ b/index.html @@ -1802,7 +1802,13 @@ justify-content: center; row-gap: 3px; top: auto; - bottom: 12px; + /* Clear of the right-edge control stack, which the strip spans the full + width of and would otherwise sit under: + My Location bottom: 90px + 44px tall -> top at 134px + Base map switcher bottom: 144px + 44px tall -> top at 188px + so 188 + 8px gap. Keep these in step with .ls-locate-toggle and the + LayerSwitcher button in src/styles/layerswitcher.css. */ + bottom: 196px; left: 8px; /* width rather than `right`, which is the more conventional pairing with `left` and avoids another layout edge case. */ diff --git a/public/sw.js b/public/sw.js index d130acd..7a55441 100644 --- a/public/sw.js +++ b/public/sw.js @@ -103,7 +103,11 @@ // become hairline dividers so the grouping survives the narrower layout. // Building the rail is now also wrapped in a fallback: if it throws, the // default ol-ext bar is shown instead of no bar at all. -const CACHE_VERSION = 'v18'; +// v19: The phone strip sat at the very bottom edge, under the My Location and +// base-map buttons on the right and clipped by the dock. It now sits above +// that whole right-edge stack (bottom: 196px = the switcher's 144px anchor +// + its 44px height + an 8px gap). +const CACHE_VERSION = 'v19'; const SHELL_CACHE = `shell-${CACHE_VERSION}`; const MODULES_CACHE = `modules-${CACHE_VERSION}`; const API_CACHE = `api-${CACHE_VERSION}`;