diff --git a/packages/page-staking/src/Actions/Account/ListNominees.tsx b/packages/page-staking/src/Actions/Account/ListNominees.tsx
index e4ae54e050..d2aefb7bd9 100644
--- a/packages/page-staking/src/Actions/Account/ListNominees.tsx
+++ b/packages/page-staking/src/Actions/Account/ListNominees.tsx
@@ -6,7 +6,7 @@ import type { BN } from '@polkadot/util';
 
 import React, { useMemo } from 'react';
 
-import { AddressMini, Expander, MarkWarning } from '@polkadot/react-components';
+import { AddressMini, ExpanderScroll, MarkWarning } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { isFunction } from '@polkadot/util';
 
@@ -79,7 +79,7 @@ function ListNominees ({ nominating, stashId }: Props): React.ReactElement<Props
   return (
     <>
       {renOver && (
-        <Expander
+        <ExpanderScroll
           className='stakeOver'
           help={t<string>('These validators are active but only the top {{max}} nominators by backing stake will be receiving rewards. The nominating stash is not one of those to be rewarded in the current era.', { replace: api.consts.staking?.maxNominatorRewardedPerValidator?.toString() })}
           renderChildren={renOver[1]}
@@ -87,28 +87,28 @@ function ListNominees ({ nominating, stashId }: Props): React.ReactElement<Props
         />
       )}
       {renActive && (
-        <Expander
+        <ExpanderScroll
           help={t<string>('The validators selected by the Phragmen algorithm to nominate for this era.')}
           renderChildren={renActive[1]}
           summary={t<string>('Active nominations ({{count}})', { replace: { count: renActive[0] } })}
         />
       )}
       {renInactive && (
-        <Expander
+        <ExpanderScroll
           help={t<string>('The elected validator list that did not get selected by the Phragmen algorithm for this era. However they may be selected in the future.')}
           renderChildren={renInactive[1]}
           summary={t<string>('Inactive nominations ({{count}})', { replace: { count: renInactive[0] } })}
         />
       )}
       {renChilled && (
-        <Expander
+        <ExpanderScroll
           help={t<string>('The validators that got slashed and for which your nomination got auto-chilled. Re-nominating these will make them available to the Phragmen algorithm.')}
           renderChildren={renChilled[1]}
           summary={t<string>('Renomination required ({{count}})', { replace: { count: renChilled[0] } })}
         />
       )}
       {renWaiting && (
-        <Expander
+        <ExpanderScroll
           help={t<string>('The validators that are not in the validator set because they need more nominations or because they have willingly stopped validating. Any nominations made before the next election will also appear here.')}
           renderChildren={renWaiting[1]}
           summary={t<string>('Waiting nominations ({{count}})', { replace: { count: renWaiting[0] } })}
diff --git a/packages/page-staking/src/Actions/Account/index.tsx b/packages/page-staking/src/Actions/Account/index.tsx
index ca7ca8edea..25e79937b5 100644
--- a/packages/page-staking/src/Actions/Account/index.tsx
+++ b/packages/page-staking/src/Actions/Account/index.tsx
@@ -236,7 +236,7 @@ function Account ({ allSlashes, className = '', info: { controllerId, destinatio
           </td>
         )
         : (
-          <td className='all expand left'>
+          <td className='all expand'>
             {isStashNominating && (
               <>
                 <ListNominees
diff --git a/packages/page-staking/src/Slashes/Row.tsx b/packages/page-staking/src/Slashes/Row.tsx
index 480a136a85..f20ebc08a8 100644
--- a/packages/page-staking/src/Slashes/Row.tsx
+++ b/packages/page-staking/src/Slashes/Row.tsx
@@ -5,7 +5,7 @@ import type { Slash } from './types';
 
 import React, { useCallback } from 'react';
 
-import { AddressMini, AddressSmall, Badge, Checkbox, Expander } from '@polkadot/react-components';
+import { AddressMini, AddressSmall, Badge, Checkbox, ExpanderScroll } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
@@ -26,6 +26,18 @@ function Row ({ index, isSelected, onSelect, slash: { isMine, slash: { others, o
     [index, onSelect]
   );
 
+  const renderOthers = useCallback(
+    () => others.map(([accountId, balance], index): React.ReactNode => (
+      <AddressMini
+        balance={balance}
+        key={index}
+        value={accountId}
+        withBalance
+      />
+    )),
+    [others]
+  );
+
   return (
     <tr>
       <td className='badge'>
@@ -41,16 +53,10 @@ function Row ({ index, isSelected, onSelect, slash: { isMine, slash: { others, o
       </td>
       <td className='expand all'>
         {!!others.length && (
-          <Expander summary={t<string>('Nominators ({{count}})', { replace: { count: formatNumber(others.length) } })}>
-            {others.map(([accountId, balance], index): React.ReactNode => (
-              <AddressMini
-                balance={balance}
-                key={index}
-                value={accountId}
-                withBalance
-              />
-            ))}
-          </Expander>
+          <ExpanderScroll
+            renderChildren={renderOthers}
+            summary={t<string>('Nominators ({{count}})', { replace: { count: formatNumber(others.length) } })}
+          />
         )}
       </td>
       <td className='address'>
diff --git a/packages/page-staking/src/Validators/Address/NominatedBy.tsx b/packages/page-staking/src/Validators/Address/NominatedBy.tsx
index 374d2941bb..04a15e97dc 100644
--- a/packages/page-staking/src/Validators/Address/NominatedBy.tsx
+++ b/packages/page-staking/src/Validators/Address/NominatedBy.tsx
@@ -6,7 +6,7 @@ import type { NominatedBy as NominatedByType } from '../../types';
 
 import React, { useMemo } from 'react';
 
-import { AddressMini, Expander } from '@polkadot/react-components';
+import { AddressMini, ExpanderScroll } from '@polkadot/react-components';
 import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../../translate';
@@ -63,13 +63,13 @@ function NominatedBy ({ nominators, slashingSpans }: Props): React.ReactElement<
   return (
     <td className='expand all'>
       {active && (
-        <Expander
+        <ExpanderScroll
           renderChildren={active[1]}
           summary={t<string>('Nominations ({{count}})', { replace: { count: formatNumber(active[0]) } })}
         />
       )}
       {chilled && (
-        <Expander
+        <ExpanderScroll
           renderChildren={chilled[1]}
           summary={t<string>('Renomination required ({{count}})', { replace: { count: formatNumber(chilled[0]) } })}
         />
diff --git a/packages/page-staking/src/Validators/Address/StakeOther.tsx b/packages/page-staking/src/Validators/Address/StakeOther.tsx
index 73be1dee00..e1056c54cc 100644
--- a/packages/page-staking/src/Validators/Address/StakeOther.tsx
+++ b/packages/page-staking/src/Validators/Address/StakeOther.tsx
@@ -5,7 +5,7 @@ import type { NominatorValue } from './types';
 
 import React, { useMemo } from 'react';
 
-import { AddressMini, Expander } from '@polkadot/react-components';
+import { AddressMini, ExpanderScroll } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 import { BN, BN_ZERO } from '@polkadot/util';
@@ -59,7 +59,7 @@ function StakeOther ({ nominators, stakeOther }: Props): React.ReactElement<Prop
     <td className='expand all'>
       {rewarded && (
         <>
-          <Expander
+          <ExpanderScroll
             renderChildren={rewarded[1]}
             summary={
               <FormatBalance
@@ -69,7 +69,7 @@ function StakeOther ({ nominators, stakeOther }: Props): React.ReactElement<Prop
             }
           />
           {unrewarded && (
-            <Expander
+            <ExpanderScroll
               className='stakeOver'
               renderChildren={unrewarded[1]}
               summary={
diff --git a/packages/react-components/src/ExpanderScroll.tsx b/packages/react-components/src/ExpanderScroll.tsx
index fc00db71e5..db04b28ac8 100644
--- a/packages/react-components/src/ExpanderScroll.tsx
+++ b/packages/react-components/src/ExpanderScroll.tsx
@@ -14,6 +14,14 @@ interface Props extends ExpanderProps {
   renderChildren?: () => React.ReactNode[];
 }
 
+function mapRow (row: React.ReactNode, key: number): React.ReactNode {
+  return (
+    <tr key={key}>
+      <td>{row}</td>
+    </tr>
+  );
+}
+
 function ExpanderScroll ({ children, className, empty, help, helpIcon, renderChildren, summary }: Props): React.ReactElement<Props> {
   const hasContent = useMemo(
     () => !!(renderChildren || children),
@@ -28,15 +36,10 @@ function ExpanderScroll ({ children, className, empty, help, helpIcon, renderChi
           isInline
         >
           {renderChildren
-            ? renderChildren().map((row, key) => (
-              <tr
-                className='expand'
-                key={key}
-              >
-                <td>{row}</td>
-              </tr>
-            ))
-            : <tr className='expand'><td>{children}</td></tr>
+            ? renderChildren().map(mapRow)
+            : Array.isArray(children)
+              ? children.map(mapRow)
+              : <tr><td>{children}</td></tr>
           }
         </Table>
       </div>
@@ -60,8 +63,8 @@ export default React.memo(styled(ExpanderScroll)`
     overflow-y: scroll;
     display: block;
     margin: 0 0 0 auto;
-    max-height: 14rem;
-    max-width: 30rem;
+    max-height: 13.75rem;
+    max-width: 25rem;
     overflow-x: hidden;
   }
 `);