(Fix) - Settings ui break (#1073)

* Adds useWindowDimensions hook
Uses useWindowDimensions hook to render the address on ownerAddressTable depending of the size of the screen

* Fix table width for medium sizes

* Reduces padding for medium screen sizes
Also simplifies js logic for adding cut addresses

* Adjust the padding for larger screens

* Adjust the padding for larger screens

Co-authored-by: Mikhail Mikheev <mmvsha73@gmail.com>

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;
 }

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 (
     <Block justify="left">
       <Identicon address={address} diameter={32} />
       {showLinks ? (
         <div style={{ marginLeft: 10, flexShrink: 1, minWidth: 0 }}>
           {userName}
-          <EtherScanLink knownAddress={knownAddress} type="address" value={address} />
+          <EtherScanLink knownAddress={knownAddress} type="address" value={address} cut={cut} />
         </div>
       ) : (
         <Paragraph style={{ marginLeft: 10 }}>{address}</Paragraph>

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
+}