Various styling fixes

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;

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

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 {

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;