fix(site): fix parameters field size (#12231)

BrunoQuaresma · web-flow · commit 0021c2f9068a · 2024-02-20T13:54:07.000-03:00
diff --git 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<FormSectionProps> = ({
   );
 };
 
-export const FormFields: FC<PropsWithChildren> = ({ children }) => {
+export const FormFields: FC<ComponentProps<typeof Stack>> = (props) => {
   return (
-    <Stack direction="column" spacing={3} css={styles.formSectionFields}>
-      {children}
-    </Stack>
+    <Stack
+      direction="column"
+      spacing={3}
+      {...props}
+      css={styles.formSectionFields}
+    />
   );
 };
 
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -256,11 +256,14 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
               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.
-              */}
-              <div css={{ display: "flex", flexDirection: "column", gap: 36 }}>
+              {/* The parameter fields are densely packed and carry significant information,
+               /* hence they require additional vertical spacing for better
+               /*readability and user experience. */}
+              <FormFields
+                css={{
+                  gap: 36,
+                }}
+              >
                 {parameters.map((parameter, index) => {
                   const parameterField = `rich_parameter_values.${index}`;
                   const parameterInputName = `${parameterField}.value`;
@@ -285,7 +288,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
                     />
                   );
                 })}
-              </div>
+              </FormFields>
             </FormSection>
           )}
 
