From 4d06fd460892d0284d2fe52c901fb6c26a3c5007 Mon Sep 17 00:00:00 2001
From: Jan Svabenik <jan@svabi.ch>
Date: Thu, 28 May 2026 19:21:24 +0200
Subject: [PATCH] fix(ui): iOS 9 button text centering + working play glyph
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two iPad 2 issues from screenshot:

1. Button text was left-aligned. On iOS 9 a <button> with display:flex
   ignores justify-content:center. Added text-align:center to .btn as a
   fallback (harmless when flex works).

2. Play symbol rendered as broken-glyph tofu. ▶ (U+25B6) gets emoji
   presentation which fails on iOS 9. Switched legacy play to ► (U+25BA),
   a text-presentation pointer in the same Geometric Shapes block as the
   ■ stop glyph that already renders fine. Canvas PLAY label now uses
   SYM.play too.

Modern browsers unaffected (still ▶ emoji, flex centering).

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

diff --git a/web/static/app.js b/web/static/app.js
index 1d6e0ec..c4b8cce 100644
--- a/web/static/app.js
+++ b/web/static/app.js
@@ -39,7 +39,7 @@ var isLegacyIOS = (function() {
 // Symbol set: modern emoji for capable browsers, plain text for iOS ≤ 9.
 var SYM = isLegacyIOS ? {
   prev:    '<<',
-  play:    '▶',   // U+25B6 — works on iOS 9
+  play:    '►',   // U+25BA — text-presentation pointer (▶ U+25B6 fails as broken emoji on iOS 9)
   pause:   '||',
   stop:    '■',   // U+25A0 — works on iOS 9
   next:    '>>',
@@ -437,7 +437,7 @@ function renderFrame(ts) {
   if (!ws || ws.readyState !== WebSocket.OPEN) {
     drawLabel(ctx2d, w, h, '● NO SIGNAL', '#333');
   } else if (!winampPlaying) {
-    drawLabel(ctx2d, w, h, '▶ PLAY', '#1a3a1a');
+    drawLabel(ctx2d, w, h, SYM.play + ' PLAY', '#1a3a1a');
   }
 }
 
diff --git a/web/static/style.css b/web/static/style.css
index b48e2bf..ea36912 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -144,6 +144,9 @@ html, body {
   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;
   touch-action: manipulation;
 }
 .btn:active { -webkit-transform: scale(0.93); transform: scale(0.93); background: var(--accent2); }