Release 0.4.5 with metadata tools and responsive layers

wwwroot/css/app.css

@@ -618,10 +618,10 @@ input[type="checkbox"] {
 .layer-manager-block > summary,
 .layer-manager-object > summary {
     display: grid;
-    grid-template-columns: 28px 28px minmax(0, 1fr) 50px;
+    grid-template-columns: 28px 28px minmax(0, 1fr) minmax(28px, auto);
     grid-template-areas:
         "handle expand title count"
-        ". . visibility moves"
+        "visibility lock moves moves"
         "actions actions actions actions";
     align-items: start;
     gap: 6px;
@@ -633,7 +633,6 @@ input[type="checkbox"] {
 
 .layer-expand-button {
     grid-area: expand;
-    grid-row: 1 / span 3;
     align-self: center;
     justify-self: center;
     width: 28px;
@@ -733,6 +732,7 @@ input[type="checkbox"] {
     grid-area: moves;
     display: inline-grid;
     grid-template-columns: 24px 24px;
+    justify-self: end;
     gap: 2px;
 }
 
@@ -778,12 +778,12 @@ input[type="checkbox"] {
 }
 
 .layer-inline-lock {
-    grid-area: visibility;
+    grid-area: lock;
     justify-self: center;
     width: 28px;
     min-width: 28px;
     min-height: 24px;
-    margin-left: 26px;
+    margin: 0;
     padding: 0;
     background: transparent;
     color: var(--ink);
@@ -1047,6 +1047,49 @@ input[type="checkbox"] {
     font-size: 12px;
 }
 
+.attribute-copy-panel {
+    display: grid;
+    grid-template-columns: minmax(170px, 1fr) auto;
+    grid-template-areas:
+        "heading heading"
+        "source source"
+        "toggle action"
+        "hint hint";
+    align-items: end;
+    gap: 8px 12px;
+    padding: 10px;
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    background: #f5f8f9;
+}
+
+.attribute-copy-panel > strong {
+    grid-area: heading;
+}
+
+.attribute-copy-panel > label:first-child {
+    grid-area: source;
+    min-width: 0;
+}
+
+.attribute-copy-panel > .toggle-line {
+    grid-area: toggle;
+}
+
+.attribute-copy-panel > button {
+    grid-area: action;
+}
+
+.attribute-copy-panel > label:first-child select {
+    width: 100%;
+}
+
+.attribute-copy-panel > small {
+    grid-area: hint;
+    color: var(--muted);
+    line-height: 1.4;
+}
+
 .attribute-editor-row {
     display: grid;
     grid-template-columns: minmax(130px, 0.8fr) minmax(180px, 2fr) 36px;
@@ -1111,6 +1154,47 @@ input[type="checkbox"] {
     text-decoration: none;
 }
 
+.leaflet-help {
+    display: grid;
+    gap: 14px;
+}
+
+.leaflet-help > p {
+    margin: 0;
+    color: var(--muted);
+    line-height: 1.45;
+}
+
+.leaflet-help-list {
+    display: grid;
+    gap: 0;
+    margin: 0;
+}
+
+.leaflet-help-list > div {
+    display: grid;
+    grid-template-columns: 42px minmax(0, 1fr);
+    gap: 10px;
+    padding: 10px 0;
+    border-bottom: 1px solid var(--line);
+}
+
+.leaflet-help-list dt {
+    font-size: 20px;
+    font-weight: 900;
+    text-align: center;
+}
+
+.leaflet-help-list dd {
+    margin: 0;
+    line-height: 1.45;
+}
+
+.leaflet-help-list dd strong {
+    display: block;
+    margin-bottom: 2px;
+}
+
 .gps-overlay {
     position: absolute;
     top: 72px;
@@ -1661,6 +1745,17 @@ footer {
         align-self: center;
     }
 
+    .attribute-copy-panel {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas:
+            "heading"
+            "source"
+            "toggle"
+            "action"
+            "hint";
+        align-items: stretch;
+    }
+
     .gps-overlay {
         top: 68px;
         right: 8px;