From 77d4eb8787492b126c1e0ae1cbb609a55f490957 Mon Sep 17 00:00:00 2001
From: Ferdinand Holzer <fholzer@users.noreply.github.com>
Date: Sun, 12 Jan 2025 05:10:33 +0100
Subject: [PATCH] fix(web): render whitespaces in file names and paths on
 photos and folders pages correctly (#15266)

---
 web/src/lib/components/asset-viewer/detail-panel.svelte    | 4 ++--
 .../shared-components/gallery-viewer/gallery-viewer.svelte | 2 +-
 .../components/shared-components/tree/breadcrumbs.svelte   | 7 +++++--
 .../shared-components/tree/tree-item-thumbnails.svelte     | 4 +++-
 web/src/lib/components/shared-components/tree/tree.svelte  | 2 +-
 5 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index 11425067f5..fde4efae95 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -364,7 +364,7 @@
       <div><Icon path={mdiImageOutline} size="24" /></div>
 
       <div>
-        <p class="break-all flex place-items-center gap-2">
+        <p class="break-all flex place-items-center gap-2 whitespace-pre-wrap">
           {asset.originalFileName}
           {#if isOwner}
             <CircleIconButton
@@ -381,7 +381,7 @@
             class="text-xs opacity-50 break-all pb-2 hover:dark:text-immich-dark-primary hover:text-immich-primary"
             transition:slide={{ duration: 250 }}
           >
-            <a href={getAssetFolderHref(asset)} title={$t('go_to_folder')}>
+            <a href={getAssetFolderHref(asset)} title={$t('go_to_folder')} class="whitespace-pre-wrap">
               {asset.originalPath}
             </a>
           </p>
diff --git a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
index 8f8a067a90..65c6c20e7b 100644
--- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
+++ b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
@@ -354,7 +354,7 @@
         />
         {#if showAssetName}
           <div
-            class="absolute text-center p-1 text-xs font-mono font-semibold w-full bottom-0 bg-gradient-to-t bg-slate-50/75 overflow-clip text-ellipsis"
+            class="absolute text-center p-1 text-xs font-mono font-semibold w-full bottom-0 bg-gradient-to-t bg-slate-50/75 overflow-clip text-ellipsis whitespace-pre-wrap"
           >
             {asset.originalFileName}
           </div>
diff --git a/web/src/lib/components/shared-components/tree/breadcrumbs.svelte b/web/src/lib/components/shared-components/tree/breadcrumbs.svelte
index 1d841339bc..c4ea635687 100644
--- a/web/src/lib/components/shared-components/tree/breadcrumbs.svelte
+++ b/web/src/lib/components/shared-components/tree/breadcrumbs.svelte
@@ -52,9 +52,12 @@
         >
           <Icon path={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size={16} ariaHidden />
           {#if isLastSegment}
-            <p class="cursor-default">{segment}</p>
+            <p class="cursor-default whitespace-pre-wrap">{segment}</p>
           {:else}
-            <a class="underline hover:font-semibold" href={getLink(pathSegments.slice(0, index + 1).join('/'))}>
+            <a
+              class="underline hover:font-semibold whitespace-pre-wrap"
+              href={getLink(pathSegments.slice(0, index + 1).join('/'))}
+            >
               {segment}
             </a>
           {/if}
diff --git a/web/src/lib/components/shared-components/tree/tree-item-thumbnails.svelte b/web/src/lib/components/shared-components/tree/tree-item-thumbnails.svelte
index b84f25060e..36ef781656 100644
--- a/web/src/lib/components/shared-components/tree/tree-item-thumbnails.svelte
+++ b/web/src/lib/components/shared-components/tree/tree-item-thumbnails.svelte
@@ -22,7 +22,9 @@
         type="button"
       >
         <Icon path={icon} class="text-immich-primary dark:text-immich-dark-primary" size={64} />
-        <p class="text-sm dark:text-gray-200 text-nowrap text-ellipsis overflow-clip w-full">{item}</p>
+        <p class="text-sm dark:text-gray-200 text-nowrap text-ellipsis overflow-clip w-full whitespace-pre-wrap">
+          {item}
+        </p>
       </button>
     {/each}
   </div>
diff --git a/web/src/lib/components/shared-components/tree/tree.svelte b/web/src/lib/components/shared-components/tree/tree.svelte
index c6a13ec197..ccc4181abe 100644
--- a/web/src/lib/components/shared-components/tree/tree.svelte
+++ b/web/src/lib/components/shared-components/tree/tree.svelte
@@ -47,7 +47,7 @@
       size={20}
     />
   </div>
-  <span class="text-nowrap overflow-hidden text-ellipsis font-mono pl-1 pt-1">{value}</span>
+  <span class="text-nowrap overflow-hidden text-ellipsis font-mono pl-1 pt-1 whitespace-pre-wrap">{value}</span>
 </a>
 
 {#if isOpen}