From b4c816b0dee1d247988d60e836ba24030a26b542 Mon Sep 17 00:00:00 2001
From: Jan Svabenik <jan@svabi.ch>
Date: Thu, 28 May 2026 19:26:03 +0200
Subject: [PATCH] fix(ui): center button text via text-align + line-height
 (drop flex on buttons)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

text-align:center had no effect because display:flex makes the button text
an anonymous flex item, centered only by justify-content -- which is the
exact property broken for <button> on iOS 9. Removed flexbox from .btn
entirely and switched to text-align (horizontal) + per-variant line-height
(vertical). Single-line only, but reliable on every browser including iOS 9.

Also bumped legacy symbol sizes per feedback: <</>> 30px, ■/► 40px,
vol/mut 18px, PL 20px.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/static/app.js    | 16 ++++++++--------
 web/static/style.css | 27 +++++++++++++--------------
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/web/static/app.js b/web/static/app.js
index c4b8cce..4707062 100644
--- a/web/static/app.js
+++ b/web/static/app.js
@@ -256,7 +256,7 @@ function updateVolumeFill(muted) {
 }
 function updateMuteBtn(muted) {
   btnMute.textContent = muted ? SYM.volOff : SYM.volOn;
-  if (isLegacyIOS) { btnMute.style.fontSize = '16px'; btnMute.style.fontWeight = 'bold'; }
+  if (isLegacyIOS) { btnMute.style.fontSize = '18px'; btnMute.style.fontWeight = 'bold'; }
   btnMute.classList.toggle('muted', muted);
 }
 
@@ -575,17 +575,17 @@ function legacySym(id, text, size) {
 // Replace emoji with legacy symbols on iOS 9 where the glyphs are missing.
 if (isLegacyIOS) {
   // Transport controls (btn-h = 64px):
-  //   two-char symbols (<<, >>) → 26px bold; single-char (■ ▶) → 36px bold.
-  legacySym('btn-prev', SYM.prev, '26px');
-  legacySym('btn-play', SYM.play, '36px');
-  legacySym('btn-stop', SYM.stop, '36px');
-  legacySym('btn-next', SYM.next, '26px');
+  //   two-char symbols (<<, >>) → 30px bold; single-char (■ ►) → 40px bold.
+  legacySym('btn-prev', SYM.prev, '30px');
+  legacySym('btn-play', SYM.play, '40px');
+  legacySym('btn-stop', SYM.stop, '40px');
+  legacySym('btn-next', SYM.next, '30px');
 
   // Volume mute (48px tall)
-  legacySym('btn-mute', SYM.volOn, '16px');
+  legacySym('btn-mute', SYM.volOn, '18px');
 
   // Playlist action button (52px tall)
-  legacySym('btn-show-playlist', SYM.playlist, '18px');
+  legacySym('btn-show-playlist', SYM.playlist, '20px');
 
   // Kill button: drop the emoji, keep the label
   $('btn-kill').textContent = SYM.skip + ' Überspringen';
diff --git a/web/static/style.css b/web/static/style.css
index ea36912..528f8fb 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -129,6 +129,10 @@ html, body {
 }
 
 /* Buttons base */
+/* No flexbox here: on iOS 9 a <button> with display:flex ignores
+   justify-content, leaving text left-aligned. Classic text-align (horizontal)
+   + line-height (vertical) centering is single-line only but works on every
+   browser. line-height is set per variant to match each button's height. */
 .btn {
   background: var(--surface);
   color: var(--text);
@@ -138,15 +142,9 @@ html, body {
   cursor: pointer;
   -webkit-transition: background 0.15s, -webkit-transform 0.08s;
   transition: background 0.15s, transform 0.08s;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-align-items: center;
-  align-items: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  /* Fallback for iOS 9: <button> ignores justify-content on flex,
-     so center the text the old-fashioned way too. */
   text-align: center;
+  white-space: nowrap;
+  padding: 0;
   touch-action: manipulation;
 }
 .btn:active { -webkit-transform: scale(0.93); transform: scale(0.93); background: var(--accent2); }
@@ -176,6 +174,7 @@ html, body {
 
 .btn-seek {
   height: 52px;
+  line-height: 52px;
   font-size: 14px;
   font-weight: 600;
 }
@@ -203,7 +202,7 @@ html, body {
   #controls-row > .btn-ctrl + .btn-ctrl { margin-left: 0; }
 }
 
-.btn-ctrl { height: var(--btn-h); font-size: 28px; }
+.btn-ctrl { height: var(--btn-h); line-height: var(--btn-h); font-size: 28px; }
 .btn-play {
   background: var(--accent);
   font-size: 32px;
@@ -218,7 +217,7 @@ html, body {
   align-items: center;
 }
 #volume-row > * + * { margin-left: 10px; }
-.btn-vol { width: 48px; height: 48px; -webkit-flex-shrink: 0; flex-shrink: 0; font-size: 18px; }
+.btn-vol { width: 48px; height: 48px; line-height: 48px; -webkit-flex-shrink: 0; flex-shrink: 0; font-size: 18px; }
 #btn-mute { font-size: 22px; }
 #btn-mute.muted { color: var(--accent); }
 #volume-bar-wrap {
@@ -258,10 +257,10 @@ html, body {
   display: flex;
 }
 #killist-row > * + * { margin-left: 8px; }
-.btn-kill { -webkit-flex: 1; flex: 1; height: 52px; font-size: 16px; background: #3a1a1a; }
+.btn-kill { -webkit-flex: 1; flex: 1; height: 52px; line-height: 52px; font-size: 16px; background: #3a1a1a; }
 .btn-kill:active { background: var(--accent); }
-.btn-kill-list { width: 64px; height: 52px; font-size: 14px; }
-.btn-action   { width: 52px; height: 52px; font-size: 20px; }
+.btn-kill-list { width: 64px; height: 52px; line-height: 52px; font-size: 14px; }
+.btn-action   { width: 52px; height: 52px; line-height: 52px; font-size: 20px; }
 
 #killist-panel {
   background: var(--surface);
@@ -297,7 +296,7 @@ html, body {
   padding: 4px 10px;
   cursor: pointer;
 }
-#btn-close-killist { margin-top: 12px; width: 100%; height: 44px; font-size: 15px; }
+#btn-close-killist { margin-top: 12px; width: 100%; height: 44px; line-height: 44px; font-size: 15px; }
 
 /* ── Playlist overlay ────────────────────────────────────────────────────── */
 #playlist-overlay {