From c866dc4c539d72134ea690c7c44318a58ec27fd2 Mon Sep 17 00:00:00 2001
From: Paul Buetow <paul@buetow.org>
Date: Thu, 30 Apr 2026 23:16:11 +0300
Subject: mobile: responsive layout, touch-friendly progress bar, collapsible
 filters

- Add mobile breakpoints (860px/520px) with compact header, full-width sidebar overlay,
  flexible search bar, and adaptive toolbar.
- Player now spans full width on mobile and has reduced stage height.
- Progress bar gains touch-drag support (touchstart/move/end) for mobile seeking.
- Collapse advanced filters (tags/duration/filesize) behind a 'Filters' toggle to keep
  the default toolbar KISS. Only type and favorites remain always visible.
---
 web/css/layout.css | 39 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

(limited to 'web/css/layout.css')

diff --git a/web/css/layout.css b/web/css/layout.css
index 8860f77..7dd70a4 100644
--- a/web/css/layout.css
+++ b/web/css/layout.css
@@ -257,6 +257,19 @@ body {
 
 /* Responsive */
 @media (max-width: 860px) {
+  :root {
+    --header-height: 3rem;
+    --sidebar-width: 0;
+  }
+  .site-header {
+    gap: 0.35rem;
+    padding: 0 0.5rem;
+  }
+  .search-bar {
+    max-width: none;
+    min-width: 0;
+    flex: 1 1 auto;
+  }
   .sidebar {
     position: fixed;
     inset: var(--header-height) auto auto 0;
@@ -269,11 +282,35 @@ body {
   }
   .sidebar.open { display: flex; }
   .page { padding-left: 0; }
-  .media-grid { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
+  .player { inset: auto 0 0 0 !important; }
+  .toolbar {
+    flex-wrap: wrap;
+    gap: 0.35rem;
+  }
+  .toolbar .input-sm {
+    min-width: 4.5rem;
+    max-width: none;
+    flex: 1 1 4.5rem;
+  }
+  .site-header .logo {
+    font-size: 0.9rem;
+  }
+  #theme-toggle,
+  #user-name {
+    display: none;
+  }
+  #logout-btn {
+    padding: 0.3rem 0.5rem;
+    font-size: 0.75rem;
+  }
+  .media-grid { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
 }
 
 @media (max-width: 520px) {
   .media-grid { grid-template-columns: repeat(2, 1fr); }
+  .toolbar .input-sm {
+    min-width: 3.5rem;
+  }
 }
 
 /* Utilities */
-- 
cgit v1.2.3