Fix gallery mobile view issues

- Make logout button show only icon on mobile (no text)
- Move upload button from top bar to sidebar menu on mobile
- Fix top bar layout with proper structure:
  - Logo on left
  - Gallery title centered
  - Event date and expiration date shown below title on mobile
- Improve responsive design for header elements
- Ensure upload button only appears in menu when uploads are enabled

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

Co-Authored-By: Claude <[email protected]>

frontend/src/components/gallery/layouts/HeroGalleryLayout.tsx

@@ -1,5 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { Download, Maximize2, Check, ChevronDown } from 'lucide-react';
+import { Download, Maximize2, Check, ChevronDown, Calendar, Clock } from 'lucide-react';
+import { parseISO } from 'date-fns';
+import { useTranslation } from 'react-i18next';
+import { useLocalizedDate } from '../../../hooks/useLocalizedDate';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { AuthenticatedImage } from '../../common';
 import type { BaseGalleryLayoutProps } from './BaseGalleryLayout';
@@ -8,6 +11,8 @@ import type { Photo } from '../../../types';
 interface HeroGalleryLayoutProps extends BaseGalleryLayoutProps {
   eventName?: string;
   eventLogo?: string | null;
+  eventDate?: string;
+  expiresAt?: string;
 }
 
 export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
@@ -18,8 +23,12 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
   isSelectionMode = false,
   onPhotoSelect,
   eventName,
-  eventLogo
+  eventLogo,
+  eventDate,
+  expiresAt
 }) => {
+  const { t } = useTranslation();
+  const { format } = useLocalizedDate();
   const { theme } = useTheme();
   const [heroPhoto, setHeroPhoto] = useState<Photo | null>(null);
   const gallerySettings = theme.gallerySettings || {};
@@ -72,10 +81,28 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
             
             {/* Event Title */}
             {eventName && (
-              <h1 className="text-3xl sm:text-4xl lg:text-5xl xl:text-6xl font-bold text-white drop-shadow-lg">
+              <h1 className="text-3xl sm:text-4xl lg:text-5xl xl:text-6xl font-bold text-white drop-shadow-lg mb-4">
                 {eventName}
               </h1>
             )}
+            
+            {/* Event Dates */}
+            {(eventDate || expiresAt) && (
+              <div className="flex flex-wrap items-center justify-center gap-4 sm:gap-6 text-white/90">
+                {eventDate && (
+                  <span className="flex items-center text-lg sm:text-xl">
+                    <Calendar className="w-5 h-5 sm:w-6 sm:h-6 mr-2" />
+                    {format(parseISO(eventDate), 'PP')}
+                  </span>
+                )}
+                {expiresAt && (
+                  <span className="flex items-center text-lg sm:text-xl">
+                    <Clock className="w-5 h-5 sm:w-6 sm:h-6 mr-2" />
+                    {t('gallery.expires')} {format(parseISO(expiresAt), 'PP')}
+                  </span>
+                )}
+              </div>
+            )}
           </div>
         </div>