Fix long gallery titles overflowing the add to gallery dialog

frontend/src/components/gallery/AddToGalleryModal.tsx

@@ -72,7 +72,7 @@ export default function AddToGalleryModal({
                 type="button"
                 disabled={adding}
                 onClick={() => void handleAddToGallery(gallery.id)}
-                className="rounded-lg border border-gray-200 px-4 py-3 text-left transition disabled:opacity-50 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 disabled:opacity-50 hover:bg-gray-100 dark:border-[#504b46] dark:hover:bg-[#35322e]"
               >
                 {gallery.title}
               </button>

frontend/src/components/gallery/CreateGalleryModal.tsx

@@ -1,5 +1,5 @@
 import { LucideX } from "lucide-react";
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useCreateGallery } from "../../hooks/gallery/useCreateGallery";
 
 type CreateGalleryModalProps = {
@@ -13,6 +13,15 @@ export default function CreateGalleryModal({
   const [error, setError] = useState("");
 
   const { createGallery, isCreating } = useCreateGallery();
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    dialog.showModal();
+    return () => dialog.close();
+  }, []);
 
   async function handleCreateGallery() {
     if (!title.trim() || isCreating) return;

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:focus-visible:outline-[#e6dfd6] 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:focus-visible:outline-[#e6dfd6] dark:text-gray-300 dark:hover:bg-[#302e2a]"
               >
                 <Pencil size={20} aria-hidden="true" />
               </button>

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