From 30db21f4af8bee25819b5de449ac647e1b678b6d Mon Sep 17 00:00:00 2001
From: Priec <filippriec@gmail.com>
Date: Wed, 20 May 2026 21:44:34 +0200
Subject: [PATCH] mobile phone resolution media player

---
 assets/static/css/theme.css  | 40 +++++++++++++++++++++++++++++-------
 assets/views/admin/base.html |  4 ++--
 assets/views/base.html       |  4 ++--
 3 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/assets/static/css/theme.css b/assets/static/css/theme.css
index ca4c9bf..75e4cf4 100644
--- a/assets/static/css/theme.css
+++ b/assets/static/css/theme.css
@@ -95,10 +95,13 @@
 }
 
 /* === 3. Terminal look & feel ================================ */
+/* Root font-size drives every rem in this file and in app.css.
+ * Bump this to scale the whole UI; drop to shrink. */
+html { font-size: 19px; }
 body {
   font-family: "JetBrains Mono", "Cascadia Code", "Fira Code",
     ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
-  font-size: 15px;
+  font-size: 1rem;
   line-height: 1.6;
 }
 
@@ -529,13 +532,36 @@ body {
 .uw-queue-remove:hover { color: oklch(var(--er)); border-color: oklch(var(--er)); }
 
 @media (max-width: 640px) {
+  /* Two-row layout: [title][prev][next][queue][close] on top,
+   * full-width <audio> scrubber underneath. */
   .uw-player-tag { display: none; }
-  .uw-player-title { max-width: 7rem; font-size: 0.95rem; }
-  .uw-player-inner { padding: 0.75rem 0.95rem; gap: 0.6rem; }
-  .uw-playing body { padding-bottom: 5.75rem; }
-  .uw-player-btn { min-width: 2.4rem; height: 2.4rem; padding: 0 0.4rem; font-size: 0.95rem; }
-  .uw-player-close { width: 2.4rem; height: 2.4rem; }
-  #uw-audio { height: 2.7rem; min-width: 7rem; }
+  .uw-player-inner {
+    flex-wrap: wrap;
+    padding: 0.6rem 0.75rem;
+    gap: 0.4rem;
+    row-gap: 0.5rem;
+  }
+  .uw-player-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    max-width: none;
+    font-size: 0.95rem;
+  }
+  .uw-player-btn {
+    min-width: 2.2rem;
+    height: 2.2rem;
+    padding: 0 0.35rem;
+    font-size: 0.9rem;
+  }
+  .uw-player-close { width: 2.2rem; height: 2.2rem; font-size: 0.95rem; }
+  #uw-audio {
+    order: 99;
+    flex: 1 1 100%;
+    width: 100%;
+    min-width: 0;
+    height: 2.4rem;
+  }
+  .uw-playing body { padding-bottom: 8.25rem; }
   .uw-queue-head, .uw-queue-item { padding-left: 0.95rem; padding-right: 0.95rem; }
 }
 
diff --git a/assets/views/admin/base.html b/assets/views/admin/base.html
index 13c94e7..0ad7e5f 100644
--- a/assets/views/admin/base.html
+++ b/assets/views/admin/base.html
@@ -42,9 +42,9 @@
         });
       });
     </script>
-    <link href="/static/css/app.css" rel="stylesheet" type="text/css">
+    <link href="/static/css/app.css?v=2026-05-20b" rel="stylesheet" type="text/css">
     {% block head %}{% endblock head %}
-    <link href="/static/css/theme.css" rel="stylesheet" type="text/css">
+    <link href="/static/css/theme.css?v=2026-05-20b" rel="stylesheet" type="text/css">
     <script src="/static/vendor/htmx/htmx-1.9.12.min.js"></script>
     <style>
       @media (min-width: 768px) {
diff --git a/assets/views/base.html b/assets/views/base.html
index 23b0208..211db8a 100644
--- a/assets/views/base.html
+++ b/assets/views/base.html
@@ -226,8 +226,8 @@
         if (e.target.closest('#uw-close')) { uwClear(); return; }
       });
     </script>
-    <link href="/static/css/app.css" rel="stylesheet" type="text/css">
-    <link href="/static/css/theme.css" rel="stylesheet" type="text/css">
+    <link href="/static/css/app.css?v=2026-05-20b" rel="stylesheet" type="text/css">
+    <link href="/static/css/theme.css?v=2026-05-20b" rel="stylesheet" type="text/css">
     <script src="/static/vendor/htmx/htmx-1.9.12.min.js"></script>
     <style>
       @media (min-width: 768px) {