Add tooltip to project names

Fixes gitpod-io#5122
trilogy-group · Dec 21, 2021 · e16a8a6 · e16a8a6
1 parent c15f87f
commit e16a8a6
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git 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: '-100%', 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
@@ -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>