From aad7a612c1cfbc91fef665d430898fc1ebf88fa2 Mon Sep 17 00:00:00 2001
From: Mark Watson <mkw5053@gmail.com>
Date: Tue, 7 Jan 2025 06:48:06 -0800
Subject: [PATCH] fix(frontend): prevent repository name overflow in project
 menu card (#6091)

Co-authored-by: sp.wack <83104063+amanape@users.noreply.github.com>
---
 .../project-menu/project-menu-details.tsx      | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/features/project-menu/project-menu-details.tsx b/frontend/src/components/features/project-menu/project-menu-details.tsx
index 8bb67a2ec8ba..3766d00e30c0 100644
--- a/frontend/src/components/features/project-menu/project-menu-details.tsx
+++ b/frontend/src/components/features/project-menu/project-menu-details.tsx
@@ -16,16 +16,24 @@ export function ProjectMenuDetails({
 }: ProjectMenuDetailsProps) {
   const { t } = useTranslation();
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col min-w-0">
       <a
         href={`https://github.com/${repoName}`}
         target="_blank"
         rel="noreferrer noopener"
-        className="flex items-center gap-2"
+        className="flex items-center gap-2 min-w-0"
       >
-        {avatar && <img src={avatar} alt="" className="w-4 h-4 rounded-full" />}
-        <span className="text-sm leading-6 font-semibold">{repoName}</span>
-        <ExternalLinkIcon width={16} height={16} />
+        {avatar && (
+          <img
+            src={avatar}
+            alt=""
+            className="w-4 h-4 rounded-full flex-shrink-0"
+          />
+        )}
+        <span className="text-sm leading-6 font-semibold truncate flex-1">
+          {repoName}
+        </span>
+        <ExternalLinkIcon width={16} height={16} className="flex-shrink-0" />
       </a>
       <a
         href={lastCommit.html_url}