Minor fixes

ui/src/components/ActiveTasksTable.tsx

@@ -50,6 +50,10 @@ const useStyles = makeStyles((theme) => ({
   iconCell: {
     width: "70px",
   },
+  alert: {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+  },
 }));
 
 function mapStateToProps(state: AppState) {
@@ -136,7 +140,7 @@ function ActiveTasksTable(props: Props & ReduxProps) {
 
   if (props.error.length > 0) {
     return (
-      <Alert severity="error">
+      <Alert severity="error" className={classes.alert}>
         <AlertTitle>Error</AlertTitle>
         {props.error}
       </Alert>
@@ -145,7 +149,7 @@ function ActiveTasksTable(props: Props & ReduxProps) {
 
   if (props.tasks.length === 0) {
     return (
-      <Alert severity="info">
+      <Alert severity="info" className={classes.alert}>
         <AlertTitle>Info</AlertTitle>
         No active tasks at this time.
       </Alert>

ui/src/components/ArchivedTasksTable.tsx

@@ -52,23 +52,12 @@ const useStyles = makeStyles((theme) => ({
   stickyHeaderCell: {
     background: theme.palette.background.paper,
   },
+  alert: {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+  },
 }));
 
-const useRowStyles = makeStyles({
-  root: {
-    "& > *": {
-      borderBottom: "unset",
-    },
-  },
-  actionCell: {
-    width: "96px",
-  },
-  activeActionCell: {
-    display: "flex",
-    justifyContent: "space-between",
-  },
-});
-
 function mapStateToProps(state: AppState) {
   return {
     loading: state.tasks.archivedTasks.loading,
@@ -159,7 +148,7 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
 
   if (props.error.length > 0) {
     return (
-      <Alert severity="error">
+      <Alert severity="error" className={classes.alert}>
         <AlertTitle>Error</AlertTitle>
         {props.error}
       </Alert>
@@ -167,7 +156,7 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
   }
   if (props.tasks.length === 0) {
     return (
-      <Alert severity="info">
+      <Alert severity="info" className={classes.alert}>
         <AlertTitle>Info</AlertTitle>
         No archived tasks at this time.
       </Alert>
@@ -301,6 +290,21 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
   );
 }
 
+const useRowStyles = makeStyles({
+  root: {
+    "& > *": {
+      borderBottom: "unset",
+    },
+  },
+  actionCell: {
+    width: "96px",
+  },
+  activeActionCell: {
+    display: "flex",
+    justifyContent: "space-between",
+  },
+});
+
 interface RowProps {
   task: ArchivedTaskExtended;
   isSelected: boolean;

ui/src/components/PendingTasksTable.tsx

@@ -52,6 +52,10 @@ const useStyles = makeStyles((theme) => ({
   stickyHeaderCell: {
     background: theme.palette.background.paper,
   },
+  alert: {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+  },
 }));
 
 function mapStateToProps(state: AppState) {
@@ -144,7 +148,7 @@ function PendingTasksTable(props: Props & ReduxProps) {
 
   if (props.error.length > 0) {
     return (
-      <Alert severity="error">
+      <Alert severity="error" className={classes.alert}>
         <AlertTitle>Error</AlertTitle>
         {props.error}
       </Alert>
@@ -152,7 +156,7 @@ function PendingTasksTable(props: Props & ReduxProps) {
   }
   if (props.tasks.length === 0) {
     return (
-      <Alert severity="info">
+      <Alert severity="info" className={classes.alert}>
         <AlertTitle>Info</AlertTitle>
         No pending tasks at this time.
       </Alert>

ui/src/components/RetryTasksTable.tsx

@@ -56,6 +56,10 @@ const useStyles = makeStyles((theme) => ({
   stickyHeaderCell: {
     background: theme.palette.background.paper,
   },
+  alert: {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+  },
 }));
 
 function mapStateToProps(state: AppState) {
@@ -161,7 +165,7 @@ function RetryTasksTable(props: Props & ReduxProps) {
 
   if (props.error.length > 0) {
     return (
-      <Alert severity="error">
+      <Alert severity="error" className={classes.alert}>
         <AlertTitle>Error</AlertTitle>
         {props.error}
       </Alert>
@@ -169,7 +173,7 @@ function RetryTasksTable(props: Props & ReduxProps) {
   }
   if (props.tasks.length === 0) {
     return (
-      <Alert severity="info">
+      <Alert severity="info" className={classes.alert}>
         <AlertTitle>Info</AlertTitle>
         No retry tasks at this time.
       </Alert>

ui/src/components/ScheduledTasksTable.tsx

@@ -56,6 +56,10 @@ const useStyles = makeStyles((theme) => ({
   stickyHeaderCell: {
     background: theme.palette.background.paper,
   },
+  alert: {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+  },
 }));
 
 function mapStateToProps(state: AppState) {
@@ -161,7 +165,7 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
 
   if (props.error.length > 0) {
     return (
-      <Alert severity="error">
+      <Alert severity="error" className={classes.alert}>
         <AlertTitle>Error</AlertTitle>
         {props.error}
       </Alert>
@@ -169,7 +173,7 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
   }
   if (props.tasks.length === 0) {
     return (
-      <Alert severity="info">
+      <Alert severity="info" className={classes.alert}>
         <AlertTitle>Info</AlertTitle>
         No scheduled tasks at this time.
       </Alert>

ui/src/components/TasksTable.tsx

@@ -124,6 +124,7 @@ function TasksTable(props: Props & ReduxProps) {
         <div>
           {chips.map((c) => (
             <Chip
+              key={c.key}
               className={classes.chip}
               label={
                 <div>

ui/src/views/TasksView.tsx

@@ -61,7 +61,7 @@ function TasksView(props: ConnectedProps<typeof connector>) {
   return (
     <Container maxWidth="lg">
       <Grid container spacing={0} className={classes.container}>
-        <Grid xs={12} className={classes.breadcrumbs}>
+        <Grid item xs={12} className={classes.breadcrumbs}>
           <QueueBreadCrumb queues={props.queues} selectedQueue={qname} />
         </Grid>
         <Grid item xs={12} className={classes.banner}>