From 3a6d06192a280ead8bd5d1fbfe06554e63f3346e Mon Sep 17 00:00:00 2001
From: paul <paul-nothaft@hotmail.de>
Date: Tue, 16 Sep 2025 09:15:47 +0200
Subject: [PATCH] fix(gallery): feedback filter headline + horizontal icons in
 sidebar (compact variant); ensure sidebar content scrolls (flex-col
 container)

---
 .../src/components/gallery/GalleryFilter.tsx  | 61 ++++++++++---------
 .../src/components/gallery/GallerySidebar.tsx |  2 +-
 2 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/gallery/GalleryFilter.tsx b/frontend/src/components/gallery/GalleryFilter.tsx
index 5d9c885..2b83034 100644
--- a/frontend/src/components/gallery/GalleryFilter.tsx
+++ b/frontend/src/components/gallery/GalleryFilter.tsx
@@ -36,34 +36,39 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
   if (variant === 'compact') {
     return (
       <div className={`${className}`}>
-        <div className="flex flex-col items-start gap-1">
-          <Button
-            variant={currentFilter === 'all' ? 'primary' : 'outline'}
-            size="sm"
-            onClick={() => onFilterChange('all')}
-            className="p-1 w-8 h-8 flex items-center justify-center"
-            aria-label={t('gallery.all', 'All')}
-          >
-            <svg viewBox="0 0 24 24" className="w-3.5 h-3.5 text-current"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 8v-8h8v8h-8z"/></svg>
-          </Button>
-          <Button
-            variant={currentFilter === 'liked' ? 'primary' : 'outline'}
-            size="sm"
-            onClick={() => onFilterChange('liked')}
-            className="p-1 w-8 h-8 flex items-center justify-center"
-            aria-label={t('feedback.likes', 'Likes')}
-          >
-            <Heart className="w-3.5 h-3.5" />
-          </Button>
-          <Button
-            variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
-            size="sm"
-            onClick={() => onFilterChange('favorited')}
-            className="p-1 w-8 h-8 flex items-center justify-center"
-            aria-label={t('feedback.favorites', 'Favorites')}
-          >
-            <Star className="w-3.5 h-3.5" />
-          </Button>
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-neutral-700 whitespace-nowrap">
+            {t('gallery.feedbackFilter', 'Feedback Filter')}
+          </span>
+          <div className="flex items-center gap-1">
+            <Button
+              variant={currentFilter === 'all' ? 'primary' : 'outline'}
+              size="sm"
+              onClick={() => onFilterChange('all')}
+              className="p-1 w-8 h-8 flex items-center justify-center"
+              aria-label={t('gallery.all', 'All')}
+            >
+              <svg viewBox="0 0 24 24" className="w-3.5 h-3.5 text-current"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 8v-8h8v8h-8z"/></svg>
+            </Button>
+            <Button
+              variant={currentFilter === 'liked' ? 'primary' : 'outline'}
+              size="sm"
+              onClick={() => onFilterChange('liked')}
+              className="p-1 w-8 h-8 flex items-center justify-center"
+              aria-label={t('feedback.likes', 'Likes')}
+            >
+              <Heart className="w-3.5 h-3.5" />
+            </Button>
+            <Button
+              variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
+              size="sm"
+              onClick={() => onFilterChange('favorited')}
+              className="p-1 w-8 h-8 flex items-center justify-center"
+              aria-label={t('feedback.favorites', 'Favorites')}
+            >
+              <Star className="w-3.5 h-3.5" />
+            </Button>
+          </div>
         </div>
       </div>
     );
diff --git a/frontend/src/components/gallery/GallerySidebar.tsx b/frontend/src/components/gallery/GallerySidebar.tsx
index 0a2aaf5..3a0663a 100644
--- a/frontend/src/components/gallery/GallerySidebar.tsx
+++ b/frontend/src/components/gallery/GallerySidebar.tsx
@@ -114,7 +114,7 @@ export const GallerySidebar: React.FC<GallerySidebarProps> = ({
       <div
         ref={sidebarRef}
         className={`
-          fixed top-0 left-0 h-full bg-white shadow-xl z-50 transition-transform duration-300 ease-in-out
+          fixed top-0 left-0 h-full bg-white shadow-xl z-50 transition-transform duration-300 ease-in-out flex flex-col
           ${isMobile ? 'w-full max-w-sm' : 'w-80'}
           ${isOpen ? 'translate-x-0' : '-translate-x-full'}
         `}