From 9caa0e3ce17599d27be70ce7aefde704a0de6984 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20R=C3=BCsch?=
 <maximilian.ruesch@stud.tu-darmstadt.de>
Date: Wed, 27 Dec 2023 23:38:48 +0100
Subject: [PATCH] Fix delete button problems

---
 .../BacklogView/Issue/DeleteButton.tsx        | 21 +++++++++++--------
 .../BacklogView/Issue/IssueCard.tsx           |  2 +-
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/BacklogView/Issue/DeleteButton.tsx b/src/components/BacklogView/Issue/DeleteButton.tsx
index 8a9d0382..25793850 100644
--- a/src/components/BacklogView/Issue/DeleteButton.tsx
+++ b/src/components/BacklogView/Issue/DeleteButton.tsx
@@ -23,9 +23,9 @@ export function DeleteButton({
   }, [mounted, hovered])
 
   return (
-    <Box ref={ref} style={{ position: "absolute", bottom: 5, right: 11 }}>
+    <Box style={{ position: "absolute", bottom: 0, right: 11 }}>
       <Transition
-        mounted={mounted}
+        mounted={mounted || hovered}
         transition="fade"
         duration={200}
         timingFunction="ease"
@@ -37,6 +37,7 @@ export function DeleteButton({
             withArrow
             shadow="md"
             opened={issuePopoverOpened}
+            withinPortal={false}
             onChange={setIssuePopoverOpened}
           >
             <Popover.Target>
@@ -58,13 +59,15 @@ export function DeleteButton({
                 background: colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
               })}
             >
-              <div style={{
-                height: "20px",
-                position: "absolute",
-                width: "inherit",
-                left: "0px",
-                top: "-10px",
-              }} />
+              <Box
+                ref={ref}
+                h="20px"
+                w="inherit"
+                left="0px"
+                top="-10px"
+                pos="absolute"
+                onClick={(e) => e.stopPropagation()}
+              />
               <DeleteIssueAlert
                 issueKey={issueKey}
                 cancelAlert={() => setIssuePopoverOpened(false)}
diff --git a/src/components/BacklogView/Issue/IssueCard.tsx b/src/components/BacklogView/Issue/IssueCard.tsx
index 2369d1f4..d1ec4f50 100644
--- a/src/components/BacklogView/Issue/IssueCard.tsx
+++ b/src/components/BacklogView/Issue/IssueCard.tsx
@@ -69,7 +69,7 @@ export function IssueCard({
             <DeleteButton mounted={hovered} issueKey={issueKey} />
             <Grid
               columns={100}
-              p={3}
+              p={10}
               style={{
                 borderRadius: theme.radius.sm,
                 margin: 0,