Media adjustments with AddressSmall (#3019)

* Media adjustments with AddressSmall

* Update packages/page-staking/src/Targets/Validator.tsx

packages/page-staking/src/Targets/Validator.tsx

@@ -99,7 +99,7 @@ function Validator ({ canSelect, filterName, info, isSelected, toggleFavorite, t
       <td className='address all'>
         <AddressSmall value={accountId} />
       </td>
-      <td className='number'>{numNominators || ''}</td>
+      <td className='number ui--media-1200'>{numNominators || ''}</td>
       <td className='number'>
         {
           isCommission
@@ -109,14 +109,7 @@ function Validator ({ canSelect, filterName, info, isSelected, toggleFavorite, t
       </td>
       <td className='number together'>{!bondTotal.isZero() && <FormatBalance value={bondTotal} />}</td>
       <td className='number together'>{!bondOwn.isZero() && <FormatBalance value={bondOwn} />}</td>
-      <td className='number together'>
-        {!bondOther.isZero() && (
-          <FormatBalance
-            labelPost={` (${numNominators})`}
-            value={bondOther}
-          />
-        )}
-      </td>
+      <td className='number together ui--media-1600'>{!bondOther.isZero() && <FormatBalance value={bondOther} />}</td>
       <td className='number together'>{!rewardPayout.isZero() && <FormatBalance value={rewardPayout} />}</td>
       <td>
         {(canSelect || isSelected) && (

packages/page-staking/src/Targets/index.tsx

@@ -107,16 +107,24 @@ function Targets ({ className = '', isInElection, ownStashes, targets: { calcWit
     [t]
   );
 
+  const classes = useMemo(
+    (): Record<string, string> => ({
+      rankBondOther: 'ui--media-1600',
+      rankNumNominators: 'ui--media-1200'
+    }),
+    []
+  );
+
   const header = useMemo(() => [
     [t('validators'), 'start', 4],
     ...['rankNumNominators', 'rankComm', 'rankBondTotal', 'rankBondOwn', 'rankBondOther', 'rankOverall'].map((header) => [
       <>{labels[header]}<Icon name={sortBy === header ? (sortFromMax ? 'chevron down' : 'chevron up') : 'minus'} /></>,
-      sorted ? `isClickable ${sortBy === header ? 'ui--highlight--border' : ''} number` : 'number',
+      `${sorted ? `isClickable ${sortBy === header ? 'ui--highlight--border' : ''} number` : 'number'} ${classes[header] || ''}`,
       1,
       (): void => _sort(header as 'rankComm')
     ]),
     []
-  ], [_sort, labels, sortBy, sorted, sortFromMax, t]);
+  ], [_sort, classes, labels, sortBy, sorted, sortFromMax, t]);
 
   const filter = useMemo(() => (
     sorted && (

packages/react-components/src/AddressSmall.tsx

@@ -69,7 +69,31 @@ export default React.memo(styled(AddressSmall)`
     }
 
     > div {
-      max-width: 12rem;
+      max-width: 24rem;
+
+      @media only screen and (max-width: 1800px) {
+        max-width: 22rem;
+      }
+
+      @media only screen and (max-width: 1700px) {
+        max-width: 20rem;
+      }
+
+      @media only screen and (max-width: 1600px) {
+        max-width: 18rem;
+      }
+
+      @media only screen and (max-width: 1500px) {
+        max-width: 16rem;
+      }
+
+      @media only screen and (max-width: 1400px) {
+        max-width: 14rem;
+      }
+
+      @media only screen and (max-width: 1300px) {
+        max-width: 12rem;
+      }
     }
   }
 `);

packages/react-components/src/styles/media.ts

@@ -30,9 +30,33 @@ export default css`
     display: none;
   }
 
+  .ui--media-2000 {
+    @media only screen and (max-width: 1900px) {
+      display: none;
+    }
+  }
+
+  .ui--media-1900 {
+    @media only screen and (max-width: 1900px) {
+      display: none;
+    }
+  }
+
+  .ui--media-1800 {
+    @media only screen and (max-width: 1800px) {
+      display: none;
+    }
+  }
+
+  .ui--media-1700 {
+    @media only screen and (max-width: 1700px) {
+      display: none;
+    }
+  }
+
   .ui--media-1600 {
     @media only screen and (max-width: 1600px) {
-      width: none;
+      display: none;
     }
   }
 
@@ -84,7 +108,7 @@ export default css`
     }
   }
 
-  .ui--media-8700 {
+  .ui--media-700 {
     @media only screen and (max-width: 700px) {
       display: none;
     }
@@ -96,6 +120,18 @@ export default css`
     }
   }
 
+  .ui--media-500 {
+    @media only screen and (max-width: 500px) {
+      display: none;
+    }
+  }
+
+  .ui--media-400 {
+    @media only screen and (max-width: 400px) {
+      display: none;
+    }
+  }
+
   @media (min-width: 1281px) {
     .ui--flex-large {
       display: flex;