diff --git a/ui/src/components/ActiveTasksTable.tsx b/ui/src/components/ActiveTasksTable.tsx
index b633699..08ce7b0 100644
--- a/ui/src/components/ActiveTasksTable.tsx
+++ b/ui/src/components/ActiveTasksTable.tsx
@@ -258,12 +258,11 @@ function ActiveTasksTable(props: Props & ReduxProps) {
 const useRowStyles = makeStyles((theme) => ({
   root: {
     cursor: "pointer",
-    
     "&:hover": {
       boxShadow: theme.shadows[2],
-      copyButton: {
-        display: "inline-block"
-      },
+    }, 
+    "&:hover $copyButton": {
+      display: "inline-block"
     },
     "&:hover .MuiTableCell-root": {
       borderBottomColor: theme.palette.background.paper,
@@ -275,6 +274,10 @@ const useRowStyles = makeStyles((theme) => ({
   copyButton: {
     display: "none"
   },
+  IdGroup: {
+    display: "flex",
+    alignItems: "center",
+  }
 }));
 
 interface RowProps {
@@ -308,7 +311,8 @@ function Row(props: RowProps) {
           />
         </IconButton>
       </TableCell>
-      <TableCell component="th" scope="row" className={classes.idCell} >
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
         {uuidPrefix(task.id)}
         <Tooltip title="Copy text to clipboard">
           <IconButton
@@ -323,6 +327,7 @@ function Row(props: RowProps) {
             <FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
           </IconButton>
         </Tooltip>
+        </div>
       </TableCell>
       <TableCell>{task.type}</TableCell>
       <TableCell>
diff --git a/ui/src/components/ArchivedTasksTable.tsx b/ui/src/components/ArchivedTasksTable.tsx
index 356e416..61a0add 100644
--- a/ui/src/components/ArchivedTasksTable.tsx
+++ b/ui/src/components/ArchivedTasksTable.tsx
@@ -288,12 +288,11 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
 const useRowStyles = makeStyles((theme) => ({
   root: {
     cursor: "pointer",
-    
     "&:hover": {
       boxShadow: theme.shadows[2],
-      copyButton: {
-        display: "inline-block"
-      },
+    }, 
+    "&:hover $copyButton": {
+      display: "inline-block"
     },
     "&:hover .MuiTableCell-root": {
       borderBottomColor: theme.palette.background.paper,
@@ -311,7 +310,11 @@ const useRowStyles = makeStyles((theme) => ({
   },
   copyButton: {
     display: "none"
-  },
+  }, 
+  IdGroup: {
+    display: "flex",
+    alignItems: "center",
+  }
 }));
 
 interface RowProps {
@@ -347,7 +350,8 @@ function Row(props: RowProps) {
           />
         </IconButton>
       </TableCell>
-      <TableCell component="th" scope="row" className={classes.idCell} >
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
         {uuidPrefix(task.id)}
         <Tooltip title="Copy text to clipboard">
           <IconButton
@@ -362,6 +366,7 @@ function Row(props: RowProps) {
             <FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
           </IconButton>
         </Tooltip>
+        </div>
       </TableCell>
       <TableCell>{task.type}</TableCell>
       <TableCell>
diff --git a/ui/src/components/CompletedTasksTable.tsx b/ui/src/components/CompletedTasksTable.tsx
index d3fe077..0b97b7b 100644
--- a/ui/src/components/CompletedTasksTable.tsx
+++ b/ui/src/components/CompletedTasksTable.tsx
@@ -258,12 +258,11 @@ function CompletedTasksTable(props: Props & ReduxProps) {
 const useRowStyles = makeStyles((theme) => ({
   root: {
     cursor: "pointer",
-    
     "&:hover": {
       boxShadow: theme.shadows[2],
-      copyButton: {
-        display: "inline-block"
-      },
+    },
+    "&:hover $copyButton": {
+      display: "inline-block"
     },
     "&:hover .MuiTableCell-root": {
       borderBottomColor: theme.palette.background.paper,
@@ -281,7 +280,11 @@ const useRowStyles = makeStyles((theme) => ({
   },
   copyButton: {
     display: "none"
-  },
+  }, 
+  IdGroup: {
+    display: "flex",
+    alignItems: "center",
+  }
 }));
 
 interface RowProps {
@@ -316,7 +319,8 @@ function Row(props: RowProps) {
           />
         </IconButton>
       </TableCell>
-      <TableCell component="th" scope="row" className={classes.idCell} >
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
         {uuidPrefix(task.id)}
         <Tooltip title="Copy text to clipboard">
           <IconButton
@@ -331,6 +335,7 @@ function Row(props: RowProps) {
             <FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
           </IconButton>
         </Tooltip>
+        </div>
       </TableCell>
       <TableCell>{task.type}</TableCell>
       <TableCell>
diff --git a/ui/src/components/PendingTasksTable.tsx b/ui/src/components/PendingTasksTable.tsx
index 8727f27..b6253c7 100644
--- a/ui/src/components/PendingTasksTable.tsx
+++ b/ui/src/components/PendingTasksTable.tsx
@@ -289,9 +289,9 @@ const useRowStyles = makeStyles((theme) => ({
     cursor: "pointer",
     "&:hover": {
       boxShadow: theme.shadows[2],
-      copyButton: {
-        display: "inline-block"
-      },
+    },
+    "&:hover $copyButton":{
+      display: "inline-block"
     },
     "&:hover .MuiTableCell-root": {
       borderBottomColor: theme.palette.background.paper,
@@ -311,6 +311,10 @@ const useRowStyles = makeStyles((theme) => ({
   copyButton: {
     display: "none"
   },
+  IdGroup:{
+    display:"flex",
+    alignItems:"center",
+  }
 }));
 
 interface RowProps {
@@ -347,6 +351,7 @@ function Row(props: RowProps) {
         </IconButton>
       </TableCell>
       <TableCell component="th" scope="row" className={classes.idCell} >
+        <div className={classes.IdGroup}>
         {uuidPrefix(task.id)}
         <Tooltip title="Copy text to clipboard">
           <IconButton
@@ -357,9 +362,10 @@ function Row(props: RowProps) {
             size="small"
             className={classes.copyButton}
           >
-            <FileCopyOutlinedIcon fontSize="small" style={{height:"12px", width:"12px"}} />
+            <FileCopyOutlinedIcon fontSize="small" />
           </IconButton>
         </Tooltip>
+        </div>
       </TableCell>
       <TableCell>{task.type}</TableCell>
       <TableCell>
diff --git a/ui/src/components/RetryTasksTable.tsx b/ui/src/components/RetryTasksTable.tsx
index 4da9b7e..a4ad156 100644
--- a/ui/src/components/RetryTasksTable.tsx
+++ b/ui/src/components/RetryTasksTable.tsx
@@ -317,9 +317,9 @@ const useRowStyles = makeStyles((theme) => ({
     cursor: "pointer",
     "&:hover": {
       boxShadow: theme.shadows[2],
-      copyButton: {
-        display: "inline-block"
-      },
+    },
+    "&:hover $copyButton": {
+      display: "inline-block"
     },
     "&:hover .MuiTableCell-root": {
       borderBottomColor: theme.palette.background.paper,
@@ -337,7 +337,11 @@ const useRowStyles = makeStyles((theme) => ({
   },
   copyButton: {
     display: "none"
-  },
+  }, 
+  IdGroup: {
+    display: "flex",
+    alignItems: "center",
+  }
 }));
 
 interface RowProps {
@@ -375,7 +379,8 @@ function Row(props: RowProps) {
           />
         </IconButton>
       </TableCell>
-      <TableCell component="th" scope="row" className={classes.idCell} >
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
         {uuidPrefix(task.id)}
         <Tooltip title="Copy text to clipboard">
           <IconButton
@@ -390,6 +395,7 @@ function Row(props: RowProps) {
             <FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
           </IconButton>
         </Tooltip>
+        </div>
       </TableCell>
       <TableCell>{task.type}</TableCell>
       <TableCell>
diff --git a/ui/src/components/ScheduledTasksTable.tsx b/ui/src/components/ScheduledTasksTable.tsx
index 8954cf9..dbd47a0 100644
--- a/ui/src/components/ScheduledTasksTable.tsx
+++ b/ui/src/components/ScheduledTasksTable.tsx
@@ -327,9 +327,9 @@ const useRowStyles = makeStyles((theme) => ({
     cursor: "pointer",
     "&:hover": {
       boxShadow: theme.shadows[2],
-      copyButton: {
-        display: "inline-block"
-      },
+    },
+    "&:hover $copyButton": {
+      display: "inline-block"
     },
     "&:hover .MuiTableCell-root": {
       borderBottomColor: theme.palette.background.paper,
@@ -348,6 +348,10 @@ const useRowStyles = makeStyles((theme) => ({
   copyButton: {
     display: "none"
   },
+  IdGroup: {
+    display: "flex",
+    alignItems: "center",
+  }
 }));
 
 interface RowProps {
@@ -384,7 +388,8 @@ function Row(props: RowProps) {
           />
         </IconButton>
       </TableCell>
-      <TableCell component="th" scope="row" className={classes.idCell} >
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
         {uuidPrefix(task.id)}
         <Tooltip title="Copy text to clipboard">
           <IconButton
@@ -399,6 +404,7 @@ function Row(props: RowProps) {
             <FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
           </IconButton>
         </Tooltip>
+        </div>
       </TableCell>
       <TableCell>{task.type}</TableCell>
       <TableCell>