Fix layer actions and add reusable color editors

wwwroot/css/app.css

@@ -484,6 +484,54 @@ input[type="checkbox"] {
     padding: 1px;
 }
 
+.layer-color-editor {
+    grid-column: 1 / -1;
+    display: grid;
+    gap: 5px;
+    padding: 6px;
+    border: 1px solid #cbd5da;
+    border-radius: 4px;
+    background: rgba(255, 255, 255, 0.82);
+}
+
+.layer-color-editor > header {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 46px auto;
+    align-items: center;
+    gap: 5px;
+    font-size: 10px;
+}
+
+.layer-color-editor > header input[type="color"] {
+    width: 46px;
+    min-height: 30px;
+}
+
+.layer-color-editor button {
+    min-height: 28px;
+    min-width: 0;
+    padding: 3px 6px;
+    font-size: 9px;
+}
+
+.layer-color-formats {
+    display: grid;
+    gap: 4px;
+}
+
+.layer-color-formats label {
+    grid-template-columns: 30px minmax(0, 1fr);
+    align-items: center;
+}
+
+.layer-color-formats input {
+    font-family: Consolas, "Courier New", monospace;
+}
+
+.layer-color-copy {
+    justify-self: stretch;
+}
+
 .layer-photo-picker {
     position: relative;
     min-height: 32px;
@@ -574,7 +622,7 @@ input[type="checkbox"] {
     grid-template-areas:
         "handle expand title count"
         ". . visibility moves"
-        ". . actions moves";
+        "actions actions actions actions";
     align-items: start;
     gap: 6px;
     min-height: 38px;
@@ -625,8 +673,9 @@ input[type="checkbox"] {
     grid-area: actions;
     display: grid;
     grid-template-columns: minmax(0, 1fr);
-    width: min(130px, 100%);
+    width: 100%;
     gap: 4px;
+    margin-top: 2px;
 }
 
 .layer-manager-group > summary > input,
@@ -747,6 +796,7 @@ input[type="checkbox"] {
 
 .project-readonly .leaflet-draw,
 .project-readonly .layer-rename-button,
+.project-readonly .layer-membership-button,
 .project-readonly .layer-remove-button,
 .project-readonly .layer-inline-lock,
 .project-readonly .layer-object-tools,