From ad2a37113dc7568f0537a26152d279c4e523e9fb Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Fri, 1 Nov 2024 16:34:52 +0100
Subject: [PATCH] Fix fileitem path truncation (#5397)

* Update Textarea.svelte

* fix file path and name strings truncation

* add tooltip

* fix tooltip word break

* update tooltip name
---
 packages/ui/src/lib/Tooltip.svelte           |  1 +
 packages/ui/src/lib/file/FileListItem.svelte | 33 +++++++++++---------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/ui/src/lib/Tooltip.svelte b/packages/ui/src/lib/Tooltip.svelte
index 117a77abe..ad0fb68e9 100644
--- a/packages/ui/src/lib/Tooltip.svelte
+++ b/packages/ui/src/lib/Tooltip.svelte
@@ -101,6 +101,7 @@
 		max-width: 240px;
 		padding: 4px 8px;
 		z-index: var(--z-blocker);
+		word-break: break-word;
 		text-align: left;
 		box-shadow: var(--fx-shadow-s);
 	}
diff --git a/packages/ui/src/lib/file/FileListItem.svelte b/packages/ui/src/lib/file/FileListItem.svelte
index 9d283c392..4a5e42965 100644
--- a/packages/ui/src/lib/file/FileListItem.svelte
+++ b/packages/ui/src/lib/file/FileListItem.svelte
@@ -91,12 +91,15 @@
 	{/if}
 	<div class="info">
 		<FileIcon fileName={fileInfo.filename} />
-		<span class="text-12 name">
+		<span class="text-12 name truncate">
 			{fileInfo.filename}
 		</span>
-		<span class="text-12 path">
-			{fileInfo.path}
-		</span>
+
+		<Tooltip text={filePath} delay={1500}>
+			<span class="text-12 path truncate">
+				{fileInfo.path}
+			</span>
+		</Tooltip>
 	</div>
 
 	<div class="details">
@@ -181,8 +184,8 @@
 			opacity var(--transition-fast);
 	}
 
+	/* INFO */
 	.info {
-		pointer-events: none;
 		display: flex;
 		align-items: center;
 		flex-grow: 1;
@@ -192,21 +195,23 @@
 	}
 
 	.name {
-		color: var(--clr-scale-ntrl-0);
-		white-space: nowrap;
-		flex-shrink: 0;
-		text-overflow: ellipsis;
-		overflow: hidden;
+		flex-shrink: 1;
+		flex-grow: 0;
+		min-width: 40px;
+		pointer-events: none;
+		color: var(--clt-text-1);
 	}
 
 	.path {
-		color: var(--clr-scale-ntrl-0);
+		flex-shrink: 0;
+		flex-grow: 1;
+		flex-basis: 0px;
+		min-width: 50px;
+		color: var(--clt-text-1);
 		line-height: 120%;
 		flex-shrink: 1;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		overflow: hidden;
 		opacity: 0.3;
+		transition: opacity var(--transition-fast);
 	}
 
 	/* DETAILS */