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

@@ -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>

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>

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'
       }`}>

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'

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;