Make gallery page fully mobile responsive

GalleryLayout improvements:
- Stack header elements vertically on mobile
- Hide company branding on small screens
- Make dates stack vertically
- Responsive text sizes and padding
- Icon-only logout button on mobile
- Improved button layout with proper wrapping

PhotoFilterBar improvements:
- Stack search and sort vertically on mobile
- Full-width sort button on mobile
- Horizontally scrollable category filters
- Responsive text sizes
- Mobile-friendly dropdown positioning

PhotoGrid improvements:
- Responsive selection controls
- Touch-friendly photo overlays
- Larger selection checkboxes on mobile
- Improved button text for small screens
- Responsive gaps between photos

Gallery grid CSS:
- Smaller gaps on mobile devices
- Maintains 2 columns on smallest screens

GalleryPage login:
- Responsive padding and margins
- Smaller text and icon sizes on mobile
- Better card spacing
- Responsive form elements

UserPhotoUpload modal:
- Full-screen modal on mobile (slides up from bottom)
- Responsive padding and text sizes
- Mobile-optimized upload area
- Sticky footer on mobile

🤖 Generated with [Claude Code](https://claude.ai/code)

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

frontend/src/components/gallery/UserPhotoUpload.tsx

@@ -113,27 +113,27 @@ export const UserPhotoUpload: React.FC<UserPhotoUploadProps> = ({
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-      <Card className="w-full max-w-2xl max-h-[90vh] overflow-hidden">
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-end sm:items-center justify-center z-50">
+      <Card className="w-full sm:max-w-2xl max-h-[100vh] sm:max-h-[90vh] overflow-hidden sm:mx-4 rounded-t-2xl sm:rounded-2xl">
         <CardContent className="p-0">
           {/* Header */}
-          <div className="flex items-center justify-between p-6 border-b border-neutral-200">
-            <h2 className="text-xl font-semibold text-neutral-900">{t('upload.uploadPhotos')}</h2>
+          <div className="flex items-center justify-between p-4 sm:p-6 border-b border-neutral-200">
+            <h2 className="text-lg sm:text-xl font-semibold text-neutral-900">{t('upload.uploadPhotos')}</h2>
             <button
               onClick={onClose}
-              className="p-2 hover:bg-neutral-100 rounded-lg transition-colors"
+              className="p-1.5 sm:p-2 hover:bg-neutral-100 rounded-lg transition-colors"
             >
               <X className="w-5 h-5 text-neutral-500" />
             </button>
           </div>
 
           {/* Content */}
-          <div className="p-6 overflow-y-auto" style={{ maxHeight: 'calc(90vh - 200px)' }}>
+          <div className="p-4 sm:p-6 overflow-y-auto" style={{ maxHeight: 'calc(100vh - 160px)', minHeight: '300px' }}>
             {/* Upload Area */}
-            <div className="mb-6">
+            <div className="mb-4 sm:mb-6">
               <label className="block">
-                <div className="border-2 border-dashed border-neutral-300 rounded-lg p-8 text-center hover:border-primary-500 transition-colors cursor-pointer">
-                  <Upload className="w-12 h-12 text-neutral-400 mx-auto mb-3" />
+                <div className="border-2 border-dashed border-neutral-300 rounded-lg p-6 sm:p-8 text-center hover:border-primary-500 transition-colors cursor-pointer">
+                  <Upload className="w-10 h-10 sm:w-12 sm:h-12 text-neutral-400 mx-auto mb-3" />
                   <p className="text-sm font-medium text-neutral-700 mb-1">
                     {t('upload.clickToUpload')}
                   </p>
@@ -202,11 +202,12 @@ export const UserPhotoUpload: React.FC<UserPhotoUploadProps> = ({
           </div>
 
           {/* Footer */}
-          <div className="flex items-center justify-end gap-3 p-6 border-t border-neutral-200">
+          <div className="flex items-center justify-end gap-2 sm:gap-3 p-4 sm:p-6 border-t border-neutral-200 bg-white">
             <Button
               variant="outline"
               onClick={onClose}
               disabled={uploading}
+              className="text-sm sm:text-base"
             >
               {t('common.cancel')}
             </Button>
@@ -215,6 +216,7 @@ export const UserPhotoUpload: React.FC<UserPhotoUploadProps> = ({
               onClick={handleUpload}
               disabled={files.length === 0 || uploading}
               isLoading={uploading}
+              className="text-sm sm:text-base"
             >
               {uploading ? t('upload.uploading') : t('common.upload')} ({files.length})
             </Button>