fix(frontend): column header visibility of tables in mobile mui-x v7

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:
+  ...{ headerStyleFix },
-  // 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',
-  },
 });
 
 const premiumColor = function (baseColor: string, accentColor: string, point: number): string {

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;

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}