From 36e78e00b4a7a1bcf619bd11980120ab881b8bb0 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Fri, 3 Jul 2020 09:23:30 -0300
Subject: [PATCH] (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 ++++++-
 .../OwnerAddressTableCell/index.tsx           | 17 ++++++++++++-
 .../container/hooks/useWindowDimensions.tsx   | 24 +++++++++++++++++++
 3 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/safe/container/hooks/useWindowDimensions.tsx

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