From a3854e49b6bcc25c5effc5ac0f0ac31835628727 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 26 Aug 2021 16:35:13 +0100 Subject: [PATCH] Fix issue with jumping buttons The content of the map buttons jumped on Chrome and Safari when focused. It turns out this was because I was testing in Firefox which Leaflet had identified as having touch capability (and so added the .leaflet-touch class). Leaflet makes the buttons 30px rather than 26px for touch-capable devices/browsers so the jumping was down to the line-height being set for the wrong container height. This adds styles to give a different line-height when touch is available, to match the Leaflet styles. --- app/assets/stylesheets/map.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/map.scss b/app/assets/stylesheets/map.scss index 49147fc6a..4defbef45 100644 --- a/app/assets/stylesheets/map.scss +++ b/app/assets/stylesheets/map.scss @@ -83,7 +83,7 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%); // visible outline so it can be set to a colour by the OS. border: solid 2px $govuk-focus-colour; box-sizing: border-box; // make sure height includes the border - line-height: 26px; // subtract the border from the height (normally 30px) + line-height: 22px; // subtract the border from the height (normally 26px) // The inline display box for the button text overlaps the button edge. // This is only visible in high contrast mode because of the background colour being set. @@ -152,6 +152,11 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%); } +// buttons are 30px for touch-capable devices/browsers +.leaflet-touch .leaflet-bar a:focus { + line-height: 26px; // subtract the border from the height (normally 30px) +} + // Map attribution links .leaflet-control-attribution { & a {