fix(web): wrap long album title (#27012)

web/package.json

@@ -27,7 +27,7 @@
     "@formatjs/icu-messageformat-parser": "^3.0.0",
     "@immich/justified-layout-wasm": "^0.4.3",
     "@immich/sdk": "workspace:*",
-    "@immich/ui": "^0.64.0",
+    "@immich/ui": "^0.65.3",
     "@mapbox/mapbox-gl-rtl-text": "0.3.0",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.14.0",

web/src/lib/components/album-page/album-description.svelte

@@ -33,13 +33,11 @@
 {#if isOwned}
   <Textarea
     bind:value={description}
-    class="outline-none border-b max-h-32 border-transparent pl-0 bg-transparent ring-0 focus:ring-0 resize-none focus:border-b-2 focus:border-immich-primary dark:focus:border-immich-dark-primary dark:bg-transparent"
-    rows={1}
-    grow
-    shape="rectangle"
+    variant="ghost"
     onfocusout={handleFocusOut}
     placeholder={$t('add_a_description')}
     data-testid="autogrow-textarea"
+    class="max-h-32"
     {@attach fromAction(shortcut, () => ({
       shortcut: { key: 'Enter', ctrl: true },
       onShortcut: (e) => e.currentTarget.blur(),

web/src/lib/components/album-page/album-title.svelte

@@ -3,59 +3,56 @@
   import { eventManager } from '$lib/managers/event-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAlbumInfo } from '@immich/sdk';
+  import { Textarea } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import { tv } from 'tailwind-variants';
+  import { fromAction } from 'svelte/attachments';
 
-  interface Props {
+  type Props = {
     id: string;
     albumName: string;
     isOwned: boolean;
     onUpdate: (albumName: string) => void;
-  }
+  };
 
   let { id, albumName = $bindable(), isOwned, onUpdate }: Props = $props();
 
   let newAlbumName = $derived(albumName);
 
-  const handleUpdateName = async () => {
+  const handleUpdate = async () => {
+    newAlbumName = newAlbumName.replaceAll('\n', ' ').trim();
+
     if (newAlbumName === albumName) {
       return;
     }
 
     try {
-      const response = await updateAlbumInfo({
-        id,
-        updateAlbumDto: {
-          albumName: newAlbumName,
-        },
-      });
+      const response = await updateAlbumInfo({ id, updateAlbumDto: { albumName: newAlbumName } });
       ({ albumName } = response);
       eventManager.emit('AlbumUpdate', response);
       onUpdate(albumName);
     } catch (error) {
       handleError(error, $t('errors.unable_to_save_album'));
-      return;
     }
   };
 
-  const styles = tv({
-    base: 'w-[99%] mb-2 border-b-2 border-transparent text-2xl md:text-4xl lg:text-6xl text-primary outline-none transition-all focus:border-b-2 focus:border-immich-primary focus:outline-none bg-light dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray placeholder:text-primary/90',
-    variants: {
-      isOwned: {
-        true: 'hover:border-gray-400',
-        false: 'hover:border-transparent',
-      },
-    },
-  });
+  const textClasses = 'text-2xl lg:text-6xl text-primary';
 </script>
 
-<input
-  use:shortcut={{ shortcut: { key: 'Enter' }, onShortcut: (e) => e.currentTarget.blur() }}
-  onblur={handleUpdateName}
-  class={styles({ isOwned })}
-  type="text"
-  bind:value={newAlbumName}
-  disabled={!isOwned}
-  title={$t('edit_title')}
-  placeholder={$t('add_a_title')}
-/>
+<div class="mb-2">
+  {#if isOwned}
+    <Textarea
+      bind:value={newAlbumName}
+      variant="ghost"
+      title={$t('edit_title')}
+      onblur={handleUpdate}
+      placeholder={$t('add_a_title')}
+      class={textClasses}
+      {@attach fromAction(shortcut, () => ({
+        shortcut: { key: 'Enter' },
+        onShortcut: (event) => event.currentTarget.blur(),
+      }))}
+    />
+  {:else}
+    <div class={textClasses}>{newAlbumName}</div>
+  {/if}
+</div>