From 93ef083abc54ced18b7e510c5388a0c6cff9c97c Mon Sep 17 00:00:00 2001
From: Ken Hibino <ken.hibino7@gmail.com>
Date: Mon, 1 Mar 2021 06:39:02 -0800
Subject: [PATCH] Style fix

---
 ui/src/components/ArchivedTasksTable.tsx | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/ArchivedTasksTable.tsx b/ui/src/components/ArchivedTasksTable.tsx
index 7115620..12587be 100644
--- a/ui/src/components/ArchivedTasksTable.tsx
+++ b/ui/src/components/ArchivedTasksTable.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback, useState } from "react";
-import clsx from "clsx";
 import { connect, ConnectedProps } from "react-redux";
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
@@ -289,15 +288,15 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
   );
 }
 
-const useRowStyles = makeStyles({
+const useRowStyles = makeStyles(theme => ({
   actionCell: {
     width: "96px",
   },
-  activeActionCell: {
-    display: "flex",
-    justifyContent: "space-between",
-  },
-});
+  actionButton: {
+    marginLeft: 3,
+    marginRight: 3,
+  }
+}));
 
 interface RowProps {
   task: ArchivedTaskExtended;
@@ -340,10 +339,7 @@ function Row(props: RowProps) {
       <TableCell>{task.error_message}</TableCell>
       <TableCell
         align="center"
-        className={clsx(
-          classes.actionCell,
-          props.showActions && classes.activeActionCell
-        )}
+        className={classes.actionCell}
         onMouseEnter={props.onActionCellEnter}
         onMouseLeave={props.onActionCellLeave}
       >
@@ -351,6 +347,7 @@ function Row(props: RowProps) {
           <React.Fragment>
             <Tooltip title="Delete">
               <IconButton
+                className={classes.actionButton}
                 onClick={props.onDeleteClick}
                 disabled={task.requestPending || props.allActionPending}
                 size="small"
@@ -360,6 +357,7 @@ function Row(props: RowProps) {
             </Tooltip>
             <Tooltip title="Run">
               <IconButton
+                className={classes.actionButton}
                 onClick={props.onRunClick}
                 disabled={task.requestPending || props.allActionPending}
                 size="small"