From edb680b4f889e752bb3a9a2581ace4039a724d57 Mon Sep 17 00:00:00 2001
From: "Laurie T. Malau" <laurie@gitpod.io>
Date: Mon, 23 Aug 2021 11:14:32 +0000
Subject: [PATCH] Add tooltip to project names

Fixes #5122
---
 components/dashboard/src/components/Tooltip.tsx        | 3 ++-
 components/dashboard/src/workspaces/WorkspaceEntry.tsx | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/dashboard/src/components/Tooltip.tsx b/components/dashboard/src/components/Tooltip.tsx
index 52382c80a9a857..eb01d359a5a360 100644
--- a/components/dashboard/src/components/Tooltip.tsx
+++ b/components/dashboard/src/components/Tooltip.tsx
@@ -9,6 +9,7 @@ import { useState } from 'react';
 export interface TooltipProps {
     children: React.ReactChild[] | React.ReactChild;
     content: string;
+    allowWrap?: boolean;
 }
 
 function Tooltip(props: TooltipProps) {
@@ -20,7 +21,7 @@ function Tooltip(props: TooltipProps) {
                 {props.children}
             </div>
             {expanded ?
-                <div style={{top: '-0.5rem', left: '50%', transform: 'translate(-50%, -100%)'}} className={`mt-2 z-50 py-1 px-2 bg-gray-900 text-gray-100 text-sm absolute flex flex-col border border-gray-200 dark:border-gray-800 rounded-md truncated whitespace-nowrap`}>
+                <div style={{top: '-0.5rem', left: '50%', transform: 'translate(-50%, -100%)'}} className={`max-w-md mt-2 z-50 py-1 px-2 bg-gray-900 text-gray-100 text-sm absolute flex flex-col border border-gray-200 dark:border-gray-800 rounded-md truncated ` + (props.allowWrap ? 'whitespace-normal' : 'whitespace-nowrap')}>
                     {props.content}
                 </div>
                 :
diff --git a/components/dashboard/src/workspaces/WorkspaceEntry.tsx b/components/dashboard/src/workspaces/WorkspaceEntry.tsx
index 68cfb537b4ce2c..ef5e02cf5faecc 100644
--- a/components/dashboard/src/workspaces/WorkspaceEntry.tsx
+++ b/components/dashboard/src/workspaces/WorkspaceEntry.tsx
@@ -91,7 +91,9 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
         </ItemFieldIcon>
         <ItemField className="w-3/12 flex flex-col">
             <a href={startUrl.toString()}><div className="font-medium text-gray-800 dark:text-gray-200 truncate hover:text-blue-600 dark:hover:text-blue-400">{ws.id}</div></a>
-            <a href={project ? 'https://' + project : undefined}><div className="text-sm overflow-ellipsis truncate text-gray-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400">{project || 'Unknown'}</div></a>
+            <Tooltip content={project ? 'https://' + project : ''} allowWrap={true}>
+                <a href={project ? 'https://' + project : undefined}><div className="text-sm overflow-ellipsis truncate text-gray-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400">{project || 'Unknown'}</div></a>
+            </Tooltip>
         </ItemField>
         <ItemField className="w-4/12 flex flex-col">
             <div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate">{ws.description}</div>