diff --git a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx index 1d580e6d..efa58371 100644 --- a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx +++ b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx @@ -11,9 +11,28 @@ import DeviceNetworkHealth from '../../components/Charts/DeviceNetworkHealth' import { CloseCircleIcon } from '@status-im/icons' import { useSelector } from 'react-redux' import { RootState } from '../../redux/store' +import { useEffect, useState } from 'react' const DeviceHealthCheck = () => { const deviceHealthState = useSelector((state: RootState) => state.deviceHealth) + const [windowWidth, setWindowWidth] = useState(window.innerWidth) + + useEffect(() => { + const handleResize = () => { + setWindowWidth(window.innerWidth) + } + window.addEventListener('resize', handleResize) + + return () => window.removeEventListener('resize', handleResize) + }, []) + const breakpoint = 768 + + const responsiveStyle = { + flexWrap: windowWidth <= breakpoint ? 'wrap' : 'nowrap', + flexDirection: windowWidth <= breakpoint ? 'column' : 'row', + alignItems: 'flex-start', + width: windowWidth <= breakpoint ? '200%' : '100%', + } return ( @@ -33,14 +52,14 @@ const DeviceHealthCheck = () => { subtitle="Configure your device to start Staking on Nimbus" isAdvancedSettings={true} /> - + - +