Add mobile-first responsive design with bottom tab navigation

Converts desktop sidebar to hidden on mobile, adds bottom tab bar with
5 primary items and a "More" overflow menu. All pages get responsive
spacing, smaller touch targets, and tighter grids on small screens.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

client/src/pages/Gallery.jsx

@@ -179,7 +179,7 @@ export default function Gallery() {
       {/* Header */}
       <div className="mb-4">
         <div className="flex items-baseline justify-between">
-          <h1 className="text-2xl font-bold text-white">Gallery</h1>
+          <h1 className="text-xl md:text-2xl font-bold text-white">Gallery</h1>
           <p className="text-gray-500 text-sm">
             {total} file{total !== 1 ? 's' : ''}{checkedFolders.size === 0 ? ' saved locally' : ''}
           </p>
@@ -187,7 +187,7 @@ export default function Gallery() {
       </div>
 
       {/* Filters */}
-      <div className="flex flex-wrap items-center gap-3 mb-6">
+      <div className="flex flex-wrap items-center gap-2 md:gap-3 mb-4 md:mb-6">
         {/* User Filter Popover */}
         <div className="relative" ref={filterRef}>
           <button
@@ -350,7 +350,7 @@ export default function Gallery() {
         </div>
       ) : (
         <>
-          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2">
+          <div className="grid grid-cols-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-1 md:gap-2">
             {files.map((file, i) => (
               <div
                 key={`${file.folder}-${file.filename}-${i}`}