fix(gallery/sidebar): compact icon-only feedback filter in sidebar (vertical, small) to avoid overflow; use GalleryFilter variant=compact

frontend/src/components/gallery/GalleryFilter.tsx

@@ -13,6 +13,7 @@ interface GalleryFilterProps {
   favoriteCount?: number;
   className?: string;
   isMobile?: boolean;
+  variant?: 'default' | 'compact';
 }
 
 export const GalleryFilter: React.FC<GalleryFilterProps> = ({
@@ -22,7 +23,8 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
   likeCount = 0,
   favoriteCount = 0,
   className = '',
-  isMobile = false
+  isMobile = false,
+  variant = 'default'
 }) => {
   const { t } = useTranslation();
 
@@ -30,6 +32,43 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
     return null;
   }
 
+  // Compact icon-only vertical variant (used in sidebar and tight spaces)
+  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>
+      </div>
+    );
+  }
+
   return (
     <div className={`${className}`}>
       {/* Mobile-optimized vertical layout */}
@@ -119,4 +158,4 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
       )}
     </div>
   );
-};
+};

frontend/src/components/gallery/GallerySidebar.tsx

@@ -225,6 +225,7 @@ export const GallerySidebar: React.FC<GallerySidebarProps> = ({
                 likeCount={likeCount}
                 favoriteCount={favoriteCount}
                 className="w-full"
+                variant="compact"
               />
             </div>
           )}
@@ -328,4 +329,4 @@ export const GallerySidebar: React.FC<GallerySidebarProps> = ({
 
     </>
   );
-};
+};