🎨 Three point leader is shown at the end, if the title is long (#1901)

Author: KATO-Hiro

src/lib/components/ExternalLinkWrapper.svelte

@@ -8,6 +8,7 @@
     textColorInDarkMode?: string;
     textOverflow?: string;
     iconSize?: number;
+    useInlineFlex?: boolean;
   }
 
   let {
@@ -17,12 +18,13 @@
     textColorInDarkMode = 'dark:text-primary-500',
     textOverflow = '',
     iconSize = 4,
+    useInlineFlex = true,
   }: Props = $props();
 </script>
 
 <a
   href={url}
-  class={`inline-flex items-center font-medium ${textSize} text-primary-600 hover:underline ${textColorInDarkMode}`}
+  class={`${useInlineFlex ? 'inline-flex' : ''} items-center font-medium ${textSize} text-primary-600 hover:underline ${textColorInDarkMode}`}
   target="_blank"
   rel="noreferrer"
 >

src/lib/components/TaskTables/TaskTableBodyCell.svelte

@@ -43,13 +43,14 @@
 {/snippet}
 
 {#snippet taskTitleAndExternalLink(taskResult: TaskResult)}
-  <div class="max-w-[calc(100%-2rem)] truncate">
+  <div class="max-w-[calc(100%-1rem)] truncate">
     <ExternalLinkWrapper
       url={getTaskUrl(taskResult.contest_id, taskResult.task_id)}
       description={removeTaskIndexFromTitle(taskResult.title, taskResult.task_table_index)}
       textSize="xs:text-md"
       textColorInDarkMode="dark:text-gray-300"
       iconSize={0}
+      useInlineFlex={false}
     />
   </div>
 {/snippet}