From 3c202c4781ae3bdb3be21834b5637458a13bbda0 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 26 Sep 2023 21:35:46 -0300
Subject: [PATCH] chore(codeTabsComponent): add custom-scroll class to improve
 styling of code tabs component chore(keypairListComponent): add h-full class
 to make keypair list component fill its parent container
 chore(EditNodeModal): add custom-scroll class and max-h-48 class to make the
 modal scrollable when necessary

---
 src/frontend/src/components/codeTabsComponent/index.tsx    | 2 +-
 src/frontend/src/components/keypairListComponent/index.tsx | 2 +-
 src/frontend/src/modals/EditNodeModal/index.tsx            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index b304518c2..10a8c8c79 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -753,7 +753,7 @@ export default function CodeTabsComponent({
                                                   )
                                                 )}
                                               >
-                                                <div className="mx-auto">
+                                                <div className="mx-auto max-h-48 overflow-auto custom-scroll">
                                                   <KeypairListComponent
                                                     disabled={false}
                                                     editNode={true}
diff --git a/src/frontend/src/components/keypairListComponent/index.tsx b/src/frontend/src/components/keypairListComponent/index.tsx
index e9c016ece..42043d1c6 100644
--- a/src/frontend/src/components/keypairListComponent/index.tsx
+++ b/src/frontend/src/components/keypairListComponent/index.tsx
@@ -42,7 +42,7 @@ export default function KeypairListComponent({
     <div
       className={classNames(
         value?.length > 1 && editNode ? "my-1" : "",
-        "flex flex-col gap-3"
+        "flex flex-col gap-3 h-full"
       )}
     >
       {value?.map((obj, index) => {
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index be21feda9..02753cc44 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -256,7 +256,7 @@ const EditNodeModal = forwardRef(
                                 </div>
                               ) : myData.current.node?.template[templateParam]
                                   .type === "dict" ? (
-                                <div className="mt-2 w-full">
+                                <div className="mt-2 w-full max-h-48 overflow-auto custom-scroll">
                                   <KeypairListComponent
                                     disabled={disabled}
                                     editNode={true}