app/static/app.js

@@ -71,9 +71,10 @@ function render() {
     loudness.dataset.value = String(zone.loudness);
     loudness.disabled = zone.loudness === null || pendingEq.has(`${zone.uid}:loudness`);
     loudness.onclick = () => setEq(zone.uid, 'loudness', loudness.dataset.value !== 'true', loudness);
-    eq.append(loudness);
     const leave = el('button', 'danger', 'Aus Gruppe lösen'); leave.hidden = zone.memberUids.length < 2;
-    leave.onclick = () => act(`/api/groups/${encodeURIComponent(zone.uid)}`, 'DELETE'); card.append(head, track, controls, volume, eq, leave); root.append(card);
+    leave.onclick = () => act(`/api/groups/${encodeURIComponent(zone.uid)}`, 'DELETE');
+    const zoneActions = el('div', 'zone-actions'); zoneActions.append(loudness, leave);
+    card.append(head, track, controls, volume, eq, zoneActions); root.append(card);
   }
   renderSelects(); loadMusic();
 }

app/static/style.css

@@ -125,11 +125,17 @@ button:hover, button:focus {
   margin-top: 5px;
 }
 
-.loudness {
-  justify-self: start;
-  min-height: 26px;
-  padding: 3px 9px;
-  font-size: .76rem;
+.zone-actions {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 4px;
+}
+
+.zone-actions button {
+  min-height: 24px;
+  padding: 2px 7px;
+  font-size: .72rem;
 }
 
 .loudness.active {