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

pnpm-lock.yaml

@@ -747,8 +747,8 @@ importers:
         specifier: workspace:*
         version: link:../open-api/typescript-sdk
       '@immich/ui':
-        specifier: ^0.64.0
+        specifier: ^0.65.3
-        version: 0.64.0(@sveltejs/kit@2.53.4(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.53.7)(vite@7.3.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.53.7)(typescript@5.9.3)(vite@7.3.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.53.7)
+        version: 0.65.3(@sveltejs/kit@2.53.4(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.53.7)(vite@7.3.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.53.7)(typescript@5.9.3)(vite@7.3.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.53.7)
       '@mapbox/mapbox-gl-rtl-text':
         specifier: 0.3.0
         version: 0.3.0
@@ -3035,8 +3035,8 @@ packages:
     peerDependencies:
       svelte: ^5.0.0
 
-  '@immich/ui@0.64.0':
+  '@immich/ui@0.65.3':
-    resolution: {integrity: sha512-jbPN1x9KAAcW18h4RO7skbFYjkR4Lg+mEVjSDzsPC2NBNzSi4IA0PIHhFEwnD5dk4OS7+UjRG8m5/QTyotrm4A==}
+    resolution: {integrity: sha512-jMXzCzMNTcCdWXt9IUP7GkALE5oEvPQk/jCOuI2bfxsxCZFzMkUfUS+AV83Vg1vQ6l+g39PbKSPKBEzv125ATQ==}
     peerDependencies:
       svelte: ^5.0.0
 
@@ -14955,7 +14955,7 @@ snapshots:
       node-emoji: 2.2.0
       svelte: 5.53.7
 
-  '@immich/ui@0.64.0(@sveltejs/kit@2.53.4(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.53.7)(vite@7.3.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.53.7)(typescript@5.9.3)(vite@7.3.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.53.7)':
+  '@immich/ui@0.65.3(@sveltejs/kit@2.53.4(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.53.7)(vite@7.3.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.53.7)(typescript@5.9.3)(vite@7.3.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.53.7)':
     dependencies:
       '@immich/svelte-markdown-preprocess': 0.2.1(svelte@5.53.7)
       '@internationalized/date': 3.10.0

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"
+    variant="ghost"
-    rows={1}
-    grow
-    shape="rectangle"
     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({
+      const response = await updateAlbumInfo({ id, updateAlbumDto: { albumName: newAlbumName } });
-        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({
+  const textClasses = 'text-2xl lg:text-6xl text-primary';
-    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',
-      },
-    },
-  });
 </script>
 
-<input
+<div class="mb-2">
-  use:shortcut={{ shortcut: { key: 'Enter' }, onShortcut: (e) => e.currentTarget.blur() }}
+  {#if isOwned}
-  onblur={handleUpdateName}
+    <Textarea
-  class={styles({ isOwned })}
-  type="text"
       bind:value={newAlbumName}
-  disabled={!isOwned}
+      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>