From 9fdf3944fc0b3cb8d57e6660c13c85a1924e35ac Mon Sep 17 00:00:00 2001
From: Josue Zamudio <josuezamudio1@gmail.com>
Date: Wed, 19 Aug 2026 18:26:22 +0000
Subject: [PATCH] =?UTF-8?q?ui:=20mobile=20polish=20=E2=80=94=20compact=20h?=
 =?UTF-8?q?ero=20row,=20cropped=20history=20posters,=20wider=20search,=20t?=
 =?UTF-8?q?ab=20ellipsis,=20header=20z-index?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/style.css | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/static/style.css b/static/style.css
index e349182..cafbbd9 100644
--- a/static/style.css
+++ b/static/style.css
@@ -3,7 +3,7 @@
 body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, sans-serif; }
 a { color: inherit; text-decoration: none; }
 header { display: flex; gap: 1rem; align-items: center; padding: 0.8rem 1.2rem;
-  border-bottom: 1px solid var(--bd); position: sticky; top: 0; background: var(--bg); z-index: 1; }
+  border-bottom: 1px solid var(--bd); position: sticky; top: 0; background: var(--bg); z-index: 5; }
 .logo { font-weight: 700; font-size: 1.2rem; color: var(--acc); }
 header form { flex: 1; max-width: 420px; }
 button.tiny { padding: .2rem .55rem; font-size: .8rem; border-radius: 6px;
@@ -51,7 +51,11 @@ h2 { margin: 0.4rem 0; }
 .mini-info { display: flex; flex-direction: column; padding: .5rem; }
 .mini-meta { font-size: .75rem; color: var(--muted); margin-top: .1rem; }
 @media (max-width: 640px) {
-  .hero-sec { grid-template-columns: 1fr; grid-template-areas: "img" "right"; }
+  .hero-sec { grid-template-columns: 100px 1fr; grid-template-areas: "img right"; gap: .8rem; padding: .8rem; }
+  .hero img { width: 100px; }
+  .hero-body h2 { white-space: normal; font-size: 1.05rem; }
+  .card.hist img { max-height: 150px; }
+  header #me { display: none; }
 }
 
 .detail-head { margin-bottom: 1rem; }
@@ -67,6 +71,7 @@ button { background: var(--card); color: var(--fg); border: 1px solid var(--bd);
 button:hover { border-color: var(--acc); }
 
 .tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.6rem 0; }
+.tab { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .tab.active { border-color: var(--acc); color: var(--acc); }
 
 /* loading + feedback */