From 7efce389b2d33692241fa56149eb657745e379b9 Mon Sep 17 00:00:00 2001
From: Hemendra Singh Shekhawat
 <110180366+HemendraSinghShekhawat@users.noreply.github.com>
Date: Tue, 6 Jan 2026 18:17:41 +0530
Subject: [PATCH] fix(web): long text taking more width than expected in
 duplicate manager (#24547)

---
 i18n/en.json                                              | 2 +-
 .../utilities-page/duplicates/duplicate-asset.svelte      | 8 ++++++--
 .../duplicates/duplicates-compare-control.svelte          | 2 +-
 .../components/utilities-page/duplicates/info-row.svelte  | 4 ++--
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/i18n/en.json b/i18n/en.json
index ba3785ab35..5af40ea51a 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -1140,7 +1140,7 @@
   "features": "Features",
   "features_in_development": "Features in Development",
   "features_setting_description": "Manage the app features",
-  "file_name": "File name",
+  "file_name": "File name: {file_name}",
   "file_name_or_extension": "File name or extension",
   "file_size": "File size",
   "filename": "Filename",
diff --git a/web/src/lib/components/utilities-page/duplicates/duplicate-asset.svelte b/web/src/lib/components/utilities-page/duplicates/duplicate-asset.svelte
index c0f5428c81..6b69ba8555 100644
--- a/web/src/lib/components/utilities-page/duplicates/duplicate-asset.svelte
+++ b/web/src/lib/components/utilities-page/duplicates/duplicate-asset.svelte
@@ -101,7 +101,7 @@
   }
 </script>
 
-<div class="min-w-60 transition-colors border rounded-lg">
+<div class="min-w-60 transition-colors border rounded-lg flex-1">
   <div class="relative w-full">
     <button
       type="button"
@@ -168,7 +168,11 @@
       ? 'bg-success/15 dark:bg-[#001a06]'
       : 'bg-transparent'}"
   >
-    <InfoRow icon={mdiImageOutline} highlight={hasDifferentValues.fileName} title={$t('file_name')}>
+    <InfoRow
+      icon={mdiImageOutline}
+      highlight={hasDifferentValues.fileName}
+      title={$t('file_name', { values: { file_name: asset.originalFileName ?? '' } })}
+    >
       {asset.originalFileName}
     </InfoRow>
 
diff --git a/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte b/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte
index 3509f07fb0..2afeebc559 100644
--- a/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte
+++ b/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte
@@ -170,7 +170,7 @@
   </div>
 
   <div class="overflow-x-auto p-2">
-    <div class="flex flex-nowrap gap-1 place-items-center justify-center min-w-full w-fit mx-auto">
+    <div class="flex flex-nowrap gap-1 place-items-start justify-center min-w-full w-fit mx-auto">
       {#each assets as asset (asset.id)}
         <DuplicateAsset {assets} {asset} {onSelectAsset} isSelected={selectedAssetIds.has(asset.id)} {onViewAsset} />
       {/each}
diff --git a/web/src/lib/components/utilities-page/duplicates/info-row.svelte b/web/src/lib/components/utilities-page/duplicates/info-row.svelte
index e237d70feb..a4ff87e83f 100644
--- a/web/src/lib/components/utilities-page/duplicates/info-row.svelte
+++ b/web/src/lib/components/utilities-page/duplicates/info-row.svelte
@@ -15,8 +15,8 @@
 
 <div class="grid grid-cols-[25px_1fr] w-full px-1 py-0.5" class:border-b={borderBottom} {title}>
   <Icon {icon} size="18" class="text-dark/25 {highlight ? 'text-primary/75' : ''}" />
-  <div class="justify-self-end text-end rounded px-1 transition-colors">
-    <Text size="tiny" class={highlight ? 'font-semibold text-primary' : ''}>
+  <div class="justify-self-end text-end rounded px-1 transition-colors w-full overflow-hidden">
+    <Text size="tiny" class={`${highlight ? 'font-semibold text-primary' : ''} text-ellipsis w-full overflow-hidden`}>
       {@render children?.()}
     </Text>
   </div>