From 9f41b1d86fa2b2215db3f541aa6f1baa6009246e Mon Sep 17 00:00:00 2001
From: "Cornelius A. Ludmann" <cornelius@gitpod.io>
Date: Mon, 7 Jun 2021 15:48:22 +0000
Subject: [PATCH 1/2] [dashboard] Fix workspace entry truncation

---
 .../src/workspaces/WorkspaceEntry.tsx          | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/components/dashboard/src/workspaces/WorkspaceEntry.tsx b/components/dashboard/src/workspaces/WorkspaceEntry.tsx
index 69fe815a318a3b..d7074eb9766105 100644
--- a/components/dashboard/src/workspaces/WorkspaceEntry.tsx
+++ b/components/dashboard/src/workspaces/WorkspaceEntry.tsx
@@ -86,19 +86,17 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
                 <WorkspaceStatusIndicator instance={desc?.latestInstance} />
             </div>
             <div className="flex flex-col w-3/12">
-                <a href={startUrl.toString()}><div className="font-medium text-gray-800 dark:text-gray-100 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 hover:text-blue-600 dark:hover:text-blue-400">{project || 'Unknown'}</div></a>
+                <a href={startUrl.toString()}><div className="font-medium text-gray-800 dark:text-gray-100 overflow-ellipsis truncate w-full 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 w-full text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">{project || 'Unknown'}</div></a>
             </div>
-            <div className="flex w-4/12 truncate overflow-ellipsis">
-                <div className="flex flex-col">
-                    <div className="text-gray-500 overflow-ellipsis truncate">{ws.description}</div>
-                    <a href={ws.contextURL}>
-                        <div className="text-sm text-gray-400 overflow-ellipsis truncate hover:text-blue-600 dark:hover:text-blue-400">{ws.contextURL}</div>
-                    </a>
-                </div>
+            <div className="flex flex-col w-4/12">
+                <div className="text-gray-500 overflow-ellipsis truncate w-full">{ws.description}</div>
+                <a href={ws.contextURL}>
+                    <div className="text-sm text-gray-400 overflow-ellipsis truncate w-full hover:text-blue-600 dark:hover:text-blue-400">{ws.contextURL}</div>
+                </a>
             </div>
             <div className="flex flex-col items-start w-2/12">
-                <div className="text-gray-500 truncate">{currentBranch}</div>
+                <div className="text-gray-500 overflow-ellipsis truncate w-full">{currentBranch}</div>
                 <PendingChangesDropdown workspaceInstance={desc.latestInstance} />
             </div>
             <div className="flex w-2/12 self-center">

From 4476666476fca8622797edbe2f32dd900ab43ce5 Mon Sep 17 00:00:00 2001
From: "Cornelius A. Ludmann" <cornelius@gitpod.io>
Date: Mon, 7 Jun 2021 18:36:52 +0000
Subject: [PATCH 2/2] [dashboard] Add tooltip for possibly truncated values in
 workspace list

---
 .../dashboard/src/components/Tooltip.tsx      |  5 ++--
 .../src/workspaces/WorkspaceEntry.tsx         | 28 ++++++++++++++-----
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/components/dashboard/src/components/Tooltip.tsx b/components/dashboard/src/components/Tooltip.tsx
index 26576811333045..50ef03f647fc9f 100644
--- a/components/dashboard/src/components/Tooltip.tsx
+++ b/components/dashboard/src/components/Tooltip.tsx
@@ -9,14 +9,15 @@ import { useState } from 'react';
 export interface TooltipProps {
     children: React.ReactChild[] | React.ReactChild;
     content: string;
+    className?: string;
 }
 
 function Tooltip(props: TooltipProps) {
     const [expanded, setExpanded] = useState(false);
 
     return (
-        <div onMouseLeave={() => setExpanded(false)} onMouseEnter={() => setExpanded(true)} className="relative">
-            <div>
+        <div onMouseLeave={() => setExpanded(false)} onMouseEnter={() => setExpanded(true)} className={"relative " + (props.className || "")}>
+            <div className={props.className}>
                 {props.children}
             </div>
             {expanded ?
diff --git a/components/dashboard/src/workspaces/WorkspaceEntry.tsx b/components/dashboard/src/workspaces/WorkspaceEntry.tsx
index d7074eb9766105..18b37bffabbdb9 100644
--- a/components/dashboard/src/workspaces/WorkspaceEntry.tsx
+++ b/components/dashboard/src/workspaces/WorkspaceEntry.tsx
@@ -86,17 +86,31 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
                 <WorkspaceStatusIndicator instance={desc?.latestInstance} />
             </div>
             <div className="flex flex-col w-3/12">
-                <a href={startUrl.toString()}><div className="font-medium text-gray-800 dark:text-gray-100 overflow-ellipsis truncate w-full 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 w-full text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">{project || 'Unknown'}</div></a>
+                <Tooltip content={ws.id}>
+                    <a href={startUrl.toString()}>
+                        <div className="font-medium text-gray-800 dark:text-gray-100 overflow-ellipsis truncate w-full hover:text-blue-600 dark:hover:text-blue-400">{ws.id}</div>
+                    </a>
+                </Tooltip>
+                <Tooltip content={project || 'Unknown'}>
+                    <a href={project ? 'https://' + project : undefined}>
+                        <div className="text-sm overflow-ellipsis truncate w-full text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">{project || 'Unknown'}</div>
+                    </a>
+                </Tooltip>
             </div>
             <div className="flex flex-col w-4/12">
-                <div className="text-gray-500 overflow-ellipsis truncate w-full">{ws.description}</div>
-                <a href={ws.contextURL}>
-                    <div className="text-sm text-gray-400 overflow-ellipsis truncate w-full hover:text-blue-600 dark:hover:text-blue-400">{ws.contextURL}</div>
-                </a>
+                <Tooltip content={ws.description}>
+                    <div className="text-gray-500 overflow-ellipsis truncate w-full">{ws.description}</div>
+                </Tooltip>
+                <Tooltip content={ws.contextURL}>
+                    <a href={ws.contextURL}>
+                        <div className="text-sm text-gray-400 overflow-ellipsis truncate w-full hover:text-blue-600 dark:hover:text-blue-400">{ws.contextURL}</div>
+                    </a>
+                </Tooltip>
             </div>
             <div className="flex flex-col items-start w-2/12">
-                <div className="text-gray-500 overflow-ellipsis truncate w-full">{currentBranch}</div>
+                <Tooltip content={currentBranch} className="w-full">
+                    <div className="text-gray-500 overflow-ellipsis truncate w-full">{currentBranch}</div>
+                </Tooltip>
                 <PendingChangesDropdown workspaceInstance={desc.latestInstance} />
             </div>
             <div className="flex w-2/12 self-center">