Pool name formatting via line-clamp (#8691)

* Pool name formatting via line-clamp

* Use line-clamp for Expander info

* Adjust max-width

packages/page-staking/src/Pools/Pool.tsx

@@ -57,7 +57,11 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props):
     <>
       <tr className={className}>
         <td className='number'><h1>{formatNumber(poolId)}</h1></td>
-        <td className='start'>{info && info.metadata}</td>
+        <td className='start'>
+          {info && (
+            <div className={isExpanded ? '' : 'clamp'}>{info.metadata}</div>
+          )}
+        </td>
         <td className='number media--1100'>{info && info.bonded.state.type}</td>
         <td className='number'>{info && <FormatBalance value={info.bonded.points} />}</td>
         <td className='number media--1400'>{info && !info.rewardClaimable.isZero() && <FormatBalance value={info.rewardClaimable} />}</td>
@@ -161,4 +165,14 @@ export default React.memo(styled(Pool)`
     color: var(--color-label);
     text-transform: lowercase;
   }
+
+  .clamp {
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    box-orient: vertical;
+    display: -webkit-box;
+    line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 `);

packages/page-staking/src/Pools/usePoolInfo.ts

@@ -36,11 +36,7 @@ const OPT_MULTI = {
 };
 
 function transformName (input: string): string {
-  const mid = input.replace(/[^\x20-\x7E]/g, '');
-
-  return (mid.length > 64)
-    ? `${mid.substring(0, 64)}…`
-    : mid;
+  return input.replace(/[^\x20-\x7E]/g, '');
 }
 
 function usePoolInfoImpl (poolId: BN): PoolInfo | null | undefined {

packages/react-components/src/AddressSmall.tsx

@@ -137,7 +137,7 @@ export default React.memo(styled(AddressSmall)`
       max-width: 14rem;
     }
 
-    @media only screen and (max-width: 1200px) {
+    @media only screen and (max-width: 1100px) {
       max-width: 12rem;
     }
   }

packages/react-components/src/Expander.tsx

@@ -141,10 +141,6 @@ export default React.memo(styled(Expander)`
     .ui--Expander-content {
       display: none;
     }
-
-    .ui--Expander-summary-header-sub {
-      max-width: 35rem;
-    }
   }
 
   &.isExpanded {
@@ -189,6 +185,23 @@ export default React.memo(styled(Expander)`
       span {
         white-space: normal;
       }
+
+      .ui--Expander-summary-header-sub,
+      .ui--Expander-summary-title {
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        box-orient: vertical;
+        display: -webkit-box;
+        line-clamp: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: normal;
+      }
+
+      .ui--Expander-summary-header-sub {
+        font-size: 1rem;
+        opacity: 0.6;
+      }
     }
 
     .ui--Icon {
@@ -210,13 +223,6 @@ export default React.memo(styled(Expander)`
         vertical-align: text-bottom;
       }
     }
-
-    .ui--Expander-summary-header-sub {
-      font-size: 1rem;
-      opacity: 0.6;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
   }
 
   &.hasContent .ui--Expander-summary {