From ca703ab3558d96fe270ef93085a4bcee6b0ac360 Mon Sep 17 00:00:00 2001
From: human insan <insan@human.org>
Date: Thu, 27 Aug 2026 23:20:19 +0100
Subject: [PATCH] Align responsive player controls

---
 index.html | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 1cbde07..ba51b50 100644
--- a/index.html
+++ b/index.html
@@ -44,11 +44,11 @@
     .scrub:hover .scrub-hover { display: block; }
 
     /* control row */
-    .ctrl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-    .ctrl-row button { background: none; border: none; color: #fff; cursor: pointer; padding: 4px; border-radius: 50%; display: grid; place-items: center; }
+    .ctrl-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
+    .ctrl-row button { width: 30px; height: 30px; flex: 0 0 30px; background: none; border: none; color: #fff; cursor: pointer; padding: 4px; border-radius: 50%; display: grid; place-items: center; }
     .ctrl-row button:hover { background: rgba(255,255,255,.15); }
     .ctrl-row svg { width: 22px; height: 22px; fill: currentColor; }
-    .time-label { font-size: 13px; color: #ddd; font-variant-numeric: tabular-nums; margin-left: 4px; user-select: none; }
+    .time-label { font-size: 13px; color: #ddd; font-variant-numeric: tabular-nums; margin-left: 4px; user-select: none; white-space: nowrap; }
     .spacer { flex: 1; }
     .vol-wrap { display: flex; align-items: center; gap: 4px; }
     .vol-wrap input { width: 0; opacity: 0; transition: width .2s, opacity .2s; accent-color: #fff; }
@@ -100,10 +100,12 @@
 
     @media (max-width: 600px) {
       .page { padding: 8px; }
-      .ctrl-row { gap: 4px; }
-      .ctrl-row button { min-width: 36px; min-height: 34px; }
+      .ctrl-row { gap: 3px; }
+      .ctrl-row button { width: 32px; height: 32px; flex-basis: 32px; }
       .ctrl-row svg { width: 20px; height: 20px; }
       .time-label { font-size: 11px; }
+      .ctrl-row .spacer { display: none; }
+      .vol-wrap input { width: 54px; opacity: 1; }
       .hours span:nth-child(even) { display: none; }
     }
   </style>