diff --git a/packages/page-council/src/Motions/Voters.tsx b/packages/page-council/src/Motions/Voters.tsx
index 7e1ada1a76..45d62d39e7 100644
--- a/packages/page-council/src/Motions/Voters.tsx
+++ b/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 => (
+
+ )),
+ [votes]
+ );
+
if (!count || !votes.length) {
return null;
}
return (
- ('Aye {{count}}', { replace: { count } })
: t('Nay {{count}}', { replace: { count } })
}
- >
- {votes.map((address): React.ReactNode => (
-
- ))}
-
+ />
);
}
diff --git a/packages/react-components/src/ExpanderScroll.tsx b/packages/react-components/src/ExpanderScroll.tsx
index 268df61457..95e8d95519 100644
--- a/packages/react-components/src/ExpanderScroll.tsx
+++ b/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
>
-
- | {renderChildren ? renderChildren() : children} |
-
+ {
+ renderChildren
+ ? renderChildren().map((row, key) => (
+
+ | {row} |
+
+ ))
+ : | {children} |
+ }
),
diff --git a/packages/react-components/src/Table/index.tsx b/packages/react-components/src/Table/index.tsx
index a414bcf601..c193dea16d 100644
--- a/packages/react-components/src/Table/index.tsx
+++ b/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%;