Display council voters via ExpanderScroll (#7386)

packages/page-council/src/Overview/Voters.tsx

@@ -3,9 +3,9 @@
 
 import type { AccountId, Balance } from '@polkadot/types/interfaces';
 
-import React from 'react';
+import React, { useCallback } from 'react';
 
-import { AddressMini, Expander } from '@polkadot/react-components';
+import { AddressMini, ExpanderScroll } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
@@ -15,6 +15,17 @@ interface Props {
 }
 
 function Voters ({ balance, voters }: Props): React.ReactElement<Props> {
+  const renderVoters = useCallback(
+    () => voters && voters.map((who): React.ReactNode =>
+      <AddressMini
+        key={who.toString()}
+        value={who}
+        withLockedVote
+      />
+    ),
+    [voters]
+  );
+
   if (!balance || !voters || !voters.length) {
     return <><td className='all number' /><td className='number' /></>;
   }
@@ -22,15 +33,10 @@ function Voters ({ balance, voters }: Props): React.ReactElement<Props> {
   return (
     <>
       <td className='all expand'>
-        <Expander summary={<FormatBalance value={balance} />}>
-          {voters.map((who): React.ReactNode =>
-            <AddressMini
-              key={who.toString()}
-              value={who}
-              withLockedVote
-            />
-          )}
-        </Expander>
+        <ExpanderScroll
+          renderChildren={renderVoters}
+          summary={<FormatBalance value={balance} />}
+        />
       </td>
       <td className='number'>
         {formatNumber(voters.length)}

packages/react-components/src/ExpanderScroll.tsx

@@ -62,8 +62,10 @@ export default React.memo(styled(ExpanderScroll)`
   .tableContainer {
     overflow-y: scroll;
     display: block;
+    margin: 0 0 0 auto;
     min-height: 50px;
     max-height: 200px;
+    max-width: 30rem;
     overflow-x: hidden;
   }
 `);

packages/react-components/src/Table/index.tsx

@@ -93,6 +93,7 @@ export default React.memo(styled(Table)`
 
         td {
           border-top-width: 1px;
+          padding: 0.25rem 0.75rem;
         }
       }
     }