Adjust account displays with overflow (#8699)

* Adjust account displays with overflow * line height adjustments * Adjust SideBar display * Adjust * Adjust AddressMini display * Adjust address column minimum * align styling * Adjust column sizing * Adjust * AccountName breaks * Adjust tags label
2023-01-08 13:16:03 +02:00 · 2023-01-08 13:16:03 +02:00 · c15c11b373
commit c15c11b373
parent 3a40361cdb
7 changed files with 60 additions and 137 deletions
--- a/packages/page-accounts/src/Sidebar/Sidebar.tsx
+++ b/packages/page-accounts/src/Sidebar/Sidebar.tsx
@ -97,16 +97,16 @@ export default React.memo(styled(FullSidebar)`
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
-
-
    width: 100%;

    .ui--AddressSection__AddressColumn {
+      flex: 1;
      margin-left: 1rem;

      .ui--AccountName {
        max-width: 21.5rem;
        overflow: hidden;
+        white-space: normal;
      }
    }

--- a/packages/page-explorer/src/BlockHeader.tsx
+++ b/packages/page-explorer/src/BlockHeader.tsx
@ -6,7 +6,7 @@ import type { HeaderExtended } from '@polkadot/api-derive/types';
 import React from 'react';
 import { Link } from 'react-router-dom';

-import { AddressMini, Digits } from '@polkadot/react-components';
+import { AddressSmall, Digits } from '@polkadot/react-components';
 import { formatNumber } from '@polkadot/util';

 interface Props {
@ -28,7 +28,7 @@ function BlockHeader ({ value }: Props): React.ReactElement<Props> | null {
      <td className='all hash overflow'>{hashHex}</td>
      <td className='address'>
        {value.author && (
-          <AddressMini value={value.author} />
+          <AddressSmall value={value.author} />
        )}
      </td>
    </tr>
--- a/packages/react-components/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@ -118,7 +118,7 @@ function extractName (address: string, accountIndex?: AccountIndex, defaultName?
  const [displayName, isLocal, isAddress, isSpecial] = defaultOrAddr(defaultName, address, accountIndex);

  return (
-    <div className='via-identity'>
+    <span className='via-identity'>
      {isSpecial && (
        <Badge
          color='green'
@ -127,20 +127,20 @@ function extractName (address: string, accountIndex?: AccountIndex, defaultName?
        />
      )}
      <span className={`name${(isLocal || isSpecial) ? ' isLocal' : (isAddress ? ' isAddress' : '')}`}>{displayName}</span>
-    </div>
+    </span>
  );
 }

 function createIdElem (nameElem: React.ReactNode, color: 'green' | 'red' | 'gray', icon: IconName): React.ReactNode {
  return (
-    <div className='via-identity'>
+    <span className='via-identity'>
      <Badge
        color={color}
        icon={icon}
        isSmall
      />
      {nameElem}
-    </div>
+    </span>
  );
 }

@ -209,7 +209,7 @@ function AccountName ({ children, className = '', defaultName, label, onClick, o
  );

  return (
-    <div
+    <span
      className={`ui--AccountName${withSidebar ? ' withSidebar' : ''} ${className}`}
      data-testid='account-name'
      onClick={
@ -219,14 +219,13 @@ function AccountName ({ children, className = '', defaultName, label, onClick, o
      }
    >
      {label || ''}{override || name}{children}
-    </div>
+    </span>
  );
 }

 export default React.memo(styled(AccountName)`
-  align-items: center;
  border: 1px dotted transparent;
-  display: inline-flex;
+  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;

@ -236,13 +235,9 @@ export default React.memo(styled(AccountName)`
  }

  .via-identity {
-    align-items: center;
-    display: inline-flex;
-    width: 100%;
+    word-break: break-all;

    .name {
-      align-items: center;
-      display: inline-flex;
      font-weight: var(--font-weight-normal) !important;
      filter: grayscale(100%);
      line-height: 1;
--- a/packages/react-components/src/AddressMini.tsx
+++ b/packages/react-components/src/AddressMini.tsx
@ -50,17 +50,17 @@ function AddressMini ({ balance, bonded, children, className = '', iconInfo, isH
      {label && (
        <label className='ui--AddressMini-label'>{label}</label>
      )}
-      <div className='ui--AddressMini-icon'>
+      <span className='ui--AddressMini-icon'>
        <IdentityIcon value={value} />
        {iconInfo && (
          <div className='ui--AddressMini-icon-info'>
            {iconInfo}
          </div>
        )}
-      </div>
-      <div className='ui--AddressMini-info'>
+      </span>
+      <span className='ui--AddressMini-info'>
        {withAddress && (
-          <div
+          <span
            className='ui--AddressMini-address'
            onClick={onNameClick}
          >
@ -75,10 +75,10 @@ function AddressMini ({ balance, bonded, children, className = '', iconInfo, isH
              )
              : toShortAddress(value)
            }
-          </div>
+          </span>
        )}
        {children}
-      </div>
+      </span>
      <div className='ui--AddressMini-balances'>
        {withBalance && (
          <BalanceDisplay
@ -106,13 +106,13 @@ function AddressMini ({ balance, bonded, children, className = '', iconInfo, isH
 }

 export default React.memo(styled(AddressMini)`
-  display: inline-block;
+  overflow-x: hidden;
  padding: 0 0.25rem 0 1rem;
  text-align: left;
+  text-overflow: ellipsis;
  white-space: nowrap;

  &.padded {
-    display: inline-block;
    padding: 0 1rem 0 0;
  }

@ -122,46 +122,12 @@ export default React.memo(styled(AddressMini)`
  }

  .ui--AddressMini-info {
-    max-width: 12rem;
-    min-width: 12rem;
-
-    @media only screen and (max-width: 1800px) {
-      max-width: 11.5rem;
-      min-width: 11.5rem;
-    }
-
-    @media only screen and (max-width: 1700px) {
-      max-width: 11rem;
-      min-width: 11rem;
-    }
-
-    @media only screen and (max-width: 1600px) {
-      max-width: 10.5rem;
-      min-width: 10.5rem;
-    }
-
-    @media only screen and (max-width: 1500px) {
-      max-width: 10rem;
-      min-width: 10rem;
-    }
-
-    @media only screen and (max-width: 1400px) {
-      max-width: 9.5rem;
-      min-width: 9.5rem;
-    }
-
-    @media only screen and (max-width: 1300px) {
-      max-width: 9rem;
-      min-width: 9rem;
-    }
  }

  .ui--AddressMini-address {
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
-    width: fit-content;
-    max-width: inherit;

    > div {
      overflow: hidden;
@ -193,8 +159,6 @@ export default React.memo(styled(AddressMini)`
  }

  .ui--AddressMini-icon {
-    margin: 0 0.5rem 0 0;
-
    .ui--AddressMini-icon-info {
      position: absolute;
      right: -0.5rem;
@ -203,14 +167,13 @@ export default React.memo(styled(AddressMini)`
    }

    .ui--IdentityIcon {
-      margin: 0;
+      margin-right: 0.5rem;
      vertical-align: middle;
    }
  }

  .ui--AddressMini-icon,
  .ui--AddressMini-info {
-    display: inline-block;
    position: relative;
    vertical-align: middle;
  }
--- a/packages/react-components/src/AddressSmall.tsx
+++ b/packages/react-components/src/AddressSmall.tsx
@ -25,16 +25,14 @@ interface Props {
 }

 function AddressSmall ({ children, className = '', defaultName, onClickName, overrideName, parentAddress, toggle, value, withShortAddress = false, withSidebar = true }: Props): React.ReactElement<Props> {
-  const displayAsGrid = parentAddress || withShortAddress;
-
  return (
-    <div className={`ui--AddressSmall ${className}`}>
-      <div>
+    <div className={`ui--AddressSmall ${className} ${(parentAddress || withShortAddress) ? 'withPadding' : ''}`}>
+      <span className='ui--AddressSmall-icon'>
        <IdentityIcon value={value as Uint8Array} />
-      </div>
-      <div className={displayAsGrid ? 'addressGrid' : ''}>
+      </span>
+      <span className='ui--AddressSmall-info'>
        {parentAddress && (
-          <div className='parentAccountName'>
+          <div className='parentName'>
            <ParentAccount address={parentAddress} />
          </div>
        )}
@ -57,88 +55,54 @@ function AddressSmall ({ children, className = '', defaultName, onClickName, ove
            {toShortAddress(value)}
          </div>
        )}
-      </div>
+      </span>
    </div>
  );
 }

 export default React.memo(styled(AddressSmall)`
+  overflow-x: hidden;
+  text-overflow: ellipsis;
  white-space: nowrap;
-  display: flex;
-  align-items: center;

-  .ui--IdentityIcon {
-    margin-right: 0.75rem;
+  &.withPadding {
+    padding: 0.75rem 0;
+  }
+
+  .ui--AddressSmall-icon {
+    .ui--IdentityIcon {
+      margin-right: 0.5rem;
+      vertical-align: middle;
+    }
+  }
+
+  .ui--AddressSmall-info {
+    position: relative;
    vertical-align: middle;
-  }

-  .parentAccountName,
-  .shortAddress {
-    display: flex;
-    flex-direction: column;
-    align-self: center;
-  }
+    .parentName {
+      font-size: 0.75rem;
+      left: 0;
+      position: absolute;
+      top: -0.80rem;
+    }

-  .parentAccountName {
-    grid-area: parentAccountName;
-  }
-
-  .accountName {
-    grid-area: accountName;
-  }
-
-  .shortAddress {
-    grid-area: shortAddress;
-    color: #8B8B8B;
-    font-size: 0.75rem;
-  }
-
-  .addressGrid {
-    border: 0.031rem;
-    height: 3.438rem;
-    display: grid;
-    grid-template-columns: max-content;
-    grid-template-rows: 30% 40% 30%;
-    grid-template-areas:
-    "parentAccountName"
-    "accountName"
-    "shortAddress";
+    .shortAddress {
+      bottom: -0.95rem;
+      color: #8B8B8B;
+      font-size: 0.75rem;
+      left: 0;
+      position: absolute;
+    }
  }

  .ui--AccountName {
-    max-width: 26rem;
    overflow: hidden;
+    vertical-align: middle;
+    white-space: nowrap;

    &.withSidebar {
      cursor: help;
    }
-
-    @media only screen and (max-width: 1700px) {
-      max-width: 24rem;
-    }
-
-    @media only screen and (max-width: 1600px) {
-      max-width: 22rem;
-    }
-
-    @media only screen and (max-width: 1500px) {
-      max-width: 20rem;
-    }
-
-    @media only screen and (max-width: 1400px) {
-      max-width: 18rem;
-    }
-
-    @media only screen and (max-width: 1300px) {
-      max-width: 16rem;
-    }
-
-    @media only screen and (max-width: 1200px) {
-      max-width: 14rem;
-    }
-
-    @media only screen and (max-width: 1100px) {
-      max-width: 12rem;
-    }
  }
 `);
--- a/packages/react-components/src/Table/Table.tsx
+++ b/packages/react-components/src/Table/Table.tsx
@ -235,7 +235,8 @@ export default React.memo(styled(Table)`
      }

      &.address {
-        min-width: 11rem;
+        max-width: 0;
+        min-width: 15rem;
        overflow-x: hidden;
      }

--- a/packages/react-components/src/Tags.tsx
+++ b/packages/react-components/src/Tags.tsx
@ -33,7 +33,7 @@ function Tags ({ children, className = '', isEditable, isEditing, onChange, onSa
          label={tag}
        />
      ))
-      : <label>{t<string>('none')}</label>,
+      : <div>{t<string>('none')}</div>,
    [t, value]
  );