feat(ui): implement responsive mobile interface

- Add `relative` to nav for correct mobile dropdown positioning
- Increase hamburger button and mobile nav links to ≥44px touch targets
- Add mobile card view on files page (table hidden on small screens)
- Make bulk actions bar and pagination responsive/wrapping
- Add file type `accept` attribute and camera capture button on upload page
- Increase all interactive button/input sizes to ≥44px
- Add responsive CSS for pagination wrap and filter stacking at 480px"

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>

frontend/templates/upload.html

@@ -2,22 +2,25 @@
 {% block title %}Upload Document{% endblock %}
 
 {% block content %}
-<div class="flex flex-col items-center justify-center p-8">
-  <h1 class="text-3xl font-bold mb-8">Upload Files</h1>
+<div class="flex flex-col items-center justify-center p-4 sm:p-8">
+  <h1 class="text-2xl sm:text-3xl font-bold mb-6 sm:mb-8">Upload Files</h1>
 
   <!-- File Upload Section -->
-  <div class="w-full max-w-2xl mb-8">
-    <h2 class="text-xl font-semibold mb-4">Upload from Computer</h2>
+  <div class="w-full max-w-2xl mb-6 sm:mb-8">
+    <h2 class="text-xl font-semibold mb-4">Upload from Device</h2>
     <form action="/api/ui-upload" method="POST" enctype="multipart/form-data">
       <div
         id="dropZone"
-        class="border-4 border-dashed border-gray-300 rounded-lg p-8 bg-white text-center w-full"
+        class="border-4 border-dashed border-gray-300 rounded-lg p-6 sm:p-8 bg-white text-center w-full"
         ondrop="handleDrop(event)"
         ondragover="handleDragOver(event)"
         ondragleave="handleDragLeave(event)"
       >
-        <p class="text-gray-500 mb-4">
-          Drag & drop files here, or click to select files.
+        <p class="text-gray-500 mb-4 hidden sm:block">
+          Drag &amp; drop files here, or click to select files.
+        </p>
+        <p class="text-gray-500 mb-4 sm:hidden">
+          Tap to select files or use the camera button below.
         </p>
         <input
           id="fileInput"
@@ -26,19 +29,47 @@
           onchange="handleFileSelect(event)"
           name="files"
           multiple
+          accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,image/*"
         />
+        <!-- Browse Files button (all devices) -->
+        <button
+          type="button"
+          onclick="document.getElementById('fileInput').click()"
+          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-200 mb-4"
+          style="min-height:44px;"
+        >
+          <i class="fas fa-folder-open mr-2"></i> Browse Files
+        </button>
         <div class="text-sm text-gray-500 mt-2">
           <p>Allowed types: PDF, Office documents (Word, Excel, PowerPoint, etc.), Images</p>
           <p>Maximum size: 500MB per file</p>
         </div>
       </div>
+
+      <!-- Camera capture button - mobile only -->
+      <div class="mt-3 sm:hidden">
+        <label
+          class="w-full flex items-center justify-center gap-2 bg-green-500 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg transition duration-200 cursor-pointer"
+          style="min-height:44px;"
+        >
+          <i class="fas fa-camera"></i> Take Photo / Scan Document
+          <input
+            id="cameraInput"
+            type="file"
+            class="hidden"
+            onchange="handleFileSelect(event)"
+            accept="image/*"
+            capture="environment"
+          />
+        </label>
+      </div>
     </form>
   </div>
 
   <!-- URL Upload Section -->
-  <div class="w-full max-w-2xl mb-8">
+  <div class="w-full max-w-2xl mb-6 sm:mb-8">
     <h2 class="text-xl font-semibold mb-4">Upload from URL</h2>
-    <div class="bg-white border border-gray-300 rounded-lg p-6">
+    <div class="bg-white border border-gray-300 rounded-lg p-4 sm:p-6">
       <form id="urlUploadForm" class="space-y-4">
         <div>
           <label for="urlInput" class="block text-sm font-medium text-gray-700 mb-2">
@@ -49,7 +80,8 @@
             id="urlInput"
             name="url"
             placeholder="https://example.com/document.pdf"
-            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            style="min-height:44px;"
             required
           />
           <p class="text-sm text-gray-500 mt-1">
@@ -65,7 +97,8 @@
             id="urlFilename"
             name="filename"
             placeholder="my-document.pdf"
-            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            style="min-height:44px;"
           />
           <p class="text-sm text-gray-500 mt-1">
             Leave empty to use filename from URL
@@ -74,6 +107,7 @@
         <button
           type="submit"
           class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-200"
+          style="min-height:44px;"
         >
           Download and Process
         </button>