Truncate long title in breadcrumbs with ellipsis

We can still see the full title at the top of the issue.
radicle-dev · Dec 2, 2024 · 52c25a9 · 52c25a9
1 parent cd0bc9c
commit 52c25a9
Showing 1 changed file with 22 additions and 18 deletions.
diff --git a/src/views/repo/Issue.svelte b/src/views/repo/Issue.svelte
@@ -297,25 +297,29 @@
 
 <Layout>
   {#snippet breadcrumbs()}
-    <Link route={{ resource: "home" }}>
-      <NodeId
-        publicKey={config.publicKey}
-        alias={config.alias}
-        styleFontFamily="var(--font-family-sans-serif)"
-        styleFontSize="var(--font-size-tiny)" />
-    </Link>
-    <Link route={{ resource: "repo.issues", rid: repo.rid, status: "open" }}>
-      <div class="global-flex">
-        <Icon name="chevron-right" />
-        {project.data.name}
+    <div class="global-flex txt-overflow">
+      <Link route={{ resource: "home" }}>
+        <NodeId
+          publicKey={config.publicKey}
+          alias={config.alias}
+          styleFontFamily="var(--font-family-sans-serif)"
+          styleFontSize="var(--font-size-tiny)" />
+      </Link>
+      <Link route={{ resource: "repo.issues", rid: repo.rid, status: "open" }}>
+        <div class="global-flex">
+          <Icon name="chevron-right" />
+          {project.data.name}
+        </div>
+      </Link>
+      <Icon name="chevron-right" />
+      <Link route={{ resource: "repo.issues", rid: repo.rid, status: "open" }}>
+        Issues
+      </Link>
+      <Icon name="chevron-right" />
+      <div class="txt-overflow">
+        {issue.title}
       </div>
-    </Link>
-    <Icon name="chevron-right" />
-    <Link route={{ resource: "repo.issues", rid: repo.rid, status: "open" }}>
-      Issues
-    </Link>
-    <Icon name="chevron-right" />
-    {issue.title}
+    </div>
   {/snippet}
 
   {#snippet headerCenter()}