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):
<>
{formatNumber(poolId)} |
- {info && info.metadata} |
+
+ {info && (
+ {info.metadata}
+ )}
+ |
{info && info.bonded.state.type} |
{info && } |
{info && !info.rewardClaimable.isZero() && } |
@@ -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 {