fix(web): render whitespaces in file names and paths on photos and folders pages correctly (#15266)

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}

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>

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}