🔧 fix(codeTabsComponent): remove unnecessary max-h-48 class from codeTabsComponent to fix overflow issue

🔧 fix(keypairListComponent): add mx-2 class to keypairListComponent when there are multiple key-value pairs to improve spacing
🔧 fix(keypairListComponent): remove ref parameter from onChange function in keypairListComponent to fix unnecessary re-rendering
🔧 fix(keypairListComponent): add mx-2 class to keypairListComponent when there are multiple key-value pairs to improve spacing
🔧 fix(editNodeModal): add my-3 class to keypairListComponent when there are multiple key-value pairs to improve spacing
🔧 fix(types): add advanced property to KeyPairListComponentType to support advanced mode in keypairListComponent

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -682,7 +682,7 @@ export default function CodeTabsComponent({
                                             ) : node.data.node.template[
                                                 templateField
                                               ].type === "dict" ? (
-                                              <div className="mx-auto max-h-48 overflow-auto custom-scroll">
+                                              <div className="mx-auto overflow-auto custom-scroll">
                                                 <KeypairListComponent
                                                   disabled={false}
                                                   editNode={true}

src/frontend/src/components/keypairListComponent/index.tsx

@@ -12,6 +12,7 @@ export default function KeypairListComponent({
   disabled,
   editNode = false,
   duplicateKey,
+  advanced = false,
 }: KeyPairListComponentType): JSX.Element {
   useEffect(() => {
     if (disabled) {
@@ -24,7 +25,7 @@ export default function KeypairListComponent({
   useEffect(() => {
     if (JSON.stringify(value) !== JSON.stringify(ref.current)) {
       ref.current = value;
-      onChange(value, ref);
+      onChange(value);
     }
   }, [value]);
 
@@ -46,14 +47,14 @@ export default function KeypairListComponent({
   return (
     <div
       className={classNames(
-        ref.current?.length > 1 && editNode ? "my-1" : "",
+        ref.current?.length > 1 && editNode ? "mx-2 my-1" : "",
         "flex h-full flex-col gap-3"
       )}
     >
       {ref.current?.map((obj, index) => {
         return Object.keys(obj).map((key, idx) => {
           return (
-            <div key={idx} className="flex w-full gap-3">
+            <div key={idx} className="flex w-full gap-2">
               <Input
                 type="text"
                 value={key.trim()}

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -256,8 +256,21 @@ const EditNodeModal = forwardRef(
                                 </div>
                               ) : myData.current.node?.template[templateParam]
                                   .type === "dict" ? (
-                                <div className="mt-2 max-h-48 w-full overflow-auto custom-scroll">
+                                <div
+                                  className={classNames(
+                                    "max-h-48 w-full overflow-auto custom-scroll",
+                                    myData.current.node!.template[templateParam]
+                                      .value?.length > 1
+                                      ? "my-3"
+                                      : ""
+                                  )}
+                                >
                                   <KeypairListComponent
+                                    advanced={
+                                      myData.current.node?.template[
+                                        templateParam
+                                      ].advanced
+                                    }
                                     disabled={disabled}
                                     editNode={true}
                                     value={

src/frontend/src/types/components/index.ts

@@ -61,6 +61,7 @@ export type KeyPairListComponentType = {
   disabled: boolean;
   editNode?: boolean;
   duplicateKey?: boolean;
+  advanced?: boolean;
 };
 
 export type DictComponentType = {
@@ -134,18 +135,18 @@ export type TooltipComponentType = {
   children: ReactElement;
   title: string | ReactElement;
   placement?:
-    | "bottom-end"
+  | "bottom-end"
-    | "bottom-start"
+  | "bottom-start"
-    | "bottom"
+  | "bottom"
-    | "left-end"
+  | "left-end"
-    | "left-start"
+  | "left-start"
-    | "left"
+  | "left"
-    | "right-end"
+  | "right-end"
-    | "right-start"
+  | "right-start"
-    | "right"
+  | "right"
-    | "top-end"
+  | "top-end"
-    | "top-start"
+  | "top-start"
-    | "top";
+  | "top";
 };
 
 export type ProgressBarType = {