From 4becf5261644fb1be15455550c13780d5053a451 Mon Sep 17 00:00:00 2001
From: Tom Ernst <tom@citr.one>
Date: Sat, 12 Sep 2026 00:08:39 +0200
Subject: [PATCH] [verified] style: stack Play button label

---
 app/static/app.js    |  5 ++++-
 app/static/style.css | 10 ++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/static/app.js b/app/static/app.js
index f2a41fb..fc6b4b4 100644
--- a/app/static/app.js
+++ b/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');
diff --git a/app/static/style.css b/app/static/style.css
index 3dd13c8..8c8d599 100644
--- a/app/static/style.css
+++ b/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 {
-- 
2.54.0