Fix active parameter size display

tj-uav · Sep 9, 2023 · 99ba029 · 99ba029
1 parent eb55b2e
commit 99ba029
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/client/src/pages/Params/Param/Active.js b/client/src/pages/Params/Param/Active.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useEffect, useState } from "react"
 
 import { Row, Column } from "components/Containers"
 import { Label } from "components/UIElements"
@@ -9,27 +9,32 @@ import Submit from "./Submit"
 
 import { useParameters } from "../../Params"
 
-const Active = ({ listRef, style, height, data, index, setActiveIndex, setModifiedIndexes, parametersSave }) => {
+const Active = ({ listRef, style, data, index, setActiveIndex, setModifiedIndexes, setActiveSize, parametersSave }) => {
 	const [value, setValue] = useState(data.value)
 	const deactivate = () => setActiveIndex(-1)
 	const [params, setParameters] = useParameters()
+	const root = React.useRef()
+
+	useEffect(() => {
+		setActiveSize(root.current.getBoundingClientRect().height)
+	}, [])
 
 	return (
 		<form onSubmit={e => handleSubmit(e, deactivate)}>
-			<Row style={{ ...style, height: height }} columns="min-content auto 6rem">
-				<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+			<Row style={{ ...style, height: undefined }} columns="min-content auto 6rem">
+				<div style={{ display: "flex", flexDirection: "column", gap: "1rem", height: "95%" }}>
 					<Row height="2rem" columns="11.5rem 5rem">
 						<Content padded children={data.name} />
 						<Value editable hook={[value, setValue]} />
 					</Row>
-					<Row style={{ marginBottom: "-1rem" }}>
+					<Row style={{ marginBottom: "-1.15rem" }}>
 						<Label>Options</Label>
 					</Row>
 					<Row>
 						<Content padded children={data.options ?? "no options defined."} />
 					</Row>
 				</div>
-				<Column style={{ display: "flex", height: "96%" }}>
+				<Column ref={root} style={{ display: "flex", paddingBottom: "2px" }}>
 					<Content>
 						<b>{data.DisplayName}</b>{data.DisplayName ? ". " : ""}{data.Description}
 					</Content>
@@ -39,7 +44,7 @@ const Active = ({ listRef, style, height, data, index, setActiveIndex, setModifi
 						display: "flex",
 						flexDirection: "column",
 						rowGap: "1rem",
-						height: "96%",
+						paddingBottom: "2px"
 					}}
 				>
 					<Submit

diff --git a/client/src/pages/Params/index.js b/client/src/pages/Params/index.js
@@ -134,6 +134,8 @@ const Params = () => {
 		get()
 	}, [])
 
+	const [activeSize, setActiveSize] = useState(35)
+
 	return (
 		<ParametersContext.Provider value={[parameters, setParameters]}>
 			<div
@@ -263,22 +265,23 @@ const Params = () => {
 								width={width}
 								itemCount={parametersDisplay.length}
 								ref={listRef}
-								itemSize={(index) => {
-									return activeParamIndex === parametersDisplay[index] ? 130 : 35
+								itemSize={(i) => {
+									return i == activeParamIndex ? activeSize : 35
 								}}
 							>
 								{({ index, style }) => {
 									return (
 										<Param
 											style={style}
-											height={activeParamIndex === parametersDisplay[index] ? 130 : 35}
+											height={activeParamIndex === parametersDisplay[index] ? activeSize : 35}
 											key={parametersDisplay[index]}
 											index={parametersDisplay[index]}
 											data={parameters[parametersDisplay[index]]}
 											active={parametersDisplay[index] === activeParamIndex}
 											setActiveIndex={setActiveIndex}
 											setModifiedIndexes={setModifiedIndexes}
 											parametersSave={parametersSave}
+											setActiveSize={setActiveSize}
 											listRef={listRef}
 										/>
 									)