From b409740b09a2c88c6c0b87c0b9f6579ab30d6209 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Sun, 8 Nov 2026 16:54:21 +0100
Subject: [PATCH 1/2] test: provide gallery visibility in catalogue fixtures

---
 frontend/src/test/CatalogueControls.test.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/test/CatalogueControls.test.tsx b/frontend/src/test/CatalogueControls.test.tsx
index c2e0454..a32c9b5 100644
--- a/frontend/src/test/CatalogueControls.test.tsx
+++ b/frontend/src/test/CatalogueControls.test.tsx
@@ -47,6 +47,7 @@ function createProps(
     showFilters: false,
     onToggleFilters: vi.fn(),
     paginationVisible: false,
+    galleryVisible: false,
     ...overrides,
   };
 }

From c44217dc75c3e8f0e8ebdce47d823e30c8c62f47 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Sun, 8 Nov 2026 16:54:26 +0100
Subject: [PATCH 2/2] fix: wrap long gallery titles within cards

---
 frontend/src/components/GalleryCard.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/GalleryCard.tsx b/frontend/src/components/GalleryCard.tsx
index da2f4e0..d5bf25f 100644
--- a/frontend/src/components/GalleryCard.tsx
+++ b/frontend/src/components/GalleryCard.tsx
@@ -16,7 +16,7 @@ export default function GalleryCard({
   return (
     <Link
       to={`/galleries/${id}`}
-      className="block w-64 rounded-xl focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-gray-700"
+      className="block w-64 max-w-full min-w-0 rounded-xl focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-gray-700"
     >
       {imageUrls.length === 0 ? (
         <div className="flex h-40 w-full items-center justify-center rounded-xl bg-gray-200 dark:bg-[#302e2a]">
@@ -61,7 +61,9 @@ export default function GalleryCard({
         </div>
       )}
 
-      <h2 className="mt-3 text-lg font-bold">{title}</h2>
+      <h2 className="mt-3 text-lg font-bold [overflow-wrap:anywhere]">
+        {title}
+      </h2>
 
       <p className="text-sm text-gray-700 dark:text-gray-300">
         {artworkCount} {artworkCount === 1 ? "artwork" : "artworks"}