From 125a91d0a06e0b1574478a4c7a5f65cb8680910f Mon Sep 17 00:00:00 2001
From: Jin Xuan Ow Yong <87897838+jinxuan-owyong@users.noreply.github.com>
Date: Thu, 19 Jun 2025 18:03:32 +0800
Subject: [PATCH] fix(web): wrap long names with textarea

---
 web/src/routes/(user)/people/+page.svelte | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index ead776c8b82a9..22db63c16f79b 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -370,16 +370,15 @@
             onToggleFavorite={() => handleToggleFavorite(person)}
           />
 
-          <input
-            type="text"
-            class=" bg-white dark:bg-immich-dark-gray border-gray-100 placeholder-gray-400 text-center dark:border-gray-900 w-full rounded-2xl mt-2 py-2 text-sm text-immich-primary dark:text-immich-dark-primary"
+          <textarea
+            class="bg-white dark:bg-immich-dark-gray border-gray-100 placeholder-gray-400 text-center dark:border-gray-900 w-full rounded-2xl mt-2 p-2 text-sm text-immich-primary dark:text-immich-dark-primary resize-none field-sizing-content"
             value={person.name}
             placeholder={$t('add_a_name')}
             use:shortcut={{ shortcut: { key: 'Enter' }, onShortcut: (e) => e.currentTarget.blur() }}
             onfocusin={() => onNameChangeInputFocus(person)}
             onfocusout={() => onNameChangeSubmit(newName, person)}
             oninput={(event) => onNameChangeInputUpdate(event)}
-          />
+          ></textarea>
         </div>
       {/snippet}
     </PeopleInfiniteScroll>