Holders: set max width on smaller screens (#1016)

aragon · Oct 3, 2019 · c685c43 · c685c43
1 parent e90e917
commit c685c43
Showing 1 changed file with 4 additions and 0 deletions.
diff --git a/apps/token-manager/app/src/screens/Holders.js b/apps/token-manager/app/src/screens/Holders.js
@@ -11,6 +11,7 @@ import {
   IconRemove,
   Split,
   GU,
+  useLayout,
   useTheme,
 } from '@aragon/ui'
 import { formatBalance } from '../utils'
@@ -33,6 +34,8 @@ function Holders({
   tokenSymbol,
   tokenTransfersEnabled,
 }) {
+  const { layoutName } = useLayout()
+  const compact = layoutName === 'small'
   const connectedAccount = useConnectedAccount()
   const mappedEntries = useMemo(
     () => holders.map(({ address, balance }) => [address, balance]),
@@ -54,6 +57,7 @@ function Holders({
                 css={`
                   display: flex;
                   align-items: center;
+                  max-width: ${compact ? '50vw' : 'unset'};
                 `}
               >
                 <LocalIdentityBadge