From 4ac3de7983057229f78eb3fdb1c0b6e4bf4e03be Mon Sep 17 00:00:00 2001
From: Malvoz <26493779+Malvoz@users.noreply.github.com>
Date: Fri, 3 Dec 2021 10:23:10 +0100
Subject: [PATCH 1/2] Improve layer control drag styles

---
 src/mapml.css | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/mapml.css b/src/mapml.css
index 817731ba9..c0422c7c0 100644
--- a/src/mapml.css
+++ b/src/mapml.css
@@ -214,7 +214,6 @@
 }
 
 .leaflet-control-layers fieldset {
-  border: none;
   margin: 0;
   padding: 0;
   min-height: 44px;
@@ -239,10 +238,6 @@
   margin-inline-start: 0;
 }
 
-.leaflet-control-layers-list .leaflet-control-layers-overlays > :not(:last-of-type) {
-  border-bottom: 1px solid #e3e3e3;
-}
-
 .leaflet-control .leaflet-control-layers-toggle {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='m11.99 18.54-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16zm0-11.47L17.74 9 12 13.47 6.26 9 12 4.53z'/%3E%3C/svg%3E");
   background-size: 34px;
@@ -487,7 +482,6 @@ summary {
 .mapml-draggable,
 .mapml-draggable * {
   cursor: row-resize;
-  background-color: white;
 }
 
 .leaflet-crosshair {
@@ -651,14 +645,13 @@ button.mapml-button:disabled,
 }
 
 .mapml-layer-item,
-.mapml-layer-item *,
-.mapml-layer-item ::before,
-.mapml-layer-item ::after {
+.mapml-layer-item * {
   box-sizing: border-box;
 }
 
 .mapml-layer-item {
-  border: 0;
+  background-color: #fff;
+  border: 1px solid #fff;
   margin: 0;
   padding: 0;
 }
@@ -666,6 +659,18 @@ button.mapml-button:disabled,
 .mapml-layer-item:not(:last-of-type) {
   border-bottom: 1px solid #e3e3e3;
 }
+.mapml-layer-item[aria-grabbed="true"] {
+  border: 1px solid #e3e3e3;
+  border-radius: 0;
+}
+.mapml-layer-item:first-of-type {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.mapml-layer-item:last-of-type {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
 
 .mapml-layer-item-properties {
   align-items: center;

From 80b91f1d588b9907e2da4bbd294a5153273f67b1 Mon Sep 17 00:00:00 2001
From: Malvoz <26493779+Malvoz@users.noreply.github.com>
Date: Fri, 3 Dec 2021 10:43:16 +0100
Subject: [PATCH 2/2] Fix clickable area of layers in layer control

---
 src/mapml.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/mapml.css b/src/mapml.css
index c0422c7c0..5698c6584 100644
--- a/src/mapml.css
+++ b/src/mapml.css
@@ -713,6 +713,8 @@ button.mapml-button:disabled,
 label.mapml-layer-item-toggle {
   display: inline-flex;
   align-items: center;
+  width: 100%; /* have the clickable area take up all available width */
+  min-height: 44px;
 }
 
 .mapml-layer-item-name {