From 15ea1b247f538119d214a24ba705d8d3923f642e Mon Sep 17 00:00:00 2001
From: Trung-Tin Pham <60747384+AtelyPham@users.noreply.github.com>
Date: Sat, 27 Jul 2024 18:54:44 +0700
Subject: [PATCH] fix(tangle-dapp): Fix payout modal overflowing (#2461)

---
 .../PayoutAllTxContainer.tsx                  | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/apps/tangle-dapp/containers/PayoutAllTxContainer/PayoutAllTxContainer.tsx b/apps/tangle-dapp/containers/PayoutAllTxContainer/PayoutAllTxContainer.tsx
index 9fba6a4c5d..cfa8e2a60a 100644
--- a/apps/tangle-dapp/containers/PayoutAllTxContainer/PayoutAllTxContainer.tsx
+++ b/apps/tangle-dapp/containers/PayoutAllTxContainer/PayoutAllTxContainer.tsx
@@ -10,6 +10,7 @@ import {
   ModalHeader,
   Typography,
 } from '@webb-tools/webb-ui-components';
+import { ScrollArea } from '@webb-tools/webb-ui-components/components/ScrollArea';
 import { WEBB_TANGLE_DOCS_STAKING_URL } from '@webb-tools/webb-ui-components/constants';
 import { type FC, useCallback, useMemo } from 'react';
 
@@ -98,20 +99,22 @@ const PayoutAllTxContainer: FC<PayoutAllTxContainerProps> = ({
               />
             </InputField.Root>
 
-            <div className="flex flex-col gap-2">
-              {allValidators.map((validator) => (
-                <InputField.Root key={validator}>
-                  <InputField.Input
-                    title="Validator"
-                    isAddressType={true}
-                    addressTheme="substrate"
-                    value={validator}
-                    type="text"
-                    readOnly
-                  />
-                </InputField.Root>
-              ))}
-            </div>
+            <ScrollArea className="flex-1 max-h-64">
+              <div className="space-y-2">
+                {allValidators.map((validator) => (
+                  <InputField.Root key={validator}>
+                    <InputField.Input
+                      title="Validator"
+                      isAddressType={true}
+                      addressTheme="substrate"
+                      value={validator}
+                      type="text"
+                      readOnly
+                    />
+                  </InputField.Root>
+                ))}
+              </div>
+            </ScrollArea>
 
             {/* Eras */}
             {eraRange.length > 0 && (