From 03ce0cbee88e525ad132b2b3cc35b0a12734d89b Mon Sep 17 00:00:00 2001
From: c-bata <contact@c-bata.link>
Date: Sun, 28 Feb 2021 12:11:55 +0900
Subject: [PATCH] Fix break line of a table head around clear filter button

---
 .../static/components/DataGrid.tsx            | 73 ++++++++++---------
 1 file changed, 39 insertions(+), 34 deletions(-)

diff --git a/optuna_dashboard/static/components/DataGrid.tsx b/optuna_dashboard/static/components/DataGrid.tsx
index 18b32890..951a26ae 100644
--- a/optuna_dashboard/static/components/DataGrid.tsx
+++ b/optuna_dashboard/static/components/DataGrid.tsx
@@ -41,6 +41,9 @@ const useStyles = makeStyles((theme: Theme) =>
       textDecoration: "underline",
       cursor: "pointer",
     },
+    tableHeaderCell: {
+      display: "inline-flex",
+    },
   })
 )
 
@@ -157,40 +160,42 @@ function DataGrid<T>(props: {
                   padding={column.padding || "default"}
                   sortDirection={orderBy === column.field ? order : false}
                 >
-                  {column.sortable ? (
-                    <TableSortLabel
-                      active={orderBy === index}
-                      direction={orderBy === index ? order : "asc"}
-                      onClick={createSortHandler(index)}
-                    >
-                      {column.label}
-                      {orderBy === column.field ? (
-                        <span className={classes.visuallyHidden}>
-                          {order === "desc"
-                            ? "sorted descending"
-                            : "sorted ascending"}
-                        </span>
-                      ) : null}
-                    </TableSortLabel>
-                  ) : (
-                    column.label
-                  )}
-                  {column.filterable ? (
-                    <IconButton
-                      size={dense ? "small" : "medium"}
-                      style={
-                        fieldAlreadyFiltered(column.field)
-                          ? {}
-                          : { visibility: "hidden" }
-                      }
-                      color="inherit"
-                      onClick={(e) => {
-                        clearFilter(column.field)
-                      }}
-                    >
-                      <Clear />
-                    </IconButton>
-                  ) : null}
+                  <span className={classes.tableHeaderCell}>
+                    {column.sortable ? (
+                      <TableSortLabel
+                        active={orderBy === index}
+                        direction={orderBy === index ? order : "asc"}
+                        onClick={createSortHandler(index)}
+                      >
+                        {column.label}
+                        {orderBy === column.field ? (
+                          <span className={classes.visuallyHidden}>
+                            {order === "desc"
+                              ? "sorted descending"
+                              : "sorted ascending"}
+                          </span>
+                        ) : null}
+                      </TableSortLabel>
+                    ) : (
+                      column.label
+                    )}
+                    {column.filterable ? (
+                      <IconButton
+                        size={dense ? "small" : "medium"}
+                        style={
+                          fieldAlreadyFiltered(column.field)
+                            ? {}
+                            : { visibility: "hidden" }
+                        }
+                        color="inherit"
+                        onClick={(e) => {
+                          clearFilter(column.field)
+                        }}
+                      >
+                        <Clear />
+                      </IconButton>
+                    ) : null}
+                  </span>
                 </TableCell>
               ))}
             </TableRow>