From 17057ecfbeaeaec4481ee823803039561c2b3925 Mon Sep 17 00:00:00 2001
From: Alex <alex.bilbie1@gmail.com>
Date: Sun, 23 Nov 2025 22:12:48 +0000
Subject: [PATCH] WebUI - Mobile view tweaks (#329)

One set of changes I forgot to commit yesterday - a few minor
adjustments to improve experience on mobile, especially PWAs. Adjusted
search bar positioning and added explicit safe views for individual
components such as the header and footer.

Before / After  - test PWA on my iPhone:
<img width="300" alt="IMG_1004"
src="https://github.com/user-attachments/assets/690b567e-a1a1-44c7-8e57-52ee8d896476"
/> - <img width="300" alt="IMG_1003"
src="https://github.com/user-attachments/assets/3f2b51cb-f408-47c8-9726-4b5d7d5a840c"
/>

@calibrain I think you can also close #31 #178 and #270 , should all be
covered off by the various WebUI PRs in the last week or so :)

---------

Co-authored-by: CaliBrain <calibrain@l4n.xyz>
---
 src/frontend/src/components/DownloadsSidebar.tsx | 15 ++++++++++++---
 src/frontend/src/components/Footer.tsx           |  8 +++++++-
 src/frontend/src/components/Header.tsx           |  5 ++++-
 src/frontend/src/components/SearchSection.tsx    |  2 +-
 src/frontend/src/styles.css                      | 10 ++++++++++
 5 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/components/DownloadsSidebar.tsx b/src/frontend/src/components/DownloadsSidebar.tsx
index 3664d58..97e8522 100644
--- a/src/frontend/src/components/DownloadsSidebar.tsx
+++ b/src/frontend/src/components/DownloadsSidebar.tsx
@@ -288,7 +288,10 @@ export const DownloadsSidebar = ({
         style={{ background: 'var(--bg)' }}
       >
         {/* Header */}
-        <div className="flex items-center justify-between p-4">
+        <div
+          className="flex items-center justify-between p-4"
+          style={{ paddingTop: 'calc(1rem + env(safe-area-inset-top))' }}
+        >
           <h2 className="text-lg font-semibold">Downloads</h2>
           <button
             type="button"
@@ -347,7 +350,10 @@ export const DownloadsSidebar = ({
         </div>
 
         {/* Queue Items */}
-        <div className="flex-1 overflow-y-auto p-4 space-y-3">
+        <div
+          className="flex-1 overflow-y-auto p-4 space-y-3"
+          style={{ paddingBottom: 'calc(1rem + env(safe-area-inset-bottom))' }}
+        >
           {allDownloadItems.length > 0 ? (
             allDownloadItems.map((item) => renderDownloadItem(item))
           ) : (
@@ -361,7 +367,10 @@ export const DownloadsSidebar = ({
         {activeCount > 0 && (
           <div
             className="p-3 border-t text-xs text-center opacity-70"
-            style={{ borderColor: 'var(--border-muted)' }}
+            style={{
+              borderColor: 'var(--border-muted)',
+              paddingBottom: 'calc(0.75rem + env(safe-area-inset-bottom))',
+            }}
           >
             {activeCount} active {activeCount === 1 ? 'download' : 'downloads'}
           </div>
diff --git a/src/frontend/src/components/Footer.tsx b/src/frontend/src/components/Footer.tsx
index 624b752..8bac2c6 100644
--- a/src/frontend/src/components/Footer.tsx
+++ b/src/frontend/src/components/Footer.tsx
@@ -6,7 +6,13 @@ interface FooterProps {
 
 export const Footer = ({ buildVersion, releaseVersion, appEnv }: FooterProps) => {
   return (
-    <footer className="mt-8 border-t py-6" style={{ borderColor: 'var(--border-muted)' }}>
+    <footer
+      className="mt-8 border-t py-6"
+      style={{
+        borderColor: 'var(--border-muted)',
+        paddingBottom: 'calc(1.5rem + env(safe-area-inset-bottom))',
+      }}
+    >
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-wrap items-center justify-between gap-3">
         <div className="min-w-0 text-left">
           <p className="text-sm opacity-80">Calibre Web Book Downloader</p>
diff --git a/src/frontend/src/components/Header.tsx b/src/frontend/src/components/Header.tsx
index 1104cdf..b258ccc 100644
--- a/src/frontend/src/components/Header.tsx
+++ b/src/frontend/src/components/Header.tsx
@@ -349,7 +349,10 @@ export const Header = ({
   );
 
   return (
-    <header className="w-full sticky top-0 z-40 backdrop-blur-sm header-with-fade" style={{ background: 'var(--bg)' }}>
+    <header
+      className="w-full sticky top-0 z-40 backdrop-blur-sm header-with-fade"
+      style={{ background: 'var(--bg)', paddingTop: 'env(safe-area-inset-top)' }}
+    >
       <div className={`max-w-full mx-auto px-4 sm:px-6 lg:px-8 transition-all duration-500 ${
         showSearch ? 'h-auto py-4' : 'h-24'
       }`}>
diff --git a/src/frontend/src/components/SearchSection.tsx b/src/frontend/src/components/SearchSection.tsx
index edfdf03..55ad129 100644
--- a/src/frontend/src/components/SearchSection.tsx
+++ b/src/frontend/src/components/SearchSection.tsx
@@ -52,7 +52,7 @@ export const SearchSection = ({
         isInitialState 
           ? 'search-initial-state mb-6' 
           : 'mb-3 sm:mb-4'
-      }`}
+      } ${showAdvanced ? 'search-advanced-visible' : ''}`}
     >
       <div className={`flex items-center justify-center gap-3 transition-all duration-300 ${
         isInitialState ? 'opacity-100 mb-6 sm:mb-8' : 'opacity-0 h-0 mb-0 overflow-hidden'
diff --git a/src/frontend/src/styles.css b/src/frontend/src/styles.css
index f9b4b3b..278f0ca 100644
--- a/src/frontend/src/styles.css
+++ b/src/frontend/src/styles.css
@@ -407,6 +407,16 @@ button:disabled {
 /* On mobile (below 640px), use horizontal layout: image left, text right, buttons below */
 /* Desktop remains unchanged - full width, full height artwork via Tailwind classes */
 @media (max-width: 639px) {
+    .search-initial-state {
+        justify-content: flex-start;
+        padding-top: 18vh; /* push the search UI toward the upper third */
+    }
+
+    /* When advanced filters are visible, pull the search bar to the very top */
+    .search-initial-state.search-advanced-visible {
+        padding-top: calc(env(safe-area-inset-top) + 1rem);
+    }
+
     .book-card-content {
         flex-direction: row !important;
         gap: 0.75rem !important;