From d8fb4c9565db8f90157e2a33ef666f78fa4a7b83 Mon Sep 17 00:00:00 2001
From: paul <paul-nothaft@hotmail.de>
Date: Wed, 9 Jul 2025 09:53:24 +0200
Subject: [PATCH] Make gallery page fully mobile responsive
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../src/components/gallery/GalleryLayout.tsx  | 50 +++++++-------
 .../src/components/gallery/GalleryView.tsx    |  5 +-
 .../src/components/gallery/PhotoFilterBar.tsx | 65 +++++++++++--------
 frontend/src/components/gallery/PhotoGrid.tsx | 56 +++++++++-------
 .../components/gallery/UserPhotoUpload.tsx    | 22 ++++---
 frontend/src/index.css                        |  4 +-
 frontend/src/pages/GalleryPage.tsx            | 37 ++++++-----
 7 files changed, 131 insertions(+), 108 deletions(-)

diff --git a/frontend/src/components/gallery/GalleryLayout.tsx b/frontend/src/components/gallery/GalleryLayout.tsx
index 873273c..5f06b70 100644
--- a/frontend/src/components/gallery/GalleryLayout.tsx
+++ b/frontend/src/components/gallery/GalleryLayout.tsx
@@ -51,42 +51,42 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
 
       {/* Header */}
       <header className="bg-white border-b border-neutral-200 sticky top-0 z-40">
-        <div className="container py-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-4">
+        <div className="container py-3 sm:py-4">
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+            <div className="flex items-start sm:items-center gap-3 sm:gap-4">
               {/* Company logo */}
               {brandingSettings?.logo_url && (
-                <div className="pr-4 border-r border-neutral-200">
+                <div className="hidden sm:block pr-4 border-r border-neutral-200 flex-shrink-0">
                   <img 
                     src={`${import.meta.env.VITE_API_URL || 'http://localhost:3001'}${brandingSettings.logo_url}`} 
                     alt={brandingSettings.company_name || 'Company Logo'}
-                    className="h-12 w-auto object-contain"
+                    className="h-10 sm:h-12 w-auto object-contain"
                   />
                 </div>
               )}
               {/* Company branding */}
               {!brandingSettings?.logo_url && brandingSettings?.company_name && (
-                <div className="pr-4 border-r border-neutral-200">
-                  <h2 className="text-lg font-semibold text-neutral-800">{brandingSettings.company_name}</h2>
+                <div className="hidden sm:block pr-4 border-r border-neutral-200 flex-shrink-0">
+                  <h2 className="text-base sm:text-lg font-semibold text-neutral-800">{brandingSettings.company_name}</h2>
                   {brandingSettings.company_tagline && (
-                    <p className="text-xs text-neutral-600">{brandingSettings.company_tagline}</p>
+                    <p className="hidden lg:block text-xs text-neutral-600">{brandingSettings.company_tagline}</p>
                   )}
                 </div>
               )}
-              <div>
-                <h1 className="text-2xl font-bold text-neutral-900">{event.event_name}</h1>
+              <div className="flex-1">
+                <h1 className="text-xl sm:text-2xl font-bold text-neutral-900 leading-tight">{event.event_name}</h1>
                 {(event.event_date || event.expires_at) && (
-                  <div className="flex items-center gap-4 mt-1 text-sm text-neutral-600">
+                  <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4 mt-1 text-xs sm:text-sm text-neutral-600">
                     {event.event_date && (
                       <span className="flex items-center">
-                        <Calendar className="w-4 h-4 mr-1" />
-                        {format(parseISO(event.event_date), 'PP')}
+                        <Calendar className="w-3 h-3 sm:w-4 sm:h-4 mr-1" />
+                        <span className="truncate">{format(parseISO(event.event_date), 'PP')}</span>
                       </span>
                     )}
                     {event.expires_at && (
                       <span className="flex items-center">
-                        <Clock className="w-4 h-4 mr-1" />
-                        {t('gallery.expires')} {format(parseISO(event.expires_at), 'PP')}
+                        <Clock className="w-3 h-3 sm:w-4 sm:h-4 mr-1" />
+                        <span className="truncate">{t('gallery.expires')} {format(parseISO(event.expires_at), 'PP')}</span>
                       </span>
                     )}
                   </div>
@@ -94,7 +94,7 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
               </div>
             </div>
             
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2 flex-wrap sm:flex-nowrap">
               {headerExtra}
               {showDownloadAll && onDownloadAll && (
                 <Button
@@ -103,8 +103,10 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
                   leftIcon={<Download className="w-4 h-4" />}
                   onClick={onDownloadAll}
                   isLoading={isDownloading}
+                  className="flex-1 sm:flex-initial text-sm sm:text-base"
                 >
-                  {t('gallery.downloadAll')}
+                  <span className="hidden sm:inline">{t('gallery.downloadAll')}</span>
+                  <span className="sm:hidden">{t('common.downloadAll')}</span>
                 </Button>
               )}
               {showLogout && onLogout && (
@@ -113,8 +115,10 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
                   size="md"
                   leftIcon={<LogOut className="w-4 h-4" />}
                   onClick={onLogout}
+                  className="text-sm sm:text-base"
                 >
-                  {t('common.logout')}
+                  <span className="hidden sm:inline">{t('common.logout')}</span>
+                  <span className="sm:hidden"><LogOut className="w-4 h-4" /></span>
                 </Button>
               )}
             </div>
@@ -126,20 +130,20 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
       <main className="container">{children}</main>
 
       {/* Footer */}
-      <footer className="mt-12 py-8 border-t border-neutral-200">
-        <div className="container text-center">
+      <footer className="mt-8 sm:mt-12 py-6 sm:py-8 border-t border-neutral-200">
+        <div className="container text-center px-4">
           {brandingSettings?.support_email && (
-            <p className="text-sm text-neutral-600 mb-2">
+            <p className="text-xs sm:text-sm text-neutral-600 mb-2">
               {t('gallery.needHelp')}{' '}
               <a 
                 href={`mailto:${brandingSettings.support_email}`}
-                className="text-primary-600 hover:text-primary-700"
+                className="text-primary-600 hover:text-primary-700 break-all"
               >
                 {brandingSettings.support_email}
               </a>
             </p>
           )}
-          <p className="text-sm text-neutral-500">
+          <p className="text-xs sm:text-sm text-neutral-500">
             {brandingSettings?.footer_text || '© 2024 Your Company. All rights reserved.'}
           </p>
           {brandingSettings?.company_name && brandingSettings?.company_tagline && (
diff --git a/frontend/src/components/gallery/GalleryView.tsx b/frontend/src/components/gallery/GalleryView.tsx
index a932f57..bdcb9a7 100644
--- a/frontend/src/components/gallery/GalleryView.tsx
+++ b/frontend/src/components/gallery/GalleryView.tsx
@@ -236,9 +236,10 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
               size="md"
               leftIcon={<Upload className="w-4 h-4" />}
               onClick={() => setShowUploadModal(true)}
-              className="mr-2"
+              className="mr-2 text-sm sm:text-base"
             >
-              {t('upload.uploadPhotos')}
+              <span className="hidden sm:inline">{t('upload.uploadPhotos')}</span>
+              <span className="sm:hidden">{t('common.upload')}</span>
             </Button>
           )}
         </>
diff --git a/frontend/src/components/gallery/PhotoFilterBar.tsx b/frontend/src/components/gallery/PhotoFilterBar.tsx
index 6413a7e..7c87698 100644
--- a/frontend/src/components/gallery/PhotoFilterBar.tsx
+++ b/frontend/src/components/gallery/PhotoFilterBar.tsx
@@ -44,7 +44,7 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
   return (
     <div className="space-y-4">
       {/* Search and Sort */}
-      <div className="flex flex-col lg:flex-row gap-4">
+      <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
         {/* Search Bar */}
         <div className="flex-1">
           <Input
@@ -53,6 +53,7 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
             leftIcon={<Search className="w-5 h-5 text-neutral-400" />}
             value={searchTerm}
             onChange={(e) => onSearchChange(e.target.value)}
+            className="text-sm sm:text-base"
           />
         </div>
         
@@ -63,12 +64,14 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
             size="md"
             leftIcon={<SortAsc className="w-4 h-4" />}
             onClick={() => setShowSortMenu(!showSortMenu)}
+            className="w-full sm:w-auto text-sm sm:text-base"
           >
-            {t('common.sortBy')} {sortBy === 'date' ? t('gallery.sortByDate').replace('Sort by ', '') : sortBy === 'name' ? t('gallery.sortByName').replace('Sort by ', '') : t('gallery.sortBySize').replace('Sort by ', '')}
+            <span className="hidden sm:inline">{t('common.sortBy')} </span>
+            {sortBy === 'date' ? t('gallery.sortByDate').replace('Sort by ', '') : sortBy === 'name' ? t('gallery.sortByName').replace('Sort by ', '') : t('gallery.sortBySize').replace('Sort by ', '')}
           </Button>
           
           {showSortMenu && (
-            <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-neutral-200 py-1 z-10">
+            <div className="absolute right-0 sm:right-auto sm:left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-neutral-200 py-1 z-10">
               <button
                 onClick={() => {
                   onSortChange('date');
@@ -109,36 +112,42 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
 
       {/* Category Filter */}
       {categories && categories.length > 0 && (
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2 flex-wrap">
-            <Button
-              variant={selectedCategoryId === null ? 'primary' : 'outline'}
-              size="sm"
-              onClick={() => onCategoryChange(null)}
-              leftIcon={<Grid className="w-4 h-4" />}
-            >
-              {t('gallery.allPhotos')} ({photos.length})
-            </Button>
-            {categories.map((category) => {
-              const categoryPhotoCount = photos.filter(p => p.category_id === category.id).length;
-              if (categoryPhotoCount === 0) return null;
-              
-              return (
+        <div className="space-y-3">
+          <div className="flex items-start sm:items-center justify-between flex-col sm:flex-row gap-3">
+            <div className="w-full sm:w-auto overflow-x-auto pb-2 sm:pb-0">
+              <div className="flex items-center gap-2 min-w-max">
                 <Button
-                  key={category.id}
-                  variant={selectedCategoryId === category.id ? 'primary' : 'outline'}
+                  variant={selectedCategoryId === null ? 'primary' : 'outline'}
                   size="sm"
-                  onClick={() => onCategoryChange(category.id)}
+                  onClick={() => onCategoryChange(null)}
+                  leftIcon={<Grid className="w-3 h-3 sm:w-4 sm:h-4" />}
+                  className="text-xs sm:text-sm whitespace-nowrap"
                 >
-                  {category.name} ({categoryPhotoCount})
+                  {t('gallery.allPhotos')} ({photos.length})
                 </Button>
-              );
-            })}
-          </div>
+                {categories.map((category) => {
+                  const categoryPhotoCount = photos.filter(p => p.category_id === category.id).length;
+                  if (categoryPhotoCount === 0) return null;
+                  
+                  return (
+                    <Button
+                      key={category.id}
+                      variant={selectedCategoryId === category.id ? 'primary' : 'outline'}
+                      size="sm"
+                      onClick={() => onCategoryChange(category.id)}
+                      className="text-xs sm:text-sm whitespace-nowrap"
+                    >
+                      {category.name} ({categoryPhotoCount})
+                    </Button>
+                  );
+                })}
+              </div>
+            </div>
 
-          <p className="text-sm text-neutral-600">
-            {photoCount} {photoCount === 1 ? t('common.photo') : t('common.photos')}
-          </p>
+            <p className="text-xs sm:text-sm text-neutral-600 flex-shrink-0">
+              {photoCount} {photoCount === 1 ? t('common.photo') : t('common.photos')}
+            </p>
+          </div>
         </div>
       )}
     </div>
diff --git a/frontend/src/components/gallery/PhotoGrid.tsx b/frontend/src/components/gallery/PhotoGrid.tsx
index 5eb3557..ddd5388 100644
--- a/frontend/src/components/gallery/PhotoGrid.tsx
+++ b/frontend/src/components/gallery/PhotoGrid.tsx
@@ -127,13 +127,14 @@ export const PhotoGrid: React.FC<PhotoGridProps> = ({ photos, slug, categoryId }
     <>
       {/* Selection Mode Controls */}
       {photos.length > 1 && (
-        <div className="mb-4 flex items-center justify-between">
+        <div className="mb-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
           <div className="flex items-center gap-2">
             <Button
               variant="outline"
               size="sm"
               onClick={toggleSelectionMode}
               title={t('gallery.selectPhotosHint')}
+              className="text-xs sm:text-sm"
             >
               {isSelectionMode ? t('gallery.cancelSelection') : t('gallery.selectPhotos')}
             </Button>
@@ -145,6 +146,7 @@ export const PhotoGrid: React.FC<PhotoGridProps> = ({ photos, slug, categoryId }
                   setIsSelectionMode(true);
                   selectAll();
                 }}
+                className="text-xs sm:text-sm"
               >
                 {t('gallery.selectAll')}
               </Button>
@@ -152,26 +154,30 @@ export const PhotoGrid: React.FC<PhotoGridProps> = ({ photos, slug, categoryId }
           </div>
           
           {isSelectionMode && (
-            <div className="flex items-center gap-2">
-              <span className="text-sm text-neutral-600">
+            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-3">
+              <span className="text-xs sm:text-sm text-neutral-600">
                 {t('gallery.photosSelected', { count: selectedPhotos.size })}
               </span>
-              <Button variant="ghost" size="sm" onClick={selectAll}>
-                {t('gallery.selectAll')}
-              </Button>
-              <Button variant="ghost" size="sm" onClick={deselectAll}>
-                {t('gallery.deselectAll')}
-              </Button>
-              {selectedPhotos.size > 0 && (
-                <Button
-                  variant="primary"
-                  size="sm"
-                  leftIcon={<Package className="w-4 h-4" />}
-                  onClick={handleDownloadSelected}
-                >
-                  {t('gallery.downloadSelected', { count: selectedPhotos.size })}
+              <div className="flex items-center gap-2 flex-wrap">
+                <Button variant="ghost" size="sm" onClick={selectAll} className="text-xs sm:text-sm">
+                  {t('gallery.selectAll')}
                 </Button>
-              )}
+                <Button variant="ghost" size="sm" onClick={deselectAll} className="text-xs sm:text-sm">
+                  {t('gallery.deselectAll')}
+                </Button>
+                {selectedPhotos.size > 0 && (
+                  <Button
+                    variant="primary"
+                    size="sm"
+                    leftIcon={<Package className="w-4 h-4" />}
+                    onClick={handleDownloadSelected}
+                    className="text-xs sm:text-sm"
+                  >
+                    <span className="hidden sm:inline">{t('gallery.downloadSelected', { count: selectedPhotos.size })}</span>
+                    <span className="sm:hidden">{t('common.download')} ({selectedPhotos.size})</span>
+                  </Button>
+                )}
+              </div>
             </div>
           )}
         </div>
@@ -240,12 +246,12 @@ const PhotoThumbnail: React.FC<PhotoThumbnailProps> = ({
             isGallery={true}
           />
           
-          {/* Overlay on hover */}
-          <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-lg flex items-center justify-center gap-2">
+          {/* Overlay on hover/tap - Always visible on mobile for better UX */}
+          <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity duration-200 rounded-lg flex items-center justify-center gap-2">
             {!isSelectionMode && (
               <>
                 <button
-                  className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
+                  className="p-2 sm:p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
                   onClick={(e) => {
                     e.stopPropagation();
                     onClick(e);
@@ -255,7 +261,7 @@ const PhotoThumbnail: React.FC<PhotoThumbnailProps> = ({
                   <Maximize2 className="w-5 h-5 text-neutral-800" />
                 </button>
                 <button
-                  className="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
+                  className="p-2 sm:p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
                   onClick={onDownload}
                   aria-label="Download photo"
                 >
@@ -265,10 +271,10 @@ const PhotoThumbnail: React.FC<PhotoThumbnailProps> = ({
             )}
           </div>
 
-          {/* Selection checkbox */}
+          {/* Selection checkbox - Larger on mobile for easier tapping */}
           {isSelectionMode && (
-            <div className={`absolute top-2 right-2 ${isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity`}>
-              <div className={`w-6 h-6 rounded-full border-2 ${isSelected ? 'bg-primary-600 border-primary-600' : 'bg-white/80 border-white'} flex items-center justify-center transition-colors`}>
+            <div className={`absolute top-2 right-2 ${isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 sm:opacity-0 sm:group-hover:opacity-100'} transition-opacity`}>
+              <div className={`w-7 h-7 sm:w-6 sm:h-6 rounded-full border-2 ${isSelected ? 'bg-primary-600 border-primary-600' : 'bg-white/80 border-white'} flex items-center justify-center transition-colors`}>
                 {isSelected && <Check className="w-4 h-4 text-white" />}
               </div>
             </div>
diff --git a/frontend/src/components/gallery/UserPhotoUpload.tsx b/frontend/src/components/gallery/UserPhotoUpload.tsx
index 133efcf..1729360 100644
--- a/frontend/src/components/gallery/UserPhotoUpload.tsx
+++ b/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>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b90f9fa..1b53461 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -111,9 +111,9 @@
     @apply animate-pulse bg-neutral-200 rounded-lg;
   }
 
-  /* Gallery grid */
+  /* Gallery grid - Mobile optimized */
   .gallery-grid {
-    @apply grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6;
+    @apply grid gap-2 sm:gap-3 md:gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6;
   }
 
   /* Modal overlay */
diff --git a/frontend/src/pages/GalleryPage.tsx b/frontend/src/pages/GalleryPage.tsx
index 470c19d..638038d 100644
--- a/frontend/src/pages/GalleryPage.tsx
+++ b/frontend/src/pages/GalleryPage.tsx
@@ -227,37 +227,37 @@ export const GalleryPage: React.FC = () => {
   // Show login form
   return (
     <div className="min-h-screen" style={{ backgroundColor: 'var(--color-background, #fafafa)' }}>
-      <div className="min-h-screen flex items-center justify-center p-4">
+      <div className="min-h-screen flex items-center justify-center p-4 sm:p-6 lg:p-8">
         <div className="w-full max-w-md">
           {/* Logo/Header */}
-          <div className="text-center mb-8">
+          <div className="text-center mb-6 sm:mb-8">
             {settingsData?.branding_logo_url ? (
               <img 
                 src={`${import.meta.env.VITE_API_URL || 'http://localhost:3001'}${settingsData.branding_logo_url}`} 
                 alt={settingsData.branding_company_name || 'Company Logo'}
-                className="h-20 w-auto object-contain mx-auto mb-4"
+                className="h-16 sm:h-20 w-auto object-contain mx-auto mb-4"
               />
             ) : (
-              <div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl mb-4" style={{ backgroundColor: 'var(--color-primary, #5C8762)' }}>
-                <Camera className="w-10 h-10 text-white" />
+              <div className="inline-flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 rounded-2xl mb-4" style={{ backgroundColor: 'var(--color-primary, #5C8762)' }}>
+                <Camera className="w-8 h-8 sm:w-10 sm:h-10 text-white" />
               </div>
             )}
-            <h1 className="text-3xl font-bold mb-2" style={{ color: 'var(--color-text, #171717)' }}>
+            <h1 className="text-2xl sm:text-3xl font-bold mb-2 px-4" style={{ color: 'var(--color-text, #171717)' }}>
               {galleryInfo?.event_name}
             </h1>
-            <div className="flex items-center justify-center text-sm" style={{ color: 'var(--color-text, #171717)', opacity: 0.7 }}>
-              <Calendar className="w-4 h-4 mr-1" />
-              {format(parseISO(galleryInfo!.event_date), 'PP')}
+            <div className="flex items-center justify-center text-xs sm:text-sm" style={{ color: 'var(--color-text, #171717)', opacity: 0.7 }}>
+              <Calendar className="w-3 h-3 sm:w-4 sm:h-4 mr-1" />
+              <span className="truncate">{format(parseISO(galleryInfo!.event_date), 'PP')}</span>
             </div>
           </div>
 
           {/* Expiration Warning */}
           {daysUntilExpiration !== null && daysUntilExpiration <= 7 && (
-            <div className="mb-6 p-4 bg-amber-50 border border-amber-200 rounded-lg">
+            <div className="mb-4 sm:mb-6 p-3 sm:p-4 bg-amber-50 border border-amber-200 rounded-lg mx-4 sm:mx-0">
               <div className="flex items-start">
-                <AlertCircle className="w-5 h-5 text-amber-600 mt-0.5 mr-2 flex-shrink-0" />
+                <AlertCircle className="w-4 h-4 sm:w-5 sm:h-5 text-amber-600 mt-0.5 mr-2 flex-shrink-0" />
                 <div>
-                  <p className="text-sm font-medium text-amber-800">
+                  <p className="text-xs sm:text-sm font-medium text-amber-800">
                     {t('gallery.expiresIn', { count: daysUntilExpiration })}
                   </p>
                   <p className="text-xs text-amber-700 mt-1">
@@ -269,9 +269,9 @@ export const GalleryPage: React.FC = () => {
           )}
 
           {/* Login Card */}
-          <Card>
-            <CardContent className="p-6">
-              <h2 className="text-xl font-semibold mb-6">{t('auth.enterPassword')}</h2>
+          <Card className="mx-4 sm:mx-0">
+            <CardContent className="p-5 sm:p-6">
+              <h2 className="text-lg sm:text-xl font-semibold mb-4 sm:mb-6">{t('auth.enterPassword')}</h2>
               
               <form onSubmit={handleLogin} className="space-y-4">
                 <Input
@@ -282,6 +282,7 @@ export const GalleryPage: React.FC = () => {
                   onChange={(e) => setPassword(e.target.value)}
                   error={loginError || undefined}
                   autoFocus
+                  className="text-sm sm:text-base"
                 />
                 
                 <ReCaptcha
@@ -293,7 +294,7 @@ export const GalleryPage: React.FC = () => {
                   type="submit"
                   variant="primary"
                   size="lg"
-                  className="w-full"
+                  className="w-full text-sm sm:text-base"
                   isLoading={isLoggingIn}
                   disabled={isLoggingIn}
                 >
@@ -301,14 +302,14 @@ export const GalleryPage: React.FC = () => {
                 </Button>
               </form>
 
-              <p className="text-xs text-neutral-500 text-center mt-6">
+              <p className="text-xs text-neutral-500 text-center mt-4 sm:mt-6">
                 {t('auth.passwordHint')}
               </p>
             </CardContent>
           </Card>
 
           {/* Legal Links */}
-          <div className="text-center mt-6">
+          <div className="text-center mt-4 sm:mt-6">
             <div className="flex items-center justify-center gap-4">
               <Link 
                 to="/impressum"