fix(0.6.1): About page restructure — balance the layout

By v0.6.0 the About page had eight version-history entries, each a
full paragraph, dwarfing the other cards and pushing Credits + thanks
off the visible area.

- Three short cards on top (What / Who / Credits) — equal-height,
  balanced row. Credits gets equal billing instead of being a fourth
  card buried under a wall of version notes.
- Version history is its own full-width card below. Only the latest
  release is shown in full; earlier releases collapse to one line
  each. The card now stays compact however many versions ship —
  adding a future release adds one line, not a paragraph.
- Full prose for older versions lives in CHANGELOG.md on Gitea via
  the existing "View the full CHANGELOG.md →" link. Single source of
  truth.

Files: radio.php (version), inc/about.php (3-card top + new
.radio-about-versions block with __latest / __earlier sub-elements;
9 versions in the earlier-releases list incl. v0.1.0),
assets/css/radio.css (drop dead .radio-about-card--versions rules;
add .radio-about-versions + __latest + __earlier; dark-theme overrides).

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

CHANGELOG.md

@@ -9,6 +9,19 @@ Format: [Keep a Changelog 1.1.0](https://keepachangelog.com/en/1.1.0/) — versi
 
 ---
 
+## [0.6.1] — 2026-05-30 — About page restructure
+
+By v0.6.0 the About page had eight version-history entries, each a full paragraph, dwarfing the other cards and pushing Credits + thanks off the visible area. v0.6.1 rebalances the layout.
+
+### Changed
+- **Three short cards on top** (What / Who / **Credits**) — equal-height, balanced row. Credits is no longer a fourth card buried under the version history; it sits beside What and Who where it belongs.
+- **Version history is its own full-width card below.** Only the **latest** release is shown in full; **earlier releases collapse to one line each** (version + date + headline). The card now stays compact however many versions ship — adding a future release adds one line, not a paragraph.
+- **Full prose for older versions lives in `CHANGELOG.md` on Gitea** — the "View the full CHANGELOG.md →" link does the heavy lifting. Single source of truth, no duplication.
+
+**Files changed:** `radio.php` (version), `inc/about.php` (3-card top + new `.radio-about-versions` block with `__latest` / `__earlier` sub-elements; 9 versions in the earlier-releases list incl. v0.1.0), `assets/css/radio.css` (removed dead `.radio-about-card--versions` rules; added `.radio-about-versions` + `__latest` + `__earlier` rules; dark-theme overrides for the new selectors).
+
+---
+
 ## [0.6.0] — 2026-05-30 — Pop-out mini-player (continuous background play)
 
 Until v0.5.0 the audio cut every time you navigated between WP admin pages — every navigation is a full page reload, which destroys the `<audio>` element. v0.6.0 fixes the background-music use case by letting you pop the player out into a separate browser window that persists across the parent tab's navigation.

assets/css/radio.css

@@ -359,27 +359,50 @@
     padding-top: 0;
 }
 
-.radio-about-card--versions ul {
+.radio-about-changelog-link {
-    list-style: none;
+    display: inline-block;
-    padding: 12px;
+    margin: 0 12px 12px;
-    margin: 0;
+    font-size: 13px;
+    color: var(--wp-admin-theme-color, #2271b1);
+    text-decoration: none;
+}
+.radio-about-changelog-link:hover { text-decoration: underline; }
+
+/* ──────────────────────────────────────────────────────────────────
+ * Version history — full-width card BELOW the top row of cards
+ * (v0.6.1). Latest release shown in full; earlier releases collapse
+ * to one line each so the card stays compact however many versions
+ * ship. Full prose for older versions lives in the CHANGELOG on Gitea.
+ * ─────────────────────────────────────────────────────────────── */
+
+.radio-about-versions {
+    max-width: 1100px;
+    margin-top: 16px;
+    background: #fff;
+    border: 1px solid #c3c4c7;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
 }
 
-.radio-about-card--versions li {
+.radio-about-versions h2 {
-    margin-bottom: 10px;
+    margin: 0;
+    padding: 8px 12px;
+    font-size: 14px;
+    font-weight: 600;
+    background: #f6f7f7;
+    border-bottom: 1px solid #c3c4c7;
+}
+
+.radio-about-versions__latest {
+    padding: 12px 12px 8px;
+}
+
+.radio-about-versions__latest .ver {
+    font-weight: 600;
+    color: var(--wp-admin-theme-color, #2271b1);
     font-size: 13px;
 }
 
-.radio-about-card--versions li:last-child {
+.radio-about-versions__latest .latest {
-    margin-bottom: 0;
-}
-
-.radio-about-card--versions .ver {
-    font-weight: 600;
-    color: var(--wp-admin-theme-color, #2271b1);
-}
-
-.radio-about-card--versions .latest {
     display: inline-block;
     margin-left: 6px;
     padding: 1px 7px;
@@ -391,16 +414,47 @@
     vertical-align: middle;
 }
 
-.radio-about-changelog-link {
+.radio-about-versions__latest p {
-    display: inline-block;
+    margin: 6px 0 0;
-    margin: 0 12px 12px;
     font-size: 13px;
-    color: var(--wp-admin-theme-color, #2271b1);
+    color: #1d2327;
-    text-decoration: none;
 }
 
-.radio-about-changelog-link:hover {
+.radio-about-versions h3 {
-    text-decoration: underline;
+    margin: 4px 0 0;
+    padding: 8px 12px 4px;
+    font-size: 11px;
+    font-weight: 600;
+    color: #646970;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    border-top: 1px solid #f0f0f1;
+}
+
+.radio-about-versions__earlier {
+    list-style: none;
+    margin: 0;
+    padding: 4px 12px 8px;
+}
+
+.radio-about-versions__earlier li {
+    padding: 4px 0;
+    font-size: 13px;
+    color: #50575e;
+}
+
+.radio-about-versions__earlier .ver {
+    display: inline-block;
+    min-width: 48px;
+    font-weight: 600;
+    color: var(--wp-admin-theme-color, #2271b1);
+}
+
+.radio-about-versions__earlier .ver-date {
+    display: inline-block;
+    min-width: 110px;
+    font-size: 11px;
+    color: #646970;
 }
 
 /* ──────────────────────────────────────────────────────────────────
@@ -450,6 +504,12 @@
     color: #f0f0f1;
     border-bottom-color: #3c434a;
 }
+.radio-theme-dark .radio-about-versions { background: #1d2327; border-color: #3c434a; color: #c3c4c7; }
+.radio-theme-dark .radio-about-versions h2 { background: #2c3338; color: #f0f0f1; border-bottom-color: #3c434a; }
+.radio-theme-dark .radio-about-versions h3 { color: #a7aaad; border-top-color: #3c434a; }
+.radio-theme-dark .radio-about-versions__latest p { color: #c3c4c7; }
+.radio-theme-dark .radio-about-versions__earlier li { color: #c3c4c7; }
+.radio-theme-dark .radio-about-versions__earlier .ver-date { color: #a7aaad; }
 .radio-theme-dark #radio_dashboard_widget .radio-player__credit {
     border-top-color: #3c434a;
 }

inc/about.php

@@ -2,9 +2,12 @@
 /**
  * Radio — About page (WP Admin → Radio → About).
  *
- * Plain-language explanation of what the plugin does + version
+ * Top row: three short cards (What / Who / Credits) — equal-height,
- * history + link to the CHANGELOG.md on Gitea. Pattern mirrors
+ * balanced layout. Below: a full-width Version history card with the
- * a-buddy/inc/about.php.
+ * latest release shown in full and earlier releases as a one-line
+ * summary list, capped by a link to the full CHANGELOG on Gitea.
+ *
+ * Pattern mirrors a-buddy/inc/about.php.
  */
 
 if ( ! defined( 'ABSPATH' ) ) { exit; }
@@ -19,6 +22,7 @@ function radio_render_about_page() {
     <div class="wrap radio-about-wrap">
         <h1><?php esc_html_e( 'About Radio', 'radio' ); ?></h1>
 
+        <!-- ── Top row: three short cards (What / Who / Credits) ── -->
         <div class="radio-about-grid">
 
             <div class="radio-about-card">
@@ -44,49 +48,6 @@ function radio_render_about_page() {
                 </p>
             </div>
 
-            <div class="radio-about-card radio-about-card--versions">
-                <h2><?php esc_html_e( 'Version history', 'radio' ); ?></h2>
-                <ul>
-                    <li>
-                        <span class="ver">v0.6.0</span> &mdash; 30 May 2026 <span class="latest">latest</span><br>
-                        <?php esc_html_e( 'Pop-out mini-player. A small "↗ Pop out" button next to Play opens the player in its own 380×560 window. The popup persists across the main tab\'s navigation, so the music keeps playing while you click around Plugins / Posts / Users. The popup auto-resumes where the main tab left off, pauses the main-tab audio so you don\'t double-stream, and uses the same state + history + favourites as everywhere else.', 'radio' ); ?>
-                    </li>
-                    <li>
-                        <span class="ver">v0.5.0</span> &mdash; 29 May 2026<br>
-                        <?php esc_html_e( 'Track history + favourites. Every track that scrolls past in the player is now quietly logged to your personal Radio → History page (capped at 500), with a star toggle to keep the good ones forever in a separate Favourites tab. Each row has four search links (Spotify / YouTube / Apple Music / Bandcamp) so you can find that track on whichever service you use. Filter by station, search by artist or title, clear history with a button. Per-user, nothing leaves your site.', 'radio' ); ?>
-                    </li>
-                    <li>
-                        <span class="ver">v0.4.0</span> &mdash; 29 May 2026<br>
-                        <?php esc_html_e( 'Now-playing visual indicator. Four tiny dancing bars next to "Now Playing" pulse while the audio is playing (pure CSS, always works). On top of that, a Web Audio frequency visualizer tries to draw live frequency bars on a small canvas — if the browser allows it and the stream is CORS-friendly it kicks in automatically; if not, the CSS bars stay and nothing breaks.', 'radio' ); ?>
-                    </li>
-                    <li>
-                        <span class="ver">v0.3.2</span> &mdash; 29 May 2026<br>
-                        <?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>
-                        <?php esc_html_e( 'UI rebuilt to WordPress admin standards. Postbox container, native Play/Pause button with text label, picks up your admin colour scheme via var(--wp-admin-theme-color), genre badge moved inline, dashboard widget no longer renders a card-inside-a-card. Functionality identical to v0.1.0 — purely visual polish.', 'radio' ); ?>
-                    </li>
-                    <li>
-                        <span class="ver">v0.1.0</span> &mdash; 26 May 2026<br>
-                        <?php esc_html_e( 'First release. 44 SomaFM stations grouped by 10 genres, dashboard widget + dedicated admin page, per-user state in user_meta, self-hosted update checker against Gitea. Direct HTML5 audio playback — no proxy, no build step, no tracking.', 'radio' ); ?>
-                    </li>
-                </ul>
-                <a class="radio-about-changelog-link"
-                   href="<?php echo esc_url( RADIO_GITEA_URL . '/src/branch/main/CHANGELOG.md' ); ?>"
-                   target="_blank" rel="noopener">
-                    <?php esc_html_e( 'View the full CHANGELOG.md →', 'radio' ); ?>
-                </a>
-            </div>
-
             <div class="radio-about-card">
                 <h2><?php esc_html_e( 'Credits + thanks', 'radio' ); ?></h2>
                 <p>
@@ -106,7 +67,38 @@ function radio_render_about_page() {
                 </p>
             </div>
 
+        </div><!-- /.radio-about-grid -->
+
+        <!-- ── Version history: latest in full, earlier as one-liners ── -->
+        <div class="radio-about-versions">
+            <h2><?php esc_html_e( 'Version history', 'radio' ); ?></h2>
+
+            <div class="radio-about-versions__latest">
+                <span class="ver">v0.6.1</span> &mdash; 30 May 2026 <span class="latest"><?php esc_html_e( 'latest', 'radio' ); ?></span>
+                <p>
+                    <?php esc_html_e( 'About page restructure. Three short cards on top (What / Who / Credits) now balance the layout; Credits gets equal billing instead of being pushed off the bottom. Version history is its own full-width card below — only the latest release is shown in full; earlier releases collapse to one line each so the card stays compact however many versions ship. Full prose for older versions lives in the CHANGELOG on Gitea.', 'radio' ); ?>
+                </p>
+            </div>
+
+            <h3><?php esc_html_e( 'Earlier releases', 'radio' ); ?></h3>
+            <ul class="radio-about-versions__earlier">
+                <li><span class="ver">v0.6.0</span> <span class="ver-date">30 May 2026</span> &mdash; <?php esc_html_e( 'Pop-out mini-player — continuous background play across admin navigation', 'radio' ); ?></li>
+                <li><span class="ver">v0.5.0</span> <span class="ver-date">29 May 2026</span> &mdash; <?php esc_html_e( 'Track history + favourites (Spotify / YouTube / Apple Music / Bandcamp search links)', 'radio' ); ?></li>
+                <li><span class="ver">v0.4.0</span> <span class="ver-date">29 May 2026</span> &mdash; <?php esc_html_e( 'Now-playing indicator — dancing bars + Web Audio frequency visualizer', 'radio' ); ?></li>
+                <li><span class="ver">v0.3.2</span> <span class="ver-date">29 May 2026</span> &mdash; <?php esc_html_e( 'Play-button glyph baseline fix (dashicon → Unicode ▶ / ‖)', 'radio' ); ?></li>
+                <li><span class="ver">v0.3.1</span> <span class="ver-date">29 May 2026</span> &mdash; <?php esc_html_e( 'My Radio layout polish + dropped dark-auto', 'radio' ); ?></li>
+                <li><span class="ver">v0.3.0</span> <span class="ver-date">29 May 2026</span> &mdash; <?php esc_html_e( 'Dark theme + mute + OS media keys + SomaFM current-track display', 'radio' ); ?></li>
+                <li><span class="ver">v0.2.0</span> <span class="ver-date">26 May 2026</span> &mdash; <?php esc_html_e( 'UI rebuilt to WordPress admin standards', 'radio' ); ?></li>
+                <li><span class="ver">v0.1.0</span> <span class="ver-date">26 May 2026</span> &mdash; <?php esc_html_e( 'First release — 44 SomaFM stations, dashboard widget + dedicated admin page, per-user state, self-hosted Gitea updater', 'radio' ); ?></li>
+            </ul>
+
+            <a class="radio-about-changelog-link"
+               href="<?php echo esc_url( RADIO_GITEA_URL . '/src/branch/main/CHANGELOG.md' ); ?>"
+               target="_blank" rel="noopener">
+                <?php esc_html_e( 'View the full CHANGELOG.md →', 'radio' ); ?>
+            </a>
         </div>
+
     </div>
     <?php
 }

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.6.0
+ * Version:     0.6.1
  * 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.6.0' ); }
+if ( ! defined( 'RADIO_VERSION' ) )   { define( 'RADIO_VERSION',   '0.6.1' ); }
 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__ ) ); }