From 0146e154f33cdbd676ba2ebdfa2d79105a927d00 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 2 May 2024 10:16:20 +0300
Subject: [PATCH] feat(panel-wrapper): flag to fit content height

---
 .../ManageValidator/RightManagePanels/DepositPanel.tsx    | 1 +
 src/pages/ManageValidator/RightManagePanels/ExitPanel.tsx | 2 +-
 .../ManageValidator/RightManagePanels/PanelContent.tsx    | 6 +++++-
 .../ManageValidator/RightManagePanels/PanelWrapper.tsx    | 8 +++++++-
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/pages/ManageValidator/RightManagePanels/DepositPanel.tsx b/src/pages/ManageValidator/RightManagePanels/DepositPanel.tsx
index 81c2f109..38fbbdd3 100644
--- a/src/pages/ManageValidator/RightManagePanels/DepositPanel.tsx
+++ b/src/pages/ManageValidator/RightManagePanels/DepositPanel.tsx
@@ -19,6 +19,7 @@ const DepositPanel = () => {
   return (
     <PanelWrapper
       title={getDepositTitle({ isChainParity, isTransactionConfirmation })}
+      fitContentHeight={true}
     >
       {isChainParity ? (
         <ChainParity />
diff --git a/src/pages/ManageValidator/RightManagePanels/ExitPanel.tsx b/src/pages/ManageValidator/RightManagePanels/ExitPanel.tsx
index 8835568b..2f16b0f8 100644
--- a/src/pages/ManageValidator/RightManagePanels/ExitPanel.tsx
+++ b/src/pages/ManageValidator/RightManagePanels/ExitPanel.tsx
@@ -9,7 +9,7 @@ const ExitPanel = () => {
   const exitValidatorHandler = () => {}
 
   return (
-    <PanelWrapper title={'Exit Validator'}>
+    <PanelWrapper title={'Exit Validator'} fitContentHeight={true}>
       <YStack alignItems={'flex-start'} marginTop={'6px'}>
         <Text size={15} weight="semibold">
           Validator Exit Queue
diff --git a/src/pages/ManageValidator/RightManagePanels/PanelContent.tsx b/src/pages/ManageValidator/RightManagePanels/PanelContent.tsx
index ca2a2fdf..6e34e1f0 100644
--- a/src/pages/ManageValidator/RightManagePanels/PanelContent.tsx
+++ b/src/pages/ManageValidator/RightManagePanels/PanelContent.tsx
@@ -20,7 +20,11 @@ const PanelContent = ({
   return (
     <YStack
       space={'$3'}
-      style={{ padding: isModalWidth ? 0 : '20px 30px', alignItems: 'start' }}
+      style={{
+        padding: isModalWidth ? 0 : '20px 30px',
+        alignItems: 'start',
+        overflowY: 'scroll',
+      }}
     >
       {isModalWidth && (
         <XStack
diff --git a/src/pages/ManageValidator/RightManagePanels/PanelWrapper.tsx b/src/pages/ManageValidator/RightManagePanels/PanelWrapper.tsx
index 37eb1268..44ac7f27 100644
--- a/src/pages/ManageValidator/RightManagePanels/PanelWrapper.tsx
+++ b/src/pages/ManageValidator/RightManagePanels/PanelWrapper.tsx
@@ -9,9 +9,14 @@ import PanelContent from './PanelContent'
 type PanelWrapperProps = {
   children: React.ReactNode
   title: string
+  fitContentHeight?: boolean
 }
 
-const PanelWrapper = ({ children, title }: PanelWrapperProps) => {
+const PanelWrapper = ({
+  children,
+  title,
+  fitContentHeight,
+}: PanelWrapperProps) => {
   const [isModalOpen, setIsModalOpen] = useState(true)
   const navigate = useNavigate()
   const { validatorName } = useParams()
@@ -36,6 +41,7 @@ const PanelWrapper = ({ children, title }: PanelWrapperProps) => {
               margin: 'auto',
               scrollbarWidth: 'thin',
               scrollbarColor: 'transparent transparent',
+              height: fitContentHeight ? 'fit-content' : 'auto',
             },
             overlay: {
               zIndex: 2,