fix(web): long text taking more width than expected in duplicate manager (#24547)

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",

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>
 

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}

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>