mirror of
https://github.com/RoboSats/robosats.git
synced 2024-09-11 14:05:51 +03:00
fix(frontend): column header visibility of tables in mobile mui-x v7
This commit is contained in:
parent
ee9b7147e9
commit
f0385f8040
@ -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 {
|
||||
|
24
frontend/src/components/DataGrid/HeaderFix.ts
Normal file
24
frontend/src/components/DataGrid/HeaderFix.ts
Normal file
@ -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;
|
@ -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}
|
||||
|
Loading…
Reference in New Issue
Block a user