From 07951f472b302ab0bc531d06f9ec9aaaf3c57059 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Sat, 12 Dec 2020 10:44:44 +0100
Subject: [PATCH] hide too long names (#581)

Co-authored-by: Github Actions <action@github.com>
---
 .../extension-ui/src/components/Address.tsx   | 42 ++++++++++++-------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx
index 3338abe8..1aca7c9c 100644
--- a/packages/extension-ui/src/components/Address.tsx
+++ b/packages/extension-ui/src/components/Address.tsx
@@ -35,7 +35,7 @@ interface Props {
   genesisHash?: string | null;
   isExternal?: boolean | null;
   isHidden?: boolean;
-  name?: React.ReactNode | null;
+  name?: string | null;
   parentName?: string | null;
   suri?: string;
   toggleActions?: number;
@@ -124,18 +124,23 @@ function Address ({ actions, address, children, className, genesisHash, isExtern
     [address, isHidden]
   );
 
-  const displayedName = (
-    <>
-      {(account?.isExternal || isExternal) && (
-        <FontAwesomeIcon
-          className='externalIcon'
-          icon={faExternalLinkSquareAlt}
-          title={t('external account')}
-        />
-      )}
-      {name || account?.name || t('<unknown>')}
-    </>
-  );
+  const Name = () => {
+    const displayName = name || account?.name || t('<unknown>');
+
+    return (
+      <>
+        {(account?.isExternal || isExternal) && (
+          <FontAwesomeIcon
+            className='externalIcon'
+            icon={faExternalLinkSquareAlt}
+            title={t('external account')}
+          />
+        )}
+        <span title={displayName}>{displayName}</span>
+      </>);
+  };
+
+  const parentNameSuri = `${parentName || ''}  ${suri || ''}`;
 
   return (
     <div className={className}>
@@ -160,11 +165,14 @@ function Address ({ actions, address, children, className, genesisHash, isExtern
                   <div
                     className='parentName'
                     data-field='parent'
+                    title = {parentNameSuri}
                   >
-                    {parentName}&nbsp;&nbsp;{suri || ''}
+                    {parentNameSuri}
                   </div>
                 </div>
-                <div className='name displaced'>{displayedName}</div>
+                <div className='name displaced'>
+                  <Name/>
+                </div>
               </>
             )
             : (
@@ -172,7 +180,7 @@ function Address ({ actions, address, children, className, genesisHash, isExtern
                 className='name'
                 data-field='name'
               >
-                {displayedName}
+                <Name/>
               </div>
             )
           }
@@ -332,6 +340,7 @@ export default styled(Address)(({ theme }: ThemeProps) => `
     overflow: hidden;
     text-overflow: ellipsis;
     width: 300px;
+    white-space: nowrap;
 
     &.displaced {
       padding-top: 10px;
@@ -346,6 +355,7 @@ export default styled(Address)(({ theme }: ThemeProps) => `
     padding: 0.25rem 0 0 0.8rem;
     text-overflow: ellipsis;
     width: 270px;
+    white-space: nowrap;
   }
 
   .fullAddress {