From 02345bc82cb53da0168d8cd048cfa57013413789 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonas=20H=C3=B6benreich?=
 <64426524+jonas-hoebenreich@users.noreply.github.com>
Date: Mon, 7 Oct 2024 00:35:53 +0200
Subject: [PATCH] fix: response delete tooltip cut off (#3289)

Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
---
 .../components/SingleResponseCardHeader.tsx   | 33 +++++++++++--------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/ui/components/SingleResponseCard/components/SingleResponseCardHeader.tsx b/packages/ui/components/SingleResponseCard/components/SingleResponseCardHeader.tsx
index 6c55823687..d2e4f32379 100644
--- a/packages/ui/components/SingleResponseCard/components/SingleResponseCardHeader.tsx
+++ b/packages/ui/components/SingleResponseCard/components/SingleResponseCardHeader.tsx
@@ -198,22 +198,27 @@ export const SingleResponseCardHeader = ({
           <time className="text-slate-500" dateTime={timeSince(response.createdAt.toISOString())}>
             {timeSince(response.createdAt.toISOString())}
           </time>
-          {user && !isViewer && (
-            <TooltipRenderer shouldRender={!canResponseBeDeleted} tooltipContent={deleteSubmissionToolTip}>
+          {user &&
+            !isViewer &&
+            (canResponseBeDeleted ? (
               <TrashIcon
-                onClick={() => {
-                  if (canResponseBeDeleted) {
-                    setDeleteDialogOpen(true);
-                  }
-                }}
-                className={`h-4 w-4 ${
-                  canResponseBeDeleted
-                    ? "cursor-pointer text-slate-500 hover:text-red-700"
-                    : "cursor-not-allowed text-slate-400"
-                } `}
+                onClick={() => setDeleteDialogOpen(true)}
+                className="h-4 w-4 cursor-pointer text-slate-500 hover:text-red-700"
+                aria-label="Delete response"
               />
-            </TooltipRenderer>
-          )}
+            ) : (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger>
+                    <TrashIcon
+                      className="h-4 w-4 cursor-not-allowed text-slate-400"
+                      aria-label="Cannot delete response in progress"
+                    />
+                  </TooltipTrigger>
+                  <TooltipContent side="left">{deleteSubmissionToolTip}</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            ))}
         </div>
       </div>
     </div>