From ca9167eb214bec318e298fdd67cf5334bf2b95cc Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Tue, 10 Nov 2026 22:38:02 +0100
Subject: [PATCH 1/3] fix: wrap long gallery titles in the add-to-gallery
 dialog

---
 frontend/src/components/gallery/AddToGalleryModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/gallery/AddToGalleryModal.tsx b/frontend/src/components/gallery/AddToGalleryModal.tsx
index c7dd44c..b6a83f8 100644
--- a/frontend/src/components/gallery/AddToGalleryModal.tsx
+++ b/frontend/src/components/gallery/AddToGalleryModal.tsx
@@ -165,7 +165,7 @@ export default function AddToGalleryModal({
                 key={gallery.id}
                 type="button"
                 onClick={() => void handleAddToGallery(gallery.id)}
-                className="rounded-lg border border-gray-200 px-4 py-3 text-left transition hover:bg-gray-100 dark:border-[#504b46] dark:hover:bg-[#35322e]"
+                className="rounded-lg border border-gray-200 px-4 py-3 text-left wrap-anywhere transition hover:bg-gray-100 dark:border-[#504b46] dark:hover:bg-[#35322e]"
               >
                 {gallery.title}
               </button>

From ea39b04c4586fa32ce21a24b5579dfe4aaa6ab7d Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Tue, 10 Nov 2026 22:51:20 +0100
Subject: [PATCH 2/3] fix: place the gallery rename button after the title on
 mobile

---
 frontend/src/components/gallery/GalleryHeader.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/gallery/GalleryHeader.tsx b/frontend/src/components/gallery/GalleryHeader.tsx
index b14de6a..3115c2f 100644
--- a/frontend/src/components/gallery/GalleryHeader.tsx
+++ b/frontend/src/components/gallery/GalleryHeader.tsx
@@ -81,8 +81,8 @@ export default function GalleryHeader({
             </button>
           </form>
         ) : (
-          <div className="flex items-center gap-3">
-            <h1 className="min-w-0 wrap-break-word font-serif text-4xl font-normal leading-tight sm:text-5xl">
+          <div className="sm:flex sm:items-center sm:gap-3">
+            <h1 className="inline min-w-0 wrap-break-word font-serif text-4xl font-normal leading-tight sm:text-5xl">
               {title}
             </h1>
 
@@ -92,7 +92,7 @@ export default function GalleryHeader({
                 onClick={() => onStartRenaming(title)}
                 aria-label="Rename gallery"
                 title="Rename gallery"
-                className="inline-flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center rounded-full text-gray-600 hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:text-gray-300 dark:hover:bg-[#302e2a]"
+                className="inline-flex ml-3 align-middle sm:ml-0 min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center rounded-full text-gray-600 hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:text-gray-300 dark:hover:bg-[#302e2a]"
               >
                 <Pencil size={20} aria-hidden="true" />
               </button>

From 8e19eff5124701cfa7ac5545be518cccf9d0dfa7 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Tue, 10 Nov 2026 22:53:30 +0100
Subject: [PATCH 3/3] style: use an icon for the cover image button

---
 frontend/src/components/profile/ProfileHeader.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/profile/ProfileHeader.tsx b/frontend/src/components/profile/ProfileHeader.tsx
index e1b4483..9ae31c9 100644
--- a/frontend/src/components/profile/ProfileHeader.tsx
+++ b/frontend/src/components/profile/ProfileHeader.tsx
@@ -45,10 +45,11 @@ export default function ProfileHeader({
 
         <button
           type="button"
+          aria-label="Change cover image"
           onClick={() => coverInputRef.current?.click()}
-          className="absolute bottom-4 right-4 z-20 cursor-pointer rounded-full bg-white px-4 py-2 text-sm text-gray-700 shadow-sm hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:bg-[#242321] dark:text-gray-200 dark:hover:bg-[#35322e] dark:focus-visible:outline-white"
+          className="absolute bottom-4 right-4 z-20 grid size-11 cursor-pointer place-items-center rounded-full bg-white text-gray-700 shadow-sm hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:bg-[#242321] dark:text-gray-200 dark:hover:bg-[#35322e] dark:focus-visible:outline-white"
         >
-          Change cover image
+          <Pencil size={18} strokeWidth={1.75} aria-hidden="true" />
         </button>
 
         <input