align inputs

src/frontend/src/modals/NodeModal/components/ModalField/index.tsx

@@ -10,18 +10,27 @@ import IntComponent from "../../../../components/intComponent";
 import InputFileComponent from "../../../../components/inputFileComponent";
 import PromptAreaComponent from "../../../../components/promptComponent";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
+import { classNames } from "../../../../utils";
 
 export default function ModalField({ data, title, required, id, name, type }) {
 	const { save } = useContext(TabsContext);
 	const [enabled, setEnabled] = useState(
 		data.node.template[name]?.value ?? false
 	);
+	const display =
+		type === "str" ||
+		type === "int" ||
+		type === "prompt" ||
+		type === "bool" ||
+		type === "float" ||
+		type === "file" ||
+		type === "code";
 
 	return (
-		<div className="flex my-3 flex-row w-full whitespace-nowrap items-center">
+		<div className={classNames("flex flex-row w-full items-center justify-between",display?"":"hidden")}>
-			<span className="mx-2">{title}</span>
+			{display && <span className="mx-2">{title}</span>}
 			{type === "str" && !data.node.template[name].options ? (
-				<div className="w-full">
+				<div className="w-1/2">
 					{data.node.template[name].list ? (
 						<InputListComponent
 							disabled={false}
@@ -71,7 +80,7 @@ export default function ModalField({ data, title, required, id, name, type }) {
 					/>
 				</div>
 			) : type === "float" ? (
-				<div className="w-full">
+				<div className="w-1/2">
 					<FloatComponent
 						disabled={false}
 						value={data.node.template[name].value ?? ""}
@@ -82,7 +91,7 @@ export default function ModalField({ data, title, required, id, name, type }) {
 					/>
 				</div>
 			) : type === "str" && data.node.template[name].options ? (
-				<div className="w-full">
+				<div className="w-1/2">
 					<Dropdown
 						options={data.node.template[name].options}
 						onSelect={(newValue) => (data.node.template[name].value = newValue)}
@@ -90,7 +99,7 @@ export default function ModalField({ data, title, required, id, name, type }) {
 					></Dropdown>
 				</div>
 			) : type === "int" ? (
-				<div className="w-full">
+				<div className="w-1/2">
 					<IntComponent
 						disabled={false}
 						value={data.node.template[name].value ?? ""}
@@ -101,7 +110,7 @@ export default function ModalField({ data, title, required, id, name, type }) {
 					/>
 				</div>
 			) : type === "file" ? (
-				<div className="w-full">
+				<div className="w-1/2">
 					<InputFileComponent
 						disabled={false}
 						value={data.node.template[name].value ?? ""}
@@ -117,7 +126,7 @@ export default function ModalField({ data, title, required, id, name, type }) {
 					></InputFileComponent>
 				</div>
 			) : type === "prompt" ? (
-				<div className="w-full">
+				<div className="w-1/2">
 					<PromptAreaComponent
 						disabled={false}
 						value={data.node.template[name].value ?? ""}
@@ -128,7 +137,7 @@ export default function ModalField({ data, title, required, id, name, type }) {
 					/>
 				</div>
 			) : type === "code" ? (
-				<div className="w-full">
+				<div className="w-1/2">
 					<CodeAreaComponent
 						disabled={false}
 						value={data.node.template[name].value ?? ""}
@@ -139,7 +148,7 @@ export default function ModalField({ data, title, required, id, name, type }) {
 					/>
 				</div>
 			) : (
-				<div>{type}</div>
+				<div className="hidden"></div>
 			)}
 		</div>
 	);

src/frontend/src/modals/NodeModal/index.tsx

@@ -85,14 +85,12 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
 									</div>
 									<div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
 										<div className="flex h-full w-full">
-											<div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-gray-800 shadow">
+											<div className="overflow-hidden px-4 sm:p-4  w-full rounded-lg bg-white dark:bg-gray-800 shadow">
-												<div>
+												<div className="flex flex-col h-full gap-5">
-													{/*  str, code, bool, float, int,prompt, file, */}
 													{Object.keys(data.node.template)
 														.filter((t) => t.charAt(0) !== "_")
-														.map((t: string, idx) => (
+														.map((t: string, idx) => {
-															<div key={idx}>
+															return (
-																{
 																<ModalField
 																	data={data}
 																	title={
@@ -115,9 +113,8 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
 																	name={t}
 																	type={data.node.template[t].type}
 																/>
-																}
+															);
-															</div>
+														})}
-														))}
 												</div>
 											</div>
 										</div>