From 52c25a905d8edbbe98523c1e80e9edfbd2ce7030 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Mon, 2 Dec 2024 10:45:24 +0100
Subject: [PATCH] Truncate long title in breadcrumbs with ellipsis

We can still see the full title at the top of the issue.
---
 src/views/repo/Issue.svelte | 40 ++++++++++++++++++++-----------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/views/repo/Issue.svelte b/src/views/repo/Issue.svelte
index f8c43d3..1da20f0 100644
--- 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()}