diff --git a/packages/app-democracy/src/Overview/Proposal.tsx b/packages/app-democracy/src/Overview/Proposal.tsx index 68ce300eab..142969270c 100644 --- a/packages/app-democracy/src/Overview/Proposal.tsx +++ b/packages/app-democracy/src/Overview/Proposal.tsx @@ -40,6 +40,7 @@ function Proposal ({ className, t, value: { balance, index, proposal, proposer, label={count ? undefined : t('seconds')} value={address} withBalance={false} + withShrink /> ))} diff --git a/packages/react-components/src/AddressMini.tsx b/packages/react-components/src/AddressMini.tsx index d0c2b31f72..f3b2763d24 100644 --- a/packages/react-components/src/AddressMini.tsx +++ b/packages/react-components/src/AddressMini.tsx @@ -32,16 +32,17 @@ interface Props extends BareProps { withBonded?: boolean; withLockedVote?: boolean; withName?: boolean; + withShrink?: boolean; } -function AddressMini ({ balance, bonded, children, className, iconInfo, isPadded = true, label, style, value, withAddress = true, withBalance = false, withBonded = false, withLockedVote = false, withName = true }: Props): React.ReactElement | null { +function AddressMini ({ balance, bonded, children, className, iconInfo, isPadded = true, label, style, value, withAddress = true, withBalance = false, withBonded = false, withLockedVote = false, withName = true, withShrink = false }: Props): React.ReactElement | null { if (!value) { return null; } return (
{label && ( @@ -110,9 +111,21 @@ export default styled(AddressMini)` .ui--AddressMini-address { font-family: monospace; max-width: 9rem; + min-width: 9rem; overflow: hidden; text-align: left; text-overflow: ellipsis; + + > div { + overflow: hidden; + text-overflow: ellipsis; + } + } + + &.withShrink { + .ui--AddressMini-address { + min-width: 3rem; + } } .ui--AddressMini-label {