From b71a28b39207ebe46f8bef7f85673746f8f575a6 Mon Sep 17 00:00:00 2001
From: msukkari <michael.sukkarieh@mail.mcgill.ca>
Date: Thu, 22 May 2025 13:36:20 -0700
Subject: [PATCH] fix repo failure UI extending past bounds

---
 .../[domain]/components/errorNavIndicator.tsx | 74 +++++++++++--------
 .../components/warningNavIndicator.tsx        | 30 +++++---
 2 files changed, 65 insertions(+), 39 deletions(-)

diff --git a/packages/web/src/app/[domain]/components/errorNavIndicator.tsx b/packages/web/src/app/[domain]/components/errorNavIndicator.tsx
index a63a469d..2f024a61 100644
--- a/packages/web/src/app/[domain]/components/errorNavIndicator.tsx
+++ b/packages/web/src/app/[domain]/components/errorNavIndicator.tsx
@@ -11,6 +11,7 @@ import { useQuery } from "@tanstack/react-query";
 import { ConnectionSyncStatus, RepoIndexingStatus } from "@sourcebot/db";
 import { getConnections } from "@/actions";
 import { getRepos } from "@/actions";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 export const ErrorNavIndicator = () => {
     const domain = useDomain();
@@ -62,18 +63,27 @@ export const ErrorNavIndicator = () => {
                                 The following connections have failed to sync:
                             </p>
                             <div className="flex flex-col gap-2">
-                                {connections
-                                    .slice(0, 10)
-                                    .map(connection => (
-                                        <Link key={connection.name} href={`/${domain}/connections/${connection.id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
-                                            <div className="flex items-center gap-2 px-3 py-2 bg-red-50 dark:bg-red-900/20 
-                                                            rounded-md text-sm text-red-700 dark:text-red-300 
-                                                            border border-red-200/50 dark:border-red-800/50
-                                                            hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors">
-                                                <span className="font-medium">{connection.name}</span>
-                                            </div>
-                                        </Link>
-                                    ))}
+                                <TooltipProvider>
+                                    {connections
+                                        .slice(0, 10)
+                                        .map(connection => (
+                                            <Link key={connection.name} href={`/${domain}/connections/${connection.id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
+                                                <div className="flex items-center gap-2 px-3 py-2 bg-red-50 dark:bg-red-900/20 
+                                                                rounded-md text-sm text-red-700 dark:text-red-300 
+                                                                border border-red-200/50 dark:border-red-800/50
+                                                                hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors">
+                                                    <Tooltip>
+                                                        <TooltipTrigger asChild>
+                                                            <span className="font-medium truncate max-w-[200px]">{connection.name}</span>
+                                                        </TooltipTrigger>
+                                                        <TooltipContent>
+                                                            {connection.name}
+                                                        </TooltipContent>
+                                                    </Tooltip>
+                                                </div>
+                                            </Link>
+                                        ))}
+                                </TooltipProvider>
                                 {connections.length > 10 && (
                                     <div className="text-sm text-red-600/90 dark:text-red-300/90 pl-3 pt-1">
                                         And {connections.length - 10} more...
@@ -93,23 +103,29 @@ export const ErrorNavIndicator = () => {
                                 The following repositories failed to index:
                             </p>
                             <div className="flex flex-col gap-2">
-                                {repos
-                                    .slice(0, 10)
-                                    .filter(item => item.linkedConnections.length > 0) // edge case: don't show repos that are orphaned and awaiting gc.
-                                    .map(repo => (
-                                        // Link to the first connection for the repo
-                                        <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0].id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
-                                            <div className="flex items-center justify-between px-3 py-2 
-                                                            bg-red-50 dark:bg-red-900/20 rounded-md
-                                                            border border-red-200/50 dark:border-red-800/50
-                                                            hover:bg-red-100 dark:hover:bg-red-900/30 
-                                                            transition-colors">
-                                                <span className="text-sm font-medium text-red-700 dark:text-red-300">
-                                                    {repo.repoName}
-                                                </span>
-                                            </div>
-                                        </Link>
-                                    ))}
+                                <TooltipProvider>
+                                    {repos
+                                        .slice(0, 10)
+                                        .filter(item => item.linkedConnections.length > 0) // edge case: don't show repos that are orphaned and awaiting gc.
+                                        .map(repo => (
+                                            // Link to the first connection for the repo
+                                            <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0].id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
+                                                <div className="flex items-center gap-2 px-3 py-2 bg-red-50 dark:bg-red-900/20 
+                                                                rounded-md text-sm text-red-700 dark:text-red-300 
+                                                                border border-red-200/50 dark:border-red-800/50
+                                                                hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors">
+                                                    <Tooltip>
+                                                        <TooltipTrigger asChild>
+                                                            <span className="text-sm font-medium truncate max-w-[200px]">{repo.repoName}</span>
+                                                        </TooltipTrigger>
+                                                        <TooltipContent>
+                                                            {repo.repoName}
+                                                        </TooltipContent>
+                                                    </Tooltip>
+                                                </div>
+                                            </Link>
+                                        ))}
+                                </TooltipProvider>
                                 {repos.length > 10 && (
                                     <div className="text-sm text-red-600/90 dark:text-red-300/90 pl-3 pt-1">
                                         And {repos.length - 10} more...
diff --git a/packages/web/src/app/[domain]/components/warningNavIndicator.tsx b/packages/web/src/app/[domain]/components/warningNavIndicator.tsx
index 496c8f0a..dc176b1d 100644
--- a/packages/web/src/app/[domain]/components/warningNavIndicator.tsx
+++ b/packages/web/src/app/[domain]/components/warningNavIndicator.tsx
@@ -10,6 +10,7 @@ import useCaptureEvent from "@/hooks/useCaptureEvent";
 import { env } from "@/env.mjs";
 import { useQuery } from "@tanstack/react-query";
 import { ConnectionSyncStatus } from "@prisma/client";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 export const WarningNavIndicator = () => {
     const domain = useDomain();
@@ -45,16 +46,25 @@ export const WarningNavIndicator = () => {
                             The following connections have references that could not be found:
                         </p>
                         <div className="flex flex-col gap-2 pl-4">
-                            {connections.slice(0, 10).map(connection => (
-                                <Link key={connection.name} href={`/${domain}/connections/${connection.id}`} onClick={() => captureEvent('wa_warning_nav_connection_pressed', {})}>
-                                    <div className="flex items-center gap-2 px-3 py-2 bg-yellow-50 dark:bg-yellow-900/20 
-                                                rounded-md text-sm text-yellow-700 dark:text-yellow-300 
-                                                border border-yellow-200/50 dark:border-yellow-800/50
-                                                hover:bg-yellow-100 dark:hover:bg-yellow-900/30 transition-colors">
-                                        <span className="font-medium">{connection.name}</span>
-                                    </div>
-                                </Link>
-                            ))}
+                            <TooltipProvider>
+                                {connections.slice(0, 10).map(connection => (
+                                    <Link key={connection.name} href={`/${domain}/connections/${connection.id}`} onClick={() => captureEvent('wa_warning_nav_connection_pressed', {})}>
+                                        <div className="flex items-center gap-2 px-3 py-2 bg-yellow-50 dark:bg-yellow-900/20 
+                                                    rounded-md text-sm text-yellow-700 dark:text-yellow-300 
+                                                    border border-yellow-200/50 dark:border-yellow-800/50
+                                                    hover:bg-yellow-100 dark:hover:bg-yellow-900/30 transition-colors">
+                                            <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <span className="font-medium truncate max-w-[200px]">{connection.name}</span>
+                                                </TooltipTrigger>
+                                                <TooltipContent>
+                                                    {connection.name}
+                                                </TooltipContent>
+                                            </Tooltip>
+                                        </div>
+                                    </Link>
+                                ))}
+                            </TooltipProvider>
                             {connections.length > 10 && (
                                 <div className="text-sm text-yellow-600/90 dark:text-yellow-300/90 pl-3 pt-1">
                                     And {connections.length - 10} more...