From 609e5943a8ff2f8284e7f15d4b60547489a7d001 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Thu, 10 Oct 2024 07:27:14 +0530
Subject: [PATCH] feat: align del icon to box

---
 src/components/organisms/RightSidePanel.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx
index d4152fea..4b876ca6 100644
--- a/src/components/organisms/RightSidePanel.tsx
+++ b/src/components/organisms/RightSidePanel.tsx
@@ -461,7 +461,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
       </Box>
       <Box>
         {browserSteps.map(step => (
-          <Box key={step.id} sx={{ boxShadow: 5, padding: '10px', margin: '10px', borderRadius: '4px' }} onMouseEnter={() => handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)}>
+          <Box key={step.id} sx={{ boxShadow: 5, padding: '10px', margin: '10px', borderRadius: '4px', position: 'relative', }} onMouseEnter={() => handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)}>
             {
               step.type === 'text' && (
                 <>
@@ -470,11 +470,12 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
                       onClick={() => handlePairDelete()}
                       sx={{
                         position: 'absolute',
-                        top: 5,
-                        right: 5,
-                        color: 'red',
-                        p: 0
-                      }}
+                      top: -10,
+                      right: -10,
+                      color: 'red',
+                      p: 0,
+                      zIndex: 1,  
+                    }}
                     >
                       <DeleteIcon />
                     </IconButton>