From 0698085d98ff74c552f0922aa4a77f72988ce9e2 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Tue, 22 Jun 2021 18:24:22 +0100
Subject: [PATCH] Improve display of long layer names (Fixes #32)

---
 src/scss/leaflet/_controls.scss | 13 ++++++++++++-
 src/scss/style.scss             |  4 ++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss
index 109f692..7cb0b4e 100644
--- a/src/scss/leaflet/_controls.scss
+++ b/src/scss/leaflet/_controls.scss
@@ -153,6 +153,17 @@
 		top: 0;
 		left: 6rem;
 		overflow: auto;
+		max-width: calc(100vw - 14rem);
+    	box-sizing: border-box;
+
+		@media screen and (max-width: 400px) {
+			max-width: calc(100vw - 13rem);
+		}
+
+		.leaflet-control-layers-overlays {
+			width: 100%;
+    		max-width: 30rem;
+		}
 
 		.layer {
 			cursor: pointer;
@@ -334,4 +345,4 @@
 	svg {
 		animation: spin 1s linear infinite;
 	}
-}
\ No newline at end of file
+}
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 1fae61d..286655d 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -154,6 +154,10 @@ input {
 	span {
 		color: var(--text-subtle);
 		padding-left: 3rem;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: block;
 	}
 }