paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Make gallery page fully mobile responsive

Browse Source 
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>
This commit is contained in:
paul
2025-07-09 09:53:24 +02:00
parent f5cf757142
commit d8fb4c9565
7 changed files with 131 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/gallery/GalleryLayout.tsx
+27 -23
View File
@@ -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 && (
frontend/src/components/gallery/GalleryView.tsx
+3 -2
View File
@@ -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>
)}
</>
frontend/src/components/gallery/PhotoFilterBar.tsx
+37 -28
View File
@@ -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>
frontend/src/components/gallery/PhotoGrid.tsx
+31 -25
View File
@@ -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>
frontend/src/components/gallery/UserPhotoUpload.tsx
+12 -10
View File
@@ -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>
frontend/src/index.css
+2 -2
View File
@@ -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 */
frontend/src/pages/GalleryPage.tsx
+19 -18
View File
@@ -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"