From 60d84d61a077d3166eeecbed89dbde23d708bab4 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Thu, 24 Feb 2022 00:32:30 +0000
Subject: [PATCH] Fixed layout for marker icons with no iconSize

---
 src/leaflet/icon/GenericIcon.ts |  5 ++---
 src/scss/leaflet/_markers.scss  | 12 +++++++++---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/leaflet/icon/GenericIcon.ts b/src/leaflet/icon/GenericIcon.ts
index 62ca0f3..4595be2 100644
--- a/src/leaflet/icon/GenericIcon.ts
+++ b/src/leaflet/icon/GenericIcon.ts
@@ -79,8 +79,7 @@ export class GenericIcon extends Layer implements Icon<GenericIconOptions> {
 
 		div.appendChild(this._image);
 		div.classList.add('marker', 'leaflet-marker-icon');
-
-		this._image.classList.toggle('icon--auto', !this.options.iconSize);
+		div.classList.toggle('marker--auto-size', !this.options.iconSize);
 
 		if(this.options.iconSize) {
 			const size = point(this.options.iconSize as PointExpression);
@@ -145,9 +144,9 @@ export class GenericIcon extends Layer implements Icon<GenericIconOptions> {
 		}
 
 		this.options.iconSize = options.iconSize;
+		this._container!.classList.toggle('marker--auto-size', !this.options.iconSize);
 
 		if(this._image) {
-			this._image.classList.toggle('icon--auto', !this.options.iconSize);
 			const iconSize = this.options.iconSize ? point(options.iconSize || [16, 16] as PointExpression) : undefined;
 			// @ts-ignore
 			this._image!.width = iconSize ? iconSize.x : 'auto';
diff --git a/src/scss/leaflet/_markers.scss b/src/scss/leaflet/_markers.scss
index 034be59..4e24a14 100644
--- a/src/scss/leaflet/_markers.scss
+++ b/src/scss/leaflet/_markers.scss
@@ -190,20 +190,26 @@
 		background: var(--background-marker);
 		padding: 0.2rem;
 		display: none;
-		margin-left: 0.2rem;
 		width: max-content;
 		max-width: 30rem;
+		position: absolute;
+		left: calc(100% + 0.2rem);
 
 		@at-root .leaflet-pane--show-labels .marker__label {
 			display: block !important;
 		}
 	}
 
-	.marker__icon {
-		&.icon--auto {
+	&.marker--auto-size {
+		.marker__icon {
 			margin-top: -50%;
 			margin-left: -50%;
 		}
+
+		.marker__label {
+			margin-top: -50%;
+			left: calc(50% + 0.2rem);
+		}
 	}
 
 	&:hover, &:focus {