From 25a492d5ddc2bf06e19c30149f32096ff814052a Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Sat, 25 Apr 2026 20:19:37 +0300
Subject: [PATCH] ui(player): meaningful caps for tablet/small-desktop range +
 tighter footer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 720–1240 px viewport range was a "strange zone": below 1240 the layout
is single-column, but above 720 none of the Pocket Edition rules fire, so
the vinyl stage stretched to full content width (~1100 px) and the masthead
ran to a 1000 px+ measure on a small-desktop window.

Caps now degrade in three steps:
- ≤ 720 px: vinyl 460 px / 92% width (mobile hero unchanged)
- 721–1240 px: vinyl 480 px, masthead 640 px, both centered
- ≥ 1241 px: two-column layout (no caps needed; grid does it)

Also reduce the bottom dead space:
- footer margin-top 80 → 36, inner top padding 28 → 20
- .container bottom padding 140 → 64 (desktop) / 56 (mobile)

And a small mobile-volume fix in the same range:
- .controls flex-wrap nowrap → wrap so the vu-cluster can take its own row
- vu-cluster gets flex-basis 100 % (forces own row in the wrapping flexbox)
- volume-slider drops the max-width: 200 cap so it fills the row width
- vinyl-stage on mobile bumped 320 → 460 px / 78% → 92% width
---
 media_server/static/css/styles.css | 54 ++++++++++++++++++++++++------
 1 file changed, 44 insertions(+), 10 deletions(-)

diff --git a/media_server/static/css/styles.css b/media_server/static/css/styles.css
index 1dfc7f6..4cfb1c8 100644
--- a/media_server/static/css/styles.css
+++ b/media_server/static/css/styles.css
@@ -3993,11 +3993,11 @@ body.mini-player-visible footer {
 /* ─── Container & header ────────────────────────────────────── */
 .container {
     max-width: 1280px;
-    padding: 56px 48px 140px;
+    padding: 56px 48px 64px;
 }
 
 @media (max-width: 720px) {
-    .container { padding: 48px 18px 140px; }
+    .container { padding: 48px 18px 56px; }
 }
 
 /* ─── Folio marks (page corners, all tabs) ────────────────── */
@@ -4418,6 +4418,35 @@ header .brand-sub {
         grid-template-columns: 1fr;
         gap: 36px;
     }
+    /* Single-column hero sizing — prevents the vinyl stage from
+       growing to full content width (which becomes 800px+ on a
+       small-desktop or tablet-landscape window). */
+    .album-art-container.vinyl-stage {
+        max-width: 520px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    /* Cap the right-column copy so a short artist line and meta grid
+       don't sprawl across 1000px of measure. The masthead stays
+       flush-left under the vinyl, just narrower. */
+    .now-playing .track-masthead {
+        max-width: 720px;
+    }
+}
+
+@media (min-width: 721px) and (max-width: 1240px) {
+    /* In the 721–1240 zone the vinyl can be larger than on phone but
+       smaller than the full-column 800px+ default. */
+    .album-art-container.vinyl-stage {
+        max-width: 480px;
+    }
+    .now-playing .track-masthead {
+        max-width: 640px;
+        margin-left: auto;
+        margin-right: auto;
+        padding-right: 0;
+        text-align: left;
+    }
 }
 
 /* ─── Vinyl stage ──────────────────────────────────────────── */
@@ -6480,8 +6509,8 @@ dialog::backdrop {
    FOOTER (colophon)
    ═══════════════════════════════════════════════════════════════ */
 footer {
-    margin-top: 80px;
-    padding: 28px 0 0;
+    margin-top: 36px;
+    padding: 20px 0 0;
     border-top: 1px solid var(--rule-strong);
     background: transparent;
     font-family: var(--mono);
@@ -6870,6 +6899,7 @@ body.audio-spectrum-live .now-playing .spectrum span {
     border: 1px solid var(--rule-strong);
     color: var(--ink-soft);
     width: 48px; height: 48px;
+    flex-shrink: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -8414,10 +8444,10 @@ select option {
         margin-top: 4px !important;
     }
 
-    /* Vinyl stage: centered, capped at sensible touch size */
+    /* Vinyl stage: centered, generous on tablet/large-phone widths */
     .album-art-container.vinyl-stage {
-        max-width: 320px;
-        width: 78%;
+        max-width: 460px;
+        width: 92%;
         margin: 0 auto !important;
     }
     /* Lighter sleeve grain on phones so the printed art reads
@@ -8522,7 +8552,8 @@ select option {
     .player-layout .controls {
         justify-content: center !important;
         gap: 28px !important;
-        flex-wrap: nowrap !important;
+        flex-wrap: wrap !important;
+        row-gap: 0 !important;
     }
     .now-playing .controls .btn-trans,
     .player-layout .controls .btn-trans {
@@ -8538,7 +8569,9 @@ select option {
     .now-playing .controls .btn-trans.primary svg { width: 26px !important; height: 26px !important; }
 
     /* VU meter is decorative on a phone — hide it. Volume becomes
-       its own full-width hairline row beneath the controls. */
+       its own full-width hairline row beneath the controls.
+       flex-basis: 100% forces the cluster onto its own line in the
+       wrapping .controls flex container. */
     .now-playing .vu-cluster,
     .player-layout .vu-cluster {
         display: flex !important;
@@ -8546,6 +8579,7 @@ select option {
         align-items: center;
         justify-content: space-between;
         gap: 14px !important;
+        flex-basis: 100% !important;
         width: 100% !important;
         margin: 18px 0 0 0 !important;
         padding-top: 16px !important;
@@ -8575,7 +8609,7 @@ select option {
     .player-layout .vu-volume #volume-slider {
         flex: 1 1 auto !important;
         width: 100% !important;
-        max-width: 200px;
+        max-width: none !important;
         height: 3px !important;
     }
     .now-playing .vu-volume #volume-slider::-webkit-slider-thumb,