From 497140a6c4a29bb4b446dd3a5ffb63f3b946e6b5 Mon Sep 17 00:00:00 2001
From: stacksmash76 <98354295+stacksmash76@users.noreply.github.com>
Date: Thu, 21 Jul 2022 22:02:43 +0200
Subject: [PATCH] fix(web): tooltip text wrapping (#365)

---
 web/src/components/data-table/Cells.tsx | 10 +++++++++-
 web/src/components/tooltips/Tooltip.tsx |  7 ++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/web/src/components/data-table/Cells.tsx b/web/src/components/data-table/Cells.tsx
index e480aeb..5cb4dba 100644
--- a/web/src/components/data-table/Cells.tsx
+++ b/web/src/components/data-table/Cells.tsx
@@ -71,7 +71,15 @@ export const ReleaseStatusCell = ({ value }: ReleaseStatusCellProps) => (
             {v.client && <li className="py-1">Client: {v.client}</li>}
             {v.filter && <li className="py-1">Filter: {v.filter}</li>}
             <li className="py-1">Time: {simplifyDate(v.timestamp)}</li>
-            {v.rejections.length > 0 && <li className="py-1">Rejections: <span className="break-all">{v.rejections.toString()}</span></li>}
+            {v.rejections.length ? (
+              <li className="py-1">
+                Rejections:
+                {" "}
+                <p className="whitespace-pre-wrap break-all">
+                  {v.rejections.toString()}
+                </p>
+              </li>
+            ) : null}
           </ol>
         </Tooltip>
       </div>
diff --git a/web/src/components/tooltips/Tooltip.tsx b/web/src/components/tooltips/Tooltip.tsx
index 2f5dd30..34941f1 100644
--- a/web/src/components/tooltips/Tooltip.tsx
+++ b/web/src/components/tooltips/Tooltip.tsx
@@ -6,9 +6,10 @@ export const Tooltip = ({ children, button } : {
   return (
     <div className="relative flex flex-col items-center group">
       {button}
-      <div className="absolute bottom-0 flex flex-col items-center hidden mb-6 group-hover:flex">
-        <span className="relative z-40 p-2 text-xs leading-none text-white whitespace-no-wrap bg-gray-600 shadow-lg rounded-md">{children}</span>
-        <div className="w-3 h-3 -mt-2 rotate-45 bg-gray-600"></div>
+      <div className="absolute bottom-0 flex-col items-center hidden mb-6 group-hover:flex">
+        <span className="z-40 p-2 text-xs leading-none text-white whitespace-no-wrap bg-gray-600 shadow-lg rounded-md">
+          {children}
+        </span>
       </div>
     </div>
   );