diff --git a/packages/react-magma-dom/src/components/Table/Table.tsx b/packages/react-magma-dom/src/components/Table/Table.tsx index 14ba893b8..1f2c9eabd 100644 --- a/packages/react-magma-dom/src/components/Table/Table.tsx +++ b/packages/react-magma-dom/src/components/Table/Table.tsx @@ -107,9 +107,12 @@ export const TableContext = React.createContext({ export const TableContainer = styled.div<{ isInverse?: boolean; + minWidth: number; tableOverFlow?: string; }>` - overflow: ${props => props.tableOverFlow}; + @media screen and (max-width: ${props => props.minWidth}px) { + overflow: auto; + } &:focus { outline: none; } @@ -167,27 +170,27 @@ export const Table = React.forwardRef( const tableWrapper = `table-wrapper-${testId}`; - const [tableOverFlow, setTableOverFlow] = React.useState('visible'); + // const [tableOverFlow, setTableOverFlow] = React.useState('visible'); - const [windowWidth, setWindowWidth] = React.useState(window.innerWidth); + // const [windowWidth, setWindowWidth] = React.useState(window.innerWidth); - React.useEffect(() => { - function handleResize() { - setWindowWidth(window.innerWidth); - if (window.innerWidth < minWidth && minWidth) { - setTableOverFlow('auto'); - } + // React.useEffect(() => { + // function handleResize() { + // setWindowWidth(window.innerWidth); + // if (window.innerWidth < minWidth && minWidth) { + // setTableOverFlow('auto'); + // } - if (window.innerWidth > minWidth) { - setTableOverFlow('visible'); - } - } + // if (window.innerWidth > minWidth) { + // setTableOverFlow('visible'); + // } + // } - window.addEventListener('resize', handleResize); - handleResize(); + // window.addEventListener('resize', handleResize); + // handleResize(); - return () => window.removeEventListener('resize', handleResize); - }, [windowWidth]); + // return () => window.removeEventListener('resize', handleResize); + // }, [windowWidth]); return ( (