Allow editing non-Administrators group access from the Groups tab.

Load a group into the form to change scope and permissions; keep Administrators locked like delete.

webui/src/App.css

@@ -316,6 +316,17 @@
   background: var(--ctp-surface0);
 }
 
+.groups-li-selected {
+  border-color: var(--ctp-mauve);
+  background: var(--ctp-mantle);
+}
+
+.groups-li-actions {
+  display: flex;
+  flex-shrink: 0;
+  gap: 0.4rem;
+}
+
 .groups-li-title {
   font-weight: 650;
   color: var(--ctp-text);
@@ -341,7 +352,9 @@
   line-height: 1.35;
 }
 
-.groups-delete {
+.groups-edit,
+.groups-delete,
+.groups-new {
   appearance: none;
   border: 1px solid var(--ctp-surface1);
   background: transparent;
@@ -363,12 +376,16 @@
   color: var(--ctp-text);
 }
 
-.groups-delete:hover {
+.groups-edit:hover,
+.groups-delete:hover,
+.groups-new:hover {
   background: var(--ctp-mauve-hover);
   color: var(--ctp-mauve);
 }
 
-.groups-delete:focus-visible {
+.groups-edit:focus-visible,
+.groups-delete:focus-visible,
+.groups-new:focus-visible {
   outline: 2px solid var(--ctp-mauve);
   outline-offset: 2px;
   border-radius: 0.2rem;
@@ -404,10 +421,16 @@
   font-size: 0.9rem;
 }
 
+.groups-form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.6rem;
+  margin-top: 0.15rem;
+}
+
 .groups-save {
   appearance: none;
-  align-self: flex-start;
-  margin-top: 0.15rem;
   padding: 0.55rem 1rem;
   border-radius: 0.35rem;
   border: 1px solid var(--ctp-mauve);