fix: eliminate iOS overscroll white areas on home page

- background image changed from absolute to fixed so it covers the
  full viewport including iOS rubber-band overscroll zones
- useEffect sets html/body background-color to #000 while the home
  page with a background image is active, then clears it on teardown
- container uses min-h-dvh (dynamic viewport height) for correct iOS
  full-screen sizing
- overscroll-behavior-y: none added globally to suppress pull-to-
  refresh bounce that could reveal white behind the page

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

frontend/src/App.tsx

@@ -73,6 +73,25 @@ function App() {
     getBookmarkedUrls().then(setBookmarkedUrls).catch(() => {});
   }, []);
 
+  // On iOS, overscroll (rubber-band) reveals the html/body background.
+  // When the home page has a full-screen background image, force html+body
+  // to black so the overscroll area matches instead of flashing white.
+  const isHomeWithBg = !hasSearched && !!(bgInfo?.enabled && bgInfo?.url);
+  useEffect(() => {
+    const el = document.documentElement;
+    if (isHomeWithBg) {
+      el.style.backgroundColor = "#000";
+      document.body.style.backgroundColor = "#000";
+    } else {
+      el.style.backgroundColor = "";
+      document.body.style.backgroundColor = "";
+    }
+    return () => {
+      el.style.backgroundColor = "";
+      document.body.style.backgroundColor = "";
+    };
+  }, [isHomeWithBg]);
+
   const doSearch = useCallback(
     async (q: string, cat: Category = category, p: number = 1, size: ImageSize = imageSize, updateUrl = true) => {
       if (!q.trim()) return;
@@ -252,11 +271,11 @@ function App() {
   // Home page (no search yet)
   if (!hasSearched) {
     return (
-      <div className="relative flex min-h-screen flex-col">
-        {/* Background image */}
+      <div className={cn("relative flex min-h-dvh flex-col", bgUrl && "bg-black")}>
+        {/* Background image — fixed so it covers the full viewport including iOS overscroll zones */}
         {bgUrl && (
           <div
-            className="absolute inset-0 -z-10 bg-cover bg-center transition-opacity duration-700"
+            className="fixed inset-0 -z-10 bg-cover bg-center transition-opacity duration-700"
             style={{ backgroundImage: `url(${bgUrl})` }}
           >
             <div className="absolute inset-0 bg-black/40 dark:bg-black/60" />

frontend/src/index.css

@@ -5,6 +5,8 @@
 html, body {
   overflow-x: hidden;
   overscroll-behavior-x: none;
+  /* Prevent iOS rubber-band scroll from revealing white behind full-screen pages */
+  overscroll-behavior-y: none;
 }
 
 :root {