fix(0.3.2): play-button glyph baseline — drop dashicon for Unicode ▶ / ‖

The dashicon used for the play/pause icon was rendering visibly below
the button text — dashicon font metrics sit the glyph low inside its
own box, so even with `inline-flex` centering the symbol looked like
it was on a separate row from the word "Play".

Swap dashicons-controls-play / dashicons-controls-pause for plain
Unicode glyphs (▶ / ‖) which render on the text baseline like any
other character. Flex container changed to align-items: baseline.
font-variant-emoji: text on the glyph span to keep platforms that
might otherwise pick up an emoji variant of ▶ as monochrome text.

Files: radio.php (version), inc/admin-page.php +
inc/dashboard-widget.php (dashicon span → glyph span),
assets/css/radio.css (drop dashicon-sizing rule, add
.radio-player__play-glyph, baseline alignment),
assets/js/radio.js (setPlayIcon swaps glyph textContent instead of
dashicon className), inc/about.php (history entry).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

CHANGELOG.md

@@ -9,6 +9,36 @@ Format: [Keep a Changelog 1.1.0](https://keepachangelog.com/en/1.1.0/) — versi
 
 ---
 
+## [0.3.2] — 2026-05-29 — Play-button glyph baseline fix
+
+The dashicon used for the play/pause icon was rendering visibly below the button text baseline — the dashicon font sits the glyph low inside its own box, and even with `inline-flex` centering the result looked like the symbol was on a separate row from the word "Play".
+
+### Fixed
+- **Play/pause icon now sits on the text baseline.** Swapped the dashicon (`dashicons-controls-play` / `dashicons-controls-pause`) for a plain Unicode glyph (▶ / ‖) which renders on the text baseline like any other character.
+- Flex container changed from `align-items: center` to `align-items: baseline` for the same reason.
+- `font-variant-emoji: text` set so platforms that might otherwise pick up a colour-emoji variant for ▶ keep it as monochrome text.
+
+**Files changed:** `radio.php` (version), `inc/admin-page.php` + `inc/dashboard-widget.php` (dashicon span → glyph span), `assets/css/radio.css` (drop the dashicon-sizing rule, add `.radio-player__play-glyph` styling, change play-button flex alignment to baseline), `assets/js/radio.js` (`setPlayIcon` now swaps glyph `textContent` instead of dashicon `className`), `inc/about.php` (history entry).
+
+---
+
+## [0.3.1] — 2026-05-29 — My Radio layout polish + drop dark-auto
+
+Quick patch after a real-screen review of the My Radio admin page. v0.3.0 added a lot of features but stretched the player to fill the full admin width and — embarrassingly — introduced a real contrast bug via the dark-auto CSS.
+
+### Fixed
+- **Dropped `@media (prefers-color-scheme: dark)` for `theme=auto`.** WordPress admin has no native dark mode, so when the OS was dark, our dark text rendered on the still-white WP postbox = unreadable. `auto` now behaves as light (matching WP's actual scheme); `dark` is still available as an explicit choice.
+- **`theme=dark` now actually reads.** The player surface goes dark (`#1d2327` background + subtle border + padding) so the light text has somewhere to sit, instead of fighting the white WP postbox.
+- **Player no longer stretches edge-to-edge.** `.radio-wrap { max-width: 880px; }` keeps the player a focused settings-page card.
+- **Intro paragraph one-line on normal widths.** Removed the `max-width: 720px` cap that was forcing the wrap.
+- **Volume slider no longer dominates the row.** Fixed width 220px (`flex: 0 0 auto`) — the percent label now sits next to the slider instead of pinned to the far right edge.
+- **Station dropdown** capped at 360px (was full-width) — typical WP form-control width.
+- **Play button icon** shrunk from 18px to 14px so the ▶ glyph sits on the button-text baseline instead of looking like a separate row.
+
+**Files changed:** `radio.php` (version), `assets/css/radio.css` (wrap width, intro, play icon, volume, station-select, dark-auto block deleted, dark-surface added), `inc/about.php` (history entry).
+
+---
+
 ## [0.3.0] — 2026-05-29 — Dark theme + mute + media keys + current-track display
 
 A polish pass that closes the gaps surfaced by a UI review. Two categories: **2nd-look fixes** (things the previous release implied but didn't actually deliver) and **nice-to-haves** (small upgrades that lift the admin-player feel).

assets/css/radio.css

@@ -80,25 +80,31 @@
 }
 
 .radio-player__play {
-    /* native .button .button-primary styling; just ensure icon aligns */
+    /* native .button .button-primary styling; just ensure glyph aligns */
     display: inline-flex !important;
-    align-items: center;
+    align-items: baseline;
     gap: 6px;
 }
 
-.radio-player__play .dashicons {
+/* Unicode play/pause glyph (not a dashicon — those sit low inside their
-    font-size: 18px;
+   own font box and look like they're below the text baseline). A plain
-    width: 18px;
+   ▶ / ‖ glyph renders on the text baseline like any other character. */
-    height: 18px;
+.radio-player__play-glyph {
+    display: inline-block;
+    font-size: 11px;
     line-height: 1;
+    /* Coerce to text rendering rather than colour-emoji on systems that
+       might otherwise pick up an emoji variant for ▶ / ‖. */
+    font-variant-emoji: text;
+    font-family: "Helvetica Neue", Arial, sans-serif;
 }
 
 .radio-player__volume {
     display: flex;
     align-items: center;
     gap: 8px;
-    flex: 1;
+    flex: 0 0 auto;
-    min-width: 200px;
+    width: 220px;
 }
 
 .radio-player__volume .dashicons {
@@ -160,7 +166,7 @@
 
 .radio-player__station-select select {
     width: 100%;
-    max-width: 100%;
+    max-width: 360px;
 }
 
 /* Error notice — uses WP notice styling */
@@ -195,9 +201,15 @@
 }
 
 /* ──────────────────────────────────────────────────────────────────
- * Main admin page — wrap player in a postbox-like card
+ * Main admin page — wrap player in a postbox-like card.
+ * Constrained max-width keeps the player a focused settings-page card
+ * instead of stretching to fill the full admin width.
  * ─────────────────────────────────────────────────────────────── */
 
+.radio-wrap {
+    max-width: 880px;
+}
+
 .radio-wrap .radio-player {
     margin-top: 4px;
 }
@@ -206,7 +218,6 @@
     margin: 0 0 16px;
     color: #50575e;
     font-size: 13px;
-    max-width: 720px;
 }
 
 /* ──────────────────────────────────────────────────────────────────
@@ -366,27 +377,12 @@
     border-top-color: #3c434a;
 }
 
-/* Auto — same dark rules behind prefers-color-scheme. Duplicated rather
+/* Give the player its own dark surface when theme=dark so the dark text
-   than nested in @media-inside-selector (CSS doesn't allow that), kept
+   has something to read against — WP postboxes don't follow our dark
-   line-for-line in sync with the .radio-theme-dark block above. */
+   choice, so without this the light text would sit on white. */
-@media (prefers-color-scheme: dark) {
+.radio-theme-dark .radio-player {
-    .radio-theme-auto .radio-player__now { border-bottom-color: #3c434a; }
+    background: #1d2327;
-    .radio-theme-auto .radio-player__station-name { color: #f0f0f1; }
+    padding: 14px 16px;
-    .radio-theme-auto .radio-player__label,
+    border-radius: 3px;
-    .radio-theme-auto .radio-player__station-genre,
+    border: 1px solid #3c434a;
-    .radio-theme-auto .radio-player__volume-pct,
-    .radio-theme-auto .radio-player__credit,
-    .radio-theme-auto .radio-player__mute,
-    .radio-theme-auto .radio-player__station-select label,
-    .radio-theme-auto .radio-player__volume .dashicons { color: #a7aaad; }
-    .radio-theme-auto .radio-player__mute:hover { color: #f0f0f1; }
-    .radio-theme-auto .radio-player__mute--muted { color: #ff8b8b; }
-    .radio-theme-auto .radio-player__station-desc,
-    .radio-theme-auto .radio-player__track,
-    .radio-theme-auto .radio-intro { color: #c3c4c7; }
-    .radio-theme-auto .radio-player__station-genre { background: rgba(255, 255, 255, 0.08); }
-    .radio-theme-auto .radio-player__error { background: rgba(179, 45, 46, 0.18); color: #ff9b9b; }
-    .radio-theme-auto .radio-about-card { background: #1d2327; border-color: #3c434a; color: #c3c4c7; }
-    .radio-theme-auto .radio-about-card h2 { background: #2c3338; color: #f0f0f1; border-bottom-color: #3c434a; }
-    .radio-theme-auto #radio_dashboard_widget .radio-player__credit { border-top-color: #3c434a; }
 }

assets/js/radio.js

@@ -68,11 +68,13 @@
         });
     }
 
-    /** Update play/pause button icon + label to reflect current audio state. */
+    /** Update play/pause button glyph + label to reflect current audio state.
+     *  v0.3.2: switched from .dashicons to a Unicode glyph so the symbol sits
+     *  on the text baseline instead of below it. */
     function setPlayIcon(btn, playing) {
-        var icon  = btn.querySelector('.dashicons');
+        var glyph = btn.querySelector('[data-radio-play-glyph]');
         var label = btn.querySelector('[data-radio-play-label]');
-        if (icon)  { icon.className  = 'dashicons ' + (playing ? 'dashicons-controls-pause' : 'dashicons-controls-play'); }
+        if (glyph) { glyph.textContent = playing ? '‖' : '▶'; } // ‖ or ▶
         if (label) { label.textContent = playing ? (cfg.strings.pause || 'Pause') : (cfg.strings.play || 'Play'); }
         btn.setAttribute('title', playing ? (cfg.strings.pause || 'Pause') : (cfg.strings.play || 'Play'));
     }

inc/about.php

@@ -48,8 +48,16 @@ function radio_render_about_page() {
                 <h2><?php esc_html_e( 'Version history', 'radio' ); ?></h2>
                 <ul>
                     <li>
-                        <span class="ver">v0.3.0</span> &mdash; 29 May 2026 <span class="latest">latest</span><br>
+                        <span class="ver">v0.3.2</span> &mdash; 29 May 2026 <span class="latest">latest</span><br>
-                        <?php esc_html_e( 'Dark theme actually wired through (auto / light / dark — auto follows OS prefers-color-scheme). Mute toggle on the speaker icon. OS media keys (F8 / headphone buttons / lock-screen) play and pause via MediaSession. Current track polled from SomaFM and shown under the station description while playing. Save errors surface as a brief notice instead of being swallowed. Genre badge restyled as an inline pill.', 'radio' ); ?>
+                        <?php esc_html_e( 'Play-button glyph baseline fix. The dashicon used for play/pause was rendering below the button text. Swapped to a plain Unicode glyph (▶ / ‖) that sits on the text baseline like any other character.', 'radio' ); ?>
+                    </li>
+                    <li>
+                        <span class="ver">v0.3.1</span> &mdash; 29 May 2026<br>
+                        <?php esc_html_e( 'My Radio layout polish + dropped dark-auto. Player no longer stretches edge-to-edge (max-width 880px); volume slider fixed width so the % label sits next to it; station dropdown capped at 360px; play-button icon shrunk to match the button text baseline; intro paragraph now fits one line. Removed the prefers-color-scheme dark-auto behaviour that was unreadable against WordPress\'s still-white postbox; theme=dark is still available as an explicit choice and now gives the player its own dark surface so it actually reads.', 'radio' ); ?>
+                    </li>
+                    <li>
+                        <span class="ver">v0.3.0</span> &mdash; 29 May 2026<br>
+                        <?php esc_html_e( 'Dark theme wired through. Mute toggle on the speaker icon. OS media keys (F8 / headphone buttons / lock-screen) play and pause via MediaSession. Current track polled from SomaFM and shown under the station description while playing. Save errors surface as a brief notice instead of being swallowed. Genre badge restyled as an inline pill.', 'radio' ); ?>
                     </li>
                     <li>
                         <span class="ver">v0.2.0</span> &mdash; 26 May 2026<br>

inc/admin-page.php

@@ -50,7 +50,7 @@ function radio_render_main_page() {
 
                     <div class="radio-player__controls">
                         <button type="button" class="button button-primary radio-player__play" data-radio-play>
-                            <span class="dashicons dashicons-controls-play" aria-hidden="true"></span>
+                            <span class="radio-player__play-glyph" data-radio-play-glyph aria-hidden="true">&#9654;</span>
                             <span data-radio-play-label><?php esc_html_e( 'Play', 'radio' ); ?></span>
                         </button>
 

inc/dashboard-widget.php

@@ -43,7 +43,7 @@ function radio_render_dashboard_widget() {
 
         <div class="radio-player__controls">
             <button type="button" class="button button-primary radio-player__play" data-radio-play>
-                <span class="dashicons dashicons-controls-play" aria-hidden="true"></span>
+                <span class="radio-player__play-glyph" data-radio-play-glyph aria-hidden="true">&#9654;</span>
                 <span data-radio-play-label><?php esc_html_e( 'Play', 'radio' ); ?></span>
             </button>
 

radio.php

@@ -5,7 +5,7 @@
  * Plugin Name: Radio
  * Plugin URI:  https://icanhelp.ie/radio
  * Description: A small, focused, free radio player for your WordPress admin. 44 SomaFM stations grouped by 10 genres — ambient, electronic, lounge, rock, metal, jazz, world, reggae, holiday, specials. Plays via HTML5 audio; volume + station choice persist per-user.
- * Version:     0.3.0
+ * Version:     0.3.2
  * Requires at least: 5.0
  * Requires PHP: 7.4
  * Author:      David Keane
@@ -20,7 +20,7 @@
 if ( ! defined( 'ABSPATH' ) ) { exit; }
 
 // Plugin coordinates.
-if ( ! defined( 'RADIO_VERSION' ) )   { define( 'RADIO_VERSION',   '0.3.0' ); }
+if ( ! defined( 'RADIO_VERSION' ) )   { define( 'RADIO_VERSION',   '0.3.2' ); }
 if ( ! defined( 'RADIO_FILE' ) )      { define( 'RADIO_FILE',      __FILE__ ); }
 if ( ! defined( 'RADIO_PATH' ) )      { define( 'RADIO_PATH',      plugin_dir_path( __FILE__ ) ); }
 if ( ! defined( 'RADIO_URL' ) )       { define( 'RADIO_URL',       plugin_dir_url( __FILE__ ) ); }