From f0385f804029799a05e5c59570859f48a189d7e5 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Sun, 21 Apr 2024 22:16:35 +0100
Subject: [PATCH] fix(frontend): column header visibility of tables in mobile
 mui-x v7

---
 frontend/src/components/BookTable/index.tsx   | 22 ++---------------
 frontend/src/components/DataGrid/HeaderFix.ts | 24 +++++++++++++++++++
 .../src/components/FederationTable/index.tsx  |  2 ++
 3 files changed, 28 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/components/DataGrid/HeaderFix.ts

diff --git a/frontend/src/components/BookTable/index.tsx b/frontend/src/components/BookTable/index.tsx
index 453a35bf..9aa0d94b 100644
--- a/frontend/src/components/BookTable/index.tsx
+++ b/frontend/src/components/BookTable/index.tsx
@@ -39,31 +39,13 @@ import RobotAvatar from '../RobotAvatar';
 import { Fullscreen, FullscreenExit, Refresh } from '@mui/icons-material';
 import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
 import { FederationContext, type UseFederationStoreType } from '../../contexts/FederationContext';
+import headerStyleFix from '../DataGrid/HeaderFix';
 
 const ClickThroughDataGrid = styled(DataGrid)({
   '& .MuiDataGrid-overlayWrapperInner': {
     pointerEvents: 'none',
   },
-  // Temporary fix for regression for hidden column labels on Mobile:
-  // https://github.com/mui/mui-x/issues/9776#issuecomment-1648306844
-  '@media (hover: none)': {
-    '&& .MuiDataGrid-menuIcon': {
-      width: 0,
-      visibility: 'hidden',
-    },
-    '&& .MuiDataGrid-sortIcon': {
-      width: 0,
-      visibility: 'hidden',
-    },
-  },
-  '&& .MuiDataGrid-columnHeader--sorted .MuiDataGrid-menuIcon': {
-    width: 'auto',
-    visibility: 'visible',
-  },
-  '&& .MuiDataGrid-columnHeader--sorted .MuiDataGrid-sortIcon': {
-    width: 'auto',
-    visibility: 'visible',
-  },
+  ...{ headerStyleFix },
 });
 
 const premiumColor = function (baseColor: string, accentColor: string, point: number): string {
diff --git a/frontend/src/components/DataGrid/HeaderFix.ts b/frontend/src/components/DataGrid/HeaderFix.ts
new file mode 100644
index 00000000..a8f0d167
--- /dev/null
+++ b/frontend/src/components/DataGrid/HeaderFix.ts
@@ -0,0 +1,24 @@
+// Temporary fix for regression for hidden column labels on Mobile:
+// https://github.com/mui/mui-x/issues/9776#issuecomment-1648306844
+const headerStyleFix = {
+  '@media (hover: none)': {
+    '&& .MuiDataGrid-menuIcon': {
+      width: 0,
+      visibility: 'hidden',
+    },
+    '&& .MuiDataGrid-sortIcon': {
+      width: 0,
+      visibility: 'hidden',
+    },
+  },
+  '&& .MuiDataGrid-columnHeader--sorted .MuiDataGrid-menuIcon': {
+    width: 'auto',
+    visibility: 'visible',
+  },
+  '&& .MuiDataGrid-columnHeader--sorted .MuiDataGrid-sortIcon': {
+    width: 'auto',
+    visibility: 'visible',
+  },
+};
+
+export default headerStyleFix;
diff --git a/frontend/src/components/FederationTable/index.tsx b/frontend/src/components/FederationTable/index.tsx
index f28e63f0..34b15228 100644
--- a/frontend/src/components/FederationTable/index.tsx
+++ b/frontend/src/components/FederationTable/index.tsx
@@ -7,6 +7,7 @@ import RobotAvatar from '../RobotAvatar';
 import { Link, LinkOff } from '@mui/icons-material';
 import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
 import { type UseFederationStoreType, FederationContext } from '../../contexts/FederationContext';
+import headerStyleFix from '../DataGrid/HeaderFix';
 
 interface FederationTableProps {
   maxWidth?: number;
@@ -225,6 +226,7 @@ const FederationTable = ({
       }
     >
       <DataGrid
+        sx={headerStyleFix}
         localeText={localeText}
         rowHeight={3.714 * theme.typography.fontSize}
         headerHeight={3.25 * theme.typography.fontSize}