feat: align del icon to box

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>