diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx index f1a91a9898f80..c9fff001b0814 100644 --- a/site/src/components/Form/Form.tsx +++ b/site/src/components/Form/Form.tsx @@ -3,9 +3,9 @@ import { createContext, type FC, type HTMLProps, - type PropsWithChildren, useContext, ReactNode, + ComponentProps, } from "react"; import { AlphaBadge, DeprecatedBadge } from "components/Badges/Badges"; import { Stack } from "components/Stack/Stack"; @@ -135,11 +135,14 @@ export const FormSection: FC = ({ ); }; -export const FormFields: FC = ({ children }) => { +export const FormFields: FC> = (props) => { return ( - - {children} - + ); }; diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index 1d2cdcf660a4f..2bc393121c282 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -256,11 +256,14 @@ export const CreateWorkspacePageView: FC = ({ title="Parameters" description="These are the settings used by your template. Please note that immutable parameters cannot be modified once the workspace is created." > - {/* - Opted not to use FormFields in order to increase spacing. - This decision was made because rich parameter inputs are more visually dense than standard text fields. - */} -
+ {/* The parameter fields are densely packed and carry significant information, + /* hence they require additional vertical spacing for better + /*readability and user experience. */} + {parameters.map((parameter, index) => { const parameterField = `rich_parameter_values.${index}`; const parameterInputName = `${parameterField}.value`; @@ -285,7 +288,7 @@ export const CreateWorkspacePageView: FC = ({ /> ); })} -
+ )}