From 7fcade014aea6347ab9bb544791bf83ba0ac6d8f Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Mon, 18 Apr 2022 12:59:14 +0200
Subject: [PATCH] Display council voters via ExpanderScroll (#7386)

---
 packages/page-council/src/Overview/Voters.tsx | 28 +++++++++++--------
 .../react-components/src/ExpanderScroll.tsx   |  2 ++
 packages/react-components/src/Table/index.tsx |  1 +
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/page-council/src/Overview/Voters.tsx b/packages/page-council/src/Overview/Voters.tsx
index 63b0334a83..e354d2de66 100644
--- a/packages/page-council/src/Overview/Voters.tsx
+++ b/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)}
diff --git a/packages/react-components/src/ExpanderScroll.tsx b/packages/react-components/src/ExpanderScroll.tsx
index 95e8d95519..2dc5b7c395 100644
--- a/packages/react-components/src/ExpanderScroll.tsx
+++ b/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;
   }
 `);
diff --git a/packages/react-components/src/Table/index.tsx b/packages/react-components/src/Table/index.tsx
index c193dea16d..58f4d341c5 100644
--- a/packages/react-components/src/Table/index.tsx
+++ b/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;
         }
       }
     }