Fix Backdrop on validator report table.

src/components/ValidatorReport/index.tsx

@@ -36,6 +36,10 @@ const useStyles = makeStyles((theme: Theme) =>
       flexGrow: 1,
       backgroundColor: "#ffffff",
     },
+    tableWrapper: {
+      height: 400,
+      position: "relative",
+    },
     backdrop: {
       zIndex: theme.zIndex.drawer + 1,
       color: "#fff",
@@ -56,8 +60,8 @@ const ValidatorReport = () => {
     moment().subtract(14, "d").format(dateFormat)
   );
   const [dateTo, setDateTo] = useState(moment().format(dateFormat));
-  const [startBlock, setStartBlock] = useState(("" as unknown) as number);
-  const [endBlock, setEndBlock] = useState(("" as unknown) as number);
+  const [startBlock, setStartBlock] = useState("" as unknown as number);
+  const [endBlock, setEndBlock] = useState("" as unknown as number);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(undefined);
   const [backendUrl] = useState(alternativeBackendApis);
@@ -77,7 +81,7 @@ const ValidatorReport = () => {
     {
       field: "commission",
       headerName: "Commission",
-      width: 150,
+      width: 200,
       sortable: true,
       valueFormatter: (params: { value: number }) => {
         if (isNaN(params.value)) {
@@ -89,11 +93,11 @@ const ValidatorReport = () => {
     {
       field: "blocksCount",
       headerName: "Blocks Produced",
-      width: 150,
+      width: 200,
       sortable: true,
     },
   ]);
-  const [report, setReport] = useState(({
+  const [report, setReport] = useState({
     pageSize: 0,
     totalCount: 0,
     totalBlocks: 0,
@@ -103,8 +107,8 @@ const ValidatorReport = () => {
     endBlock: -1,
     startTime: -1,
     endTime: -1,
-    report: ([] as unknown) as Report[],
-  } as unknown) as Reports);
+    report: [] as unknown as Report[],
+  } as unknown as Reports);
 
   const isDateRange = filterTab === 0;
   const isBlockRange = filterTab === 1;
@@ -170,13 +174,13 @@ const ValidatorReport = () => {
   const startOrStopLoading = () =>
     isLoading ? stopLoadingReport() : loadReport(1);
   const updateStartBlock = (e: { target: { value: unknown } }) =>
-    setStartBlock((e.target.value as unknown) as number);
+    setStartBlock(e.target.value as unknown as number);
   const updateEndBlock = (e: { target: { value: unknown } }) =>
-    setEndBlock((e.target.value as unknown) as number);
+    setEndBlock(e.target.value as unknown as number);
   const updateDateFrom = (e: { target: { value: unknown } }) =>
-    setDateFrom((e.target.value as unknown) as string);
+    setDateFrom(e.target.value as unknown as string);
   const updateDateTo = (e: { target: { value: unknown } }) =>
-    setDateTo((e.target.value as unknown) as string);
+    setDateTo(e.target.value as unknown as string);
 
   const setCurrentPeriodStartBlock = () => {
     const blocksToEndOfDay = moment().endOf("d").diff(moment(), "seconds") / 6;
@@ -381,13 +385,13 @@ const ValidatorReport = () => {
             <ValidatorReportCard stash={stash} report={report} />
           </Grid>
           <Grid item xs={12} lg={12}>
-            <div style={{ height: 400 }}>
+            <div className={classes.tableWrapper}>
               <Backdrop className={classes.backdrop} open={isLoading}>
                 <CircularProgress color="inherit" />
               </Backdrop>
               <DataGrid
                 rows={report.report}
-                columns={(columns as unknown) as GridColumns}
+                columns={columns as unknown as GridColumns}
                 rowCount={report.totalCount}
                 pagination
                 paginationMode="server"