diff --git a/src/components/layout/Page/index.module.scss b/src/components/layout/Page/index.module.scss index 2e3e196f..26c03497 100644 --- a/src/components/layout/Page/index.module.scss +++ b/src/components/layout/Page/index.module.scss @@ -9,10 +9,17 @@ @media only screen and (max-width: #{$screenLg}px) { .page { - padding: 72px $lg 0px $lg; + padding: 72px $lg 0 $lg; } } +@media only screen and (min-width: #{$screenLg}px) and (max-width: 1360px) { + .page { + padding: 96px 120px 0 120px; + } +} + + .center { align-self: center; } diff --git a/src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.tsx b/src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.tsx index 961feb5f..671d4cea 100644 --- a/src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.tsx +++ b/src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.tsx @@ -4,16 +4,31 @@ import EtherScanLink from 'src/components/EtherscanLink' import Identicon from 'src/components/Identicon' import Block from 'src/components/layout/Block' import Paragraph from 'src/components/layout/Paragraph' +import { useWindowDimensions } from '../../../../container/hooks/useWindowDimensions' +import { useEffect, useState } from 'react' const OwnerAddressTableCell = (props) => { const { address, knownAddress, showLinks, userName } = props + const [cut, setCut] = useState(undefined) + const { width } = useWindowDimensions() + + useEffect(() => { + if (width <= 900) { + setCut(6) + } else if (width <= 1024) { + setCut(12) + } else { + setCut(undefined) + } + }, [width]) + return ( {showLinks ? (
{userName} - +
) : ( {address} diff --git a/src/routes/safe/container/hooks/useWindowDimensions.tsx b/src/routes/safe/container/hooks/useWindowDimensions.tsx new file mode 100644 index 00000000..3a5cd9cf --- /dev/null +++ b/src/routes/safe/container/hooks/useWindowDimensions.tsx @@ -0,0 +1,24 @@ +import { useState, useEffect } from 'react' + +function getWindowDimensions() { + const { innerWidth: width, innerHeight: height } = window + return { + width, + height, + } +} + +export const useWindowDimensions = (): { width: number; height: number } => { + const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions()) + + useEffect(() => { + function handleResize() { + setWindowDimensions(getWindowDimensions()) + } + + window.addEventListener('resize', handleResize) + return () => window.removeEventListener('resize', handleResize) + }, []) + + return windowDimensions +}