mobile fixes

frontend/src/App.tsx

@@ -21,7 +21,7 @@ function useTheme() {
   return { dark, toggle: () => setDark((d) => !d) };
 }
 
-function Sidebar({ onToggleTheme, dark }: { onToggleTheme: () => void; dark: boolean }) {
+function Sidebar({ onToggleTheme, dark, onClose }: { onToggleTheme: () => void; dark: boolean; onClose?: () => void }) {
   const { data: libraries = [] } = useQuery<Library[]>({
     queryKey: ["libraries"],
     queryFn: api.libraries.list,
@@ -52,7 +52,7 @@ function Sidebar({ onToggleTheme, dark }: { onToggleTheme: () => void; dark: boo
         MediaLore
       </div>
 
-      <NavLink to="/search" style={linkStyle}>Search</NavLink>
+      <NavLink to="/search" style={linkStyle} onClick={onClose}>Search</NavLink>
 
       {libraries.length > 0 && (
         <>
@@ -60,7 +60,7 @@ function Sidebar({ onToggleTheme, dark }: { onToggleTheme: () => void; dark: boo
             Libraries
           </div>
           {libraries.map((lib) => (
-            <NavLink key={lib.id} to={`/library/${lib.id}`} style={linkStyle}>
+            <NavLink key={lib.id} to={`/library/${lib.id}`} style={linkStyle} onClick={onClose}>
               {lib.name}
             </NavLink>
           ))}
@@ -68,7 +68,7 @@ function Sidebar({ onToggleTheme, dark }: { onToggleTheme: () => void; dark: boo
       )}
 
       <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 4 }}>
-        <NavLink to="/settings" style={linkStyle}>Settings</NavLink>
+        <NavLink to="/settings" style={linkStyle} onClick={onClose}>Settings</NavLink>
         <button
           onClick={onToggleTheme}
           title={dark ? "Switch to light mode" : "Switch to dark mode"}
@@ -83,11 +83,51 @@ function Sidebar({ onToggleTheme, dark }: { onToggleTheme: () => void; dark: boo
 
 function AppShell() {
   const { dark, toggle } = useTheme();
+  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 768);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  useEffect(() => {
+    const mq = window.matchMedia("(max-width: 767px)");
+    setIsMobile(mq.matches);
+    const handler = (e: MediaQueryListEvent) => {
+      setIsMobile(e.matches);
+      if (!e.matches) setSidebarOpen(false);
+    };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
 
   return (
     <div style={{ display: "flex", height: "100vh", background: "var(--bg)", color: "var(--text)" }}>
-      <Sidebar onToggleTheme={toggle} dark={dark} />
-      <main style={{ flex: 1, overflow: "auto", background: "var(--bg)" }}>
+      {/* Mobile hamburger button */}
+      {isMobile && (
+        <button
+          onClick={() => setSidebarOpen((v) => !v)}
+          style={{ position: "fixed", top: 12, left: 12, zIndex: 301, background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 6, padding: "6px 10px", color: "var(--text)", fontSize: 18, cursor: "pointer" }}
+          aria-label="Toggle menu"
+        >
+          ☰
+        </button>
+      )}
+
+      {/* Mobile backdrop */}
+      {isMobile && sidebarOpen && (
+        <div
+          onClick={() => setSidebarOpen(false)}
+          style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.4)", zIndex: 299 }}
+        />
+      )}
+
+      {/* Sidebar */}
+      <div style={isMobile ? {
+        position: "fixed", top: 0, left: 0, bottom: 0, zIndex: 300,
+        transform: sidebarOpen ? "translateX(0)" : "translateX(-100%)",
+        transition: "transform 0.2s ease",
+      } : {}}>
+        <Sidebar onToggleTheme={toggle} dark={dark} onClose={isMobile ? () => setSidebarOpen(false) : undefined} />
+      </div>
+
+      <main style={{ flex: 1, overflow: "auto", background: "var(--bg)", paddingTop: isMobile ? 48 : 0 }}>
         <Routes>
           <Route path="/" element={<SearchPage />} />
           <Route path="/search" element={<SearchPage />} />

frontend/src/components/DoomScrollViewer/DoomScrollViewer.tsx

@@ -11,6 +11,7 @@ export default function DoomScrollViewer({ items, onClose, onViewInLibrary }: Pr
   const [index, setIndex] = useState(0);
   const [fading, setFading] = useState(false);
   const wheelLock = useRef(false);
+  const touchStartY = useRef<number | null>(null);
 
   const item = items[index];
 
@@ -34,11 +35,22 @@ export default function DoomScrollViewer({ items, onClose, onViewInLibrary }: Pr
       if (e.key === "ArrowUp") { e.preventDefault(); go(-1); }
       if (e.key === "Escape") onClose();
     };
+    const onTouchStart = (e: TouchEvent) => { touchStartY.current = e.touches[0].clientY; };
+    const onTouchEnd = (e: TouchEvent) => {
+      if (touchStartY.current === null) return;
+      const delta = touchStartY.current - e.changedTouches[0].clientY;
+      if (Math.abs(delta) > 50) delta > 0 ? go(1) : go(-1);
+      touchStartY.current = null;
+    };
     window.addEventListener("wheel", onWheel, { passive: true });
     window.addEventListener("keydown", onKey);
+    window.addEventListener("touchstart", onTouchStart);
+    window.addEventListener("touchend", onTouchEnd);
     return () => {
       window.removeEventListener("wheel", onWheel);
       window.removeEventListener("keydown", onKey);
+      window.removeEventListener("touchstart", onTouchStart);
+      window.removeEventListener("touchend", onTouchEnd);
     };
   }, [index, fading]);
 
@@ -58,7 +70,6 @@ export default function DoomScrollViewer({ items, onClose, onViewInLibrary }: Pr
           transform: fading ? "translateY(-12px)" : "translateY(0)",
         }}
       >
-        <div style={{ color: "#ccc", fontSize: 13 }}>{item?.filename}</div>
         {item?.media_type === "image" && (
           <img
             key={item.id}

frontend/src/components/MediaViewer/MediaViewer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { api, type BrowseEntry, type MediaItem } from "../../api/client";
 import TagPanel from "../TagPanel/TagPanel";
@@ -11,7 +11,8 @@ interface Props {
 }
 
 export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }: Props) {
-  const [showTags, setShowTags] = useState(true);
+  const [showTags, setShowTags] = useState(() => window.innerWidth >= 768);
+  const touchStartX = useRef<number | null>(null);
 
   const { data: item } = useQuery<MediaItem>({
     queryKey: ["media", mediaId],
@@ -29,8 +30,24 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
       if (e.key === "ArrowLeft" && prevId) onNavigate(prevId);
       if (e.key === "ArrowRight" && nextId) onNavigate(nextId);
     }
+    const onTouchStart = (e: TouchEvent) => { touchStartX.current = e.touches[0].clientX; };
+    const onTouchEnd = (e: TouchEvent) => {
+      if (touchStartX.current === null) return;
+      const delta = touchStartX.current - e.changedTouches[0].clientX;
+      if (Math.abs(delta) > 50) {
+        if (delta > 0 && nextId) onNavigate(nextId);
+        if (delta < 0 && prevId) onNavigate(prevId);
+      }
+      touchStartX.current = null;
+    };
     window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
+    window.addEventListener("touchstart", onTouchStart);
+    window.addEventListener("touchend", onTouchEnd);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("touchstart", onTouchStart);
+      window.removeEventListener("touchend", onTouchEnd);
+    };
   }, [prevId, nextId, onClose, onNavigate]);
 
   return (