Add ExpanderScroll to council (#7385)

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

@@ -3,9 +3,9 @@
 
 import type { AccountId, MemberCount } from '@polkadot/types/interfaces';
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
-import { AddressMini, Expander } from '@polkadot/react-components';
+import { AddressMini, ExpanderScroll } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';
 
@@ -33,26 +33,30 @@ function Voters ({ isAye, members, threshold, votes }: Props): React.ReactElemen
     [isAye, members, threshold, votes]
   );
 
+  const renderVotes = useCallback(
+    () => votes && votes.map((address): React.ReactNode => (
+      <AddressMini
+        key={address.toString()}
+        value={address}
+        withBalance={false}
+      />
+    )),
+    [votes]
+  );
+
   if (!count || !votes.length) {
     return null;
   }
 
   return (
-    <Expander
+    <ExpanderScroll
+      renderChildren={renderVotes}
       summary={
         isAye
           ? t<string>('Aye {{count}}', { replace: { count } })
           : t<string>('Nay {{count}}', { replace: { count } })
       }
-    >
-      {votes.map((address): React.ReactNode => (
-        <AddressMini
-          key={address.toString()}
-          value={address}
-          withBalance={false}
-        />
-      ))}
-    </Expander>
+    />
   );
 }
 

packages/react-components/src/ExpanderScroll.tsx

@@ -11,6 +11,7 @@ import Table from './Table';
 
 interface Props extends ExpanderProps {
   empty?: string;
+  renderChildren?: () => React.ReactNode[];
 }
 
 // TODO Not 100% convinced we need a table here since we only have a single row,
@@ -28,9 +29,18 @@ function ExpanderScroll ({ children, className, empty, help, helpIcon, renderChi
           empty={empty}
           isInline
         >
-          <tr className='expand'>
-            <td>{renderChildren ? renderChildren() : children}</td>
-          </tr>
+          {
+            renderChildren
+              ? renderChildren().map((row, key) => (
+                <tr
+                  className='expand'
+                  key={key}
+                >
+                  <td>{row}</td>
+                </tr>
+              ))
+              : <tr className='expand'><td>{children}</td></tr>
+          }
         </Table>
       </div>
     ),

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

@@ -82,6 +82,21 @@ export default React.memo(styled(Table)`
       margin-bottom: 1.5rem;
     }
 
+    &.isInline {
+      &.highlight--bg-faint,
+      &.highlight--bg-faint::before {
+        background: transparent;
+      }
+
+      tbody tr {
+        background: transparent;
+
+        td {
+          border-top-width: 1px;
+        }
+      }
+    }
+
     tr {
       max-width: 100%;
       width: 100%;