fix(web): render whitespaces in file names and paths on photos and fo…

…lders pages correctly (#15266)
immich-app · Jan 12, 2025 · 77d4eb8 · 77d4eb8
1 parent e7abfe3
commit 77d4eb8
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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}