[verified] style: stack Play button label

Co-authored-by: Tom Ernst <tom@citr.one>

app/static/app.js

@@ -52,7 +52,10 @@ function render() {
     const track = el('p', 'track', zone.error || (zone.track.title ? `${zone.track.title}${zone.track.artist ? ' · ' + zone.track.artist : ''}` : 'Kein aktueller Titel'));
     const controls = el('div', 'controls');
     for (const [icon, label, action] of [['▶','Play','play'], ['Ⅱ','Pause','pause'], ['■','Stopp','stop']]) {
-      const button = el('button', null, `${icon} ${label}`); button.disabled = Boolean(zone.error);
+      const button = el('button', action === 'play' ? 'stacked-play' : null);
+      if (action === 'play') button.append(el('span', 'play-icon', icon), el('span', null, label));
+      else button.textContent = `${icon} ${label}`;
+      button.disabled = Boolean(zone.error);
       button.onclick = () => act(`/api/zones/${encodeURIComponent(zone.uid)}/transport`, 'POST', {action}); controls.append(button);
     }
     const volume = el('label', null, `Lautstärke: ${zone.volume ?? '–'}`), slider = el('input');

app/static/style.css

@@ -117,6 +117,16 @@ button:hover, button:focus {
 }
 
 .controls button { flex: 1; }
+.controls .stacked-play {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1px;
+  line-height: 1;
+}
+
+.play-icon { line-height: 1; }
 .danger { color: var(--danger); }
 
 .eq-controls {