From df7dbffbffb180e62af0d2b58326f9de0f515439 Mon Sep 17 00:00:00 2001
From: Paul Nothaft <paul@MacStudio-von-Paul.local>
Date: Fri, 16 Jan 2026 14:29:49 +0100
Subject: [PATCH] fix: mobile upload button visibility in gallery

- Remove hidden sm:block wrapper hiding upload button on mobile for Grid layout
- Add upload button to GallerySidebar using existing allowUploads/onUploadClick props
- Ensures upload button is visible in both header and sidebar on all devices

Closes #113
---
 .../src/components/gallery/GalleryLayout.tsx  |  6 +-----
 .../src/components/gallery/GallerySidebar.tsx | 20 ++++++++++++++++++-
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/gallery/GalleryLayout.tsx b/frontend/src/components/gallery/GalleryLayout.tsx
index be708d27..e6baf342 100644
--- a/frontend/src/components/gallery/GalleryLayout.tsx
+++ b/frontend/src/components/gallery/GalleryLayout.tsx
@@ -240,11 +240,7 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
               {/* Right side - Action buttons */}
               <div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
                 {/* Extra header items (upload button, etc.) */}
-                {headerExtra && (
-                  <div className="hidden sm:block">
-                    {headerExtra}
-                  </div>
-                )}
+                {headerExtra}
                 
                 {/* Download all button - hidden on mobile when sidebar is shown */}
                 {showDownloadAll && onDownloadAll && (
diff --git a/frontend/src/components/gallery/GallerySidebar.tsx b/frontend/src/components/gallery/GallerySidebar.tsx
index 8f9febdc..4c5a9ddf 100644
--- a/frontend/src/components/gallery/GallerySidebar.tsx
+++ b/frontend/src/components/gallery/GallerySidebar.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { X, Download, Filter, SortAsc, Search, Calendar, Type, HardDrive, Check, Star } from 'lucide-react';
+import { X, Download, Filter, SortAsc, Search, Calendar, Type, HardDrive, Check, Star, Upload } from 'lucide-react';
 import { Button } from '../common';
 import { PhotoCategory } from '../../types';
 import { useTranslation } from 'react-i18next';
@@ -139,6 +139,24 @@ export const GallerySidebar: React.FC<GallerySidebarProps> = ({
 
         {/* Content */}
         <div className="gallery-sidebar-content flex-1 overflow-y-auto">
+          {/* Upload Section - Show prominently at top for mobile users */}
+          {allowUploads && onUploadClick && (
+            <div className="gallery-sidebar-section gallery-sidebar-upload p-4 border-b border-neutral-200">
+              <Button
+                variant="outline"
+                size="sm"
+                leftIcon={<Upload className="w-4 h-4" />}
+                onClick={() => {
+                  onUploadClick();
+                  if (isMobile) onClose();
+                }}
+                className="gallery-btn w-full"
+              >
+                {t('upload.uploadPhotos')}
+              </Button>
+            </div>
+          )}
+
           {/* Search Section - Hidden for carousel layout */}
           {galleryLayout !== 'carousel' && (
             <div className="gallery-sidebar-section gallery-sidebar-search p-4 border-b border-neutral-200">