Minor overflow adjustments (#2095)

* Minor overflow adjustments

* Default names to uppercase

* s/normal/none/

* isAddress check for text formatting

* Adjust caching with isAddress info

* Overflow to bottom

packages/react-components/src/AccountName.tsx

@@ -33,26 +33,28 @@ interface Props extends BareProps {
   withShort?: boolean;
 }
 
-const nameCache: Map<string, React.ReactNode> = new Map();
+const nameCache: Map<string, [boolean, React.ReactNode]> = new Map();
 
-function defaultOrAddr (defaultName = '', _address: AccountId | AccountIndex | Address | string | Uint8Array, _accountIndex?: AccountIndex | null): [React.ReactNode, boolean] {
+function defaultOrAddr (defaultName = '', _address: AccountId | AccountIndex | Address | string | Uint8Array, _accountIndex?: AccountIndex | null): [React.ReactNode, boolean, boolean] {
   const accountId = _address.toString();
   const cached = nameCache.get(accountId);
 
   if (cached) {
-    return [cached, false];
+    const [isAddressCached, nameCached] = cached;
+
+    return [nameCached, false, isAddressCached];
   }
 
   const accountIndex = (_accountIndex || '').toString();
   const [isAddress,, extracted] = getAddressName(accountId, null, defaultName);
 
   if (isAddress && accountIndex) {
-    nameCache.set(accountId, accountIndex);
+    nameCache.set(accountId, [true, accountIndex]);
 
-    return [accountIndex, false];
+    return [accountIndex, false, true];
   }
 
-  return [extracted, !isAddress];
+  return [extracted, !isAddress, isAddress];
 }
 
 function AccountName ({ children, className, defaultName, label, onClick, override, style, toggle, value, withShort }: Props): React.ReactElement<Props> {
@@ -70,17 +72,18 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
   const address = useMemo((): string => (value || '').toString(), [value]);
 
   const _extractName = (accountId?: AccountId, accountIndex?: AccountIndex): React.ReactNode => {
-    const [name, isLocal] = defaultOrAddr(defaultName, accountId || address, withShort ? null : accountIndex);
+    const [name, isLocal, isAddress] = defaultOrAddr(defaultName, accountId || address, withShort ? null : accountIndex);
 
     return (
       <div className='via-identity'>
-        <div className={`name ${isLocal ? 'isLocal' : 'isAddress'}`}>{name}</div>
+        <span className={`name ${isLocal ? 'isLocal' : (isAddress ? 'isAddress' : '')}`}>{name}</span>
       </div>
     );
   };
 
   const [name, setName] = useState<React.ReactNode>((): React.ReactNode => _extractName());
 
+  // determine if we have a registrar or not - registrars are allowed to approve
   useEffect((): void => {
     if (allAccounts && registrars) {
       setIsRegistrar(
@@ -95,6 +98,7 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
     }
   }, [allAccounts, registrars]);
 
+  // find the id of our registrar in the list
   useEffect((): void => {
     if (registrars && judgementAccountId) {
       setRegistrarIndex(
@@ -111,6 +115,7 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
     }
   }, [judgementAccountId, registrars]);
 
+  // set the actual nickname, localname, accountIndex, accountId
   useEffect((): void => {
     const { accountId, accountIndex, identity, nickname } = info || {};
 
@@ -183,20 +188,18 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
                     : 'gray'
               }
             />
-            <div className={`name ${isGood && 'isGood'}`}>{displayName.toUpperCase()}</div>
+            <span className={`name ${isGood && 'isGood'}`}>{displayName}</span>
           </div>
         );
 
-        nameCache.set(address, displayName);
+        nameCache.set(address, [false, displayName]);
         setName((): React.ReactNode => name);
       } else {
         setName((): React.ReactNode => _extractName(accountId, accountIndex));
       }
     } else if (nickname) {
-      const name = nickname.toUpperCase();
-
-      nameCache.set(address, name);
-      setName(name);
+      nameCache.set(address, [false, nickname]);
+      setName(nickname);
     } else {
       setName(defaultOrAddr(defaultName, accountId || address, withShort ? null : accountIndex));
     }
@@ -274,15 +277,20 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
 export default styled(AccountName)`
   .via-identity {
     display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: bottom;
+    width: 100%;
 
     .name {
-      display: inline-block;
       font-weight: normal !important;
       filter: grayscale(100%);
       opacity: 0.6;
+      text-transform: uppercase;
 
       &.isAddress {
         font-family: monospace;
+        text-transform: none;
       }
 
       &.isGood,

packages/react-components/src/Table.tsx

@@ -125,6 +125,14 @@ export default styled(Table)`
 
         &.top {
           vertical-align: top;
+
+          >.ui--AddressMini.padded:first-child {
+            margin-top: -0.25rem;
+
+            .ui--AddressMini-label {
+              margin-bottom: 0.25rem;
+            }
+          }
         }
 
         &.toppad {