From 0841640e7674e57316ca29692325b60b01cceb2a Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Tue, 25 May 2021 20:38:51 +0100
Subject: [PATCH] Various styling fixes

---
 src/components/Sidebar.vue      | 1 +
 src/scss/_mixins.scss           | 6 +++++-
 src/scss/leaflet/_controls.scss | 3 +--
 src/scss/style.scss             | 4 ++++
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 70d2143..b445292 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -176,6 +176,7 @@ export default defineComponent({
 		box-sizing: border-box;
 		width: 100%;
 		max-width: 23rem;
+		flex: 0 0 auto;
 
 		.section__heading {
 			font-size: 2rem;
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index 273dd1d..deb1d1d 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -2,7 +2,11 @@
  Adds styles for both :focus-visible and .focus-visible for maximum browser support.
 */
 @mixin focus() {
-	&:focus-visible, &.focus-visible {
+	&:focus-visible {
+		@content;
+	}
+
+	&.focus-visible {
 		@content;
 	}
 }
diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss
index 1e68d42..1f989ad 100644
--- a/src/scss/leaflet/_controls.scss
+++ b/src/scss/leaflet/_controls.scss
@@ -203,7 +203,7 @@
 	.leaflet-control {
 		order: 2;
 		min-width: 5rem;
-		margin-top: 1rem;
+		margin-bottom: 1rem;
 
 		&:first-child {
 			margin-top: 0;
@@ -232,7 +232,6 @@
 
 	.leaflet-control-logo {
 		order: 1;
-		margin-bottom: 1rem;
 		margin-top: 0 !important;
 
 		& + .leaflet-control-logo {
diff --git a/src/scss/style.scss b/src/scss/style.scss
index a486822..1445330 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -86,6 +86,10 @@ input {
 	}
 }
 
+.js-focus-visible :focus:not(.focus-visible) {
+  outline: none;
+}
+
 .focus-mover {
 	clip: rect(1px, 1px, 1px, 1px);
 	position: absolute;