From 52d03a1f27009af6043e63e6d7fd55219c76ae7d Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Tue, 21 Jun 2022 17:46:39 +1000
Subject: [PATCH 1/2] fix HiddenFields slash color

---
 src/components/TableToolbar/HiddenFields.tsx | 82 +++++++++++---------
 1 file changed, 46 insertions(+), 36 deletions(-)

diff --git a/src/components/TableToolbar/HiddenFields.tsx b/src/components/TableToolbar/HiddenFields.tsx
index ac1a2160..22b5b497 100644
--- a/src/components/TableToolbar/HiddenFields.tsx
+++ b/src/components/TableToolbar/HiddenFields.tsx
@@ -3,7 +3,7 @@ import { useAtom } from "jotai";
 import { isEqual } from "lodash-es";
 import { colord } from "colord";
 
-import { Box, AutocompleteProps } from "@mui/material";
+import { Box, AutocompleteProps, Theme } from "@mui/material";
 import VisibilityIcon from "@mui/icons-material/VisibilityOutlined";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOffOutlined";
 import IconSlash from "@src/components/IconSlash";
@@ -62,43 +62,53 @@ export default function HiddenFields() {
     true,
     false,
     any
-  >["renderOption"] = (props, option, { selected }) => (
-    <li {...props}>
-      <ColumnItem option={option}>
-        <Box
-          sx={[
-            { position: "relative", height: "1.5rem" },
-            selected
-              ? { color: "primary.main" }
-              : {
-                  opacity: 0,
-                  ".MuiAutocomplete-option.Mui-focused &": { opacity: 0.5 },
-                },
-          ]}
-        >
-          <VisibilityIcon />
-          <IconSlash
+  >["renderOption"] = (props, option, { selected }) => {
+    const slashColor = (theme: Theme) =>
+      colord(theme.palette.background.paper)
+        .mix("#fff", theme.palette.mode === "dark" ? 0.16 : 0)
+        .alpha(1);
+
+    return (
+      <li {...props}>
+        <ColumnItem option={option}>
+          <Box
             sx={[
-              {
-                "& .icon-slash-mask": {
-                  stroke: (theme) =>
-                    colord(theme.palette.background.paper)
-                      .mix("#fff", theme.palette.mode === "dark" ? 0.17 : 0)
-                      .mix(
-                        theme.palette.action.selected,
-                        theme.palette.action.selectedOpacity
-                      )
-                      .alpha(1)
-                      .toHslString(),
-                },
-              },
-              selected ? { strokeDashoffset: 0 } : {},
+              { position: "relative", height: "1.5rem" },
+              selected
+                ? { color: "primary.main" }
+                : {
+                    opacity: 0,
+                    ".MuiAutocomplete-option.Mui-focused &": { opacity: 0.5 },
+                  },
             ]}
-          />
-        </Box>
-      </ColumnItem>
-    </li>
-  );
+          >
+            <VisibilityIcon />
+            <IconSlash
+              sx={[
+                {
+                  "& .icon-slash-mask": {
+                    stroke: (theme) => slashColor(theme).toHslString(),
+                  },
+                  ".Mui-focused & .icon-slash-mask": {
+                    stroke: (theme) =>
+                      slashColor(theme)
+                        .mix(
+                          theme.palette.primary.main,
+                          theme.palette.action.selectedOpacity +
+                            theme.palette.action.hoverOpacity
+                        )
+                        .alpha(1)
+                        .toHslString(),
+                  },
+                },
+                selected ? { strokeDashoffset: 0 } : {},
+              ]}
+            />
+          </Box>
+        </ColumnItem>
+      </li>
+    );
+  };
 
   return (
     <>

From f4d70b77b10d15cbe1a111375ca08368e099e5d5 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Tue, 21 Jun 2022 17:49:27 +1000
Subject: [PATCH 2/2] fix sub-table container height

---
 src/components/Table/Table.tsx           | 2 +-
 src/pages/Table/ProvidedSubTablePage.tsx | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index bb0ba232..467a9a14 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -216,7 +216,7 @@ export default function Table({
   return (
     <Suspense fallback={<Loading message="Loading fields" />}>
       {/* <Hotkeys selectedCell={selectedCell} /> */}
-      <TableContainer rowHeight={rowHeight}>
+      <TableContainer rowHeight={rowHeight} className="table-container">
         <DndProvider backend={HTML5Backend}>
           {showLeftScrollDivider && <div className="left-scroll-divider" />}
 
diff --git a/src/pages/Table/ProvidedSubTablePage.tsx b/src/pages/Table/ProvidedSubTablePage.tsx
index c4b505df..8b5af2b3 100644
--- a/src/pages/Table/ProvidedSubTablePage.tsx
+++ b/src/pages/Table/ProvidedSubTablePage.tsx
@@ -23,6 +23,7 @@ import {
 } from "@src/atoms/tableScope";
 import { ROUTES } from "@src/constants/routes";
 import { APP_BAR_HEIGHT } from "@src/layouts/Navigation";
+import { TABLE_TOOLBAR_HEIGHT } from "@src/components/TableToolbar";
 
 /**
  * Wraps `TablePage` with the data for a top-level table.
@@ -98,6 +99,9 @@ export default function ProvidedSubTablePage() {
           },
           "& .dialog-close": { m: (APP_BAR_HEIGHT - 40) / 2 / 8, ml: -1 },
         },
+        "& .table-container": {
+          height: `calc(100vh - ${APP_BAR_HEIGHT}px - ${TABLE_TOOLBAR_HEIGHT}px - 16px)`,
+        },
       }}
       ScrollableDialogContentProps={{
         disableTopDivider: true,