From a565490d21314fd82bd5353087ceca6b7d4ef160 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Thu, 5 Jan 2023 14:22:55 +0200
Subject: [PATCH] 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      | 16 ++++++++++-
 .../page-staking/src/Pools/usePoolInfo.ts     |  6 +---
 .../react-components/src/AddressSmall.tsx     |  2 +-
 packages/react-components/src/Expander.tsx    | 28 +++++++++++--------
 4 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/packages/page-staking/src/Pools/Pool.tsx b/packages/page-staking/src/Pools/Pool.tsx
index ecdc316371..37a1de55a1 100644
--- a/packages/page-staking/src/Pools/Pool.tsx
+++ b/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;
+  }
 `);
diff --git a/packages/page-staking/src/Pools/usePoolInfo.ts b/packages/page-staking/src/Pools/usePoolInfo.ts
index fa1cd14f4c..9ff6ca9cbc 100644
--- a/packages/page-staking/src/Pools/usePoolInfo.ts
+++ b/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 {
diff --git a/packages/react-components/src/AddressSmall.tsx b/packages/react-components/src/AddressSmall.tsx
index 04642ea4be..da79d056dc 100644
--- a/packages/react-components/src/AddressSmall.tsx
+++ b/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;
     }
   }
diff --git a/packages/react-components/src/Expander.tsx b/packages/react-components/src/Expander.tsx
index a9b20d073f..39b7c353cc 100644
--- a/packages/react-components/src/Expander.tsx
+++ b/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 {