mirror of
https://github.com/immich-app/immich.git
synced 2025-01-23 20:22:45 +01:00
fix(web): render whitespaces in file names and paths on photos and folders pages correctly (#15266)
This commit is contained in:
parent
e7abfe3067
commit
77d4eb8787
5 changed files with 12 additions and 7 deletions
web/src/lib/components
asset-viewer
shared-components
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in a new issue