From 8c32cd117abe79f4ee6cff3a950ffc35c95faeff Mon Sep 17 00:00:00 2001
From: Paul Buetow <paul@buetow.org>
Date: Sat, 9 May 2026 11:11:49 +0300
Subject: Refine media browsing and set covers

---
 web/css/components.css | 65 +++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 62 insertions(+), 3 deletions(-)

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

diff --git a/web/css/components.css b/web/css/components.css
index 475a911..a81753a 100644
--- a/web/css/components.css
+++ b/web/css/components.css
@@ -101,6 +101,7 @@ label {
 
 /* Search bar */
 .search-bar {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 0.4rem;
@@ -108,17 +109,75 @@ label {
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 0.25rem 0.6rem;
-  max-width: 22rem;
+  max-width: min(100%, 72rem);
   width: 100%;
 }
+.search-overlay {
+  position: fixed;
+  inset: 1rem 1rem auto 1rem;
+  z-index: 90;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+}
+.search-overlay.hidden {
+  display: none;
+}
+.search-overlay-bar {
+  align-items: flex-start;
+  flex-wrap: wrap;
+  max-width: min(72rem, calc(100vw - 2rem));
+  box-shadow: var(--shadow-lg);
+  pointer-events: auto;
+}
 .search-bar input {
   background: transparent;
   border: none;
   padding: 0.35rem 0.2rem;
-  flex: 1 1 auto;
+  flex: 1 1 18rem;
+  min-width: 8rem;
 }
 .search-bar input:focus { box-shadow: none; }
-
+.tag-filter-list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  flex: 1 1 18rem;
+  min-width: 0;
+  max-width: none;
+}
+.tag-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  max-width: 9rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: 0.78rem;
+  cursor: pointer;
+}
+.tag-filter-chip:hover,
+.tag-filter-chip:focus-visible {
+  background: var(--bg-surface-hover);
+  color: var(--text-primary);
+  outline: none;
+}
+.tag-filter-chip.active {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--text-primary);
+}
+.tag-filter-chip span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 /* Search syntax help tooltip */
 .search-help {
   position: absolute;
-- 
cgit v1.2.3