fix: update dynamic params styles (#17489)

jaaydenh · web-flow · commit 56ee5d8f1b73 · 2025-04-21T17:50:57.000-04:00
1. increase form width and adjust form field width #17471 2. Move slider value display as its currently broken for long parameter titles and descriptions 3. increase the height of the slider 4. automatically increase the height of the textarea as the user types #17472
diff --git a/site/src/components/Slider/Slider.tsx b/site/src/components/Slider/Slider.tsx
@@ -20,7 +20,7 @@ export const Slider = React.forwardRef<
 		)}
 		{...props}
 	>
-		<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-surface-secondary data-[disabled]:opacity-40">
+		<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-surface-secondary data-[disabled]:opacity-40">
 			<SliderPrimitive.Range className="absolute h-full bg-content-primary" />
 		</SliderPrimitive.Track>
 		<SliderPrimitive.Thumb
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -57,12 +57,14 @@ export const DynamicParameter: FC<DynamicParameterProps> = ({
 			data-testid={`parameter-field-${parameter.name}`}
 		>
 			<ParameterLabel parameter={parameter} isPreset={isPreset} />
-			<ParameterField
-				parameter={parameter}
-				onChange={onChange}
-				disabled={disabled}
-				id={id}
-			/>
+			<div className="max-w-lg">
+				<ParameterField
+					parameter={parameter}
+					onChange={onChange}
+					disabled={disabled}
+					id={id}
+				/>
+			</div>
 			{parameter.diagnostics.length > 0 && (
 				<ParameterDiagnostics diagnostics={parameter.diagnostics} />
 			)}
@@ -93,7 +95,7 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
 				</span>
 			)}
 
-			<div className="flex flex-col w-full">
+			<div className="flex flex-col w-full gap-1">
 				<Label className="flex gap-2 flex-wrap text-sm font-medium">
 					{displayName}
 
@@ -132,11 +134,6 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
 							</Tooltip>
 						</TooltipProvider>
 					)}
-					{parameter.form_type === "slider" && (
-						<output className="ml-auto font-semibold">
-							{parameter.value.value}
-						</output>
-					)}
 				</Label>
 
 				{hasDescription && (
@@ -296,25 +293,36 @@ const ParameterField: FC<ParameterFieldProps> = ({
 
 		case "slider":
 			return (
-				<Slider
-					className="mt-2"
-					defaultValue={[
-						Number(
-							parameter.default_value.valid ? parameter.default_value.value : 0,
-						),
-					]}
-					onValueChange={([value]) => onChange(value.toString())}
-					min={parameter.validations[0]?.validation_min ?? 0}
-					max={parameter.validations[0]?.validation_max ?? 100}
-					disabled={disabled}
-				/>
+				<div className="flex flex-row items-baseline gap-3">
+					<Slider
+						className="mt-2"
+						defaultValue={[
+							Number(
+								parameter.default_value.valid
+									? parameter.default_value.value
+									: 0,
+							),
+						]}
+						onValueChange={([value]) => onChange(value.toString())}
+						min={parameter.validations[0]?.validation_min ?? 0}
+						max={parameter.validations[0]?.validation_max ?? 100}
+						disabled={disabled}
+					/>
+					<span className="w-4 font-medium">{parameter.value.value}</span>
+				</div>
 			);
 
 		case "textarea":
 			return (
 				<Textarea
+					className="max-w-2xl"
 					defaultValue={defaultValue}
 					onChange={(e) => onChange(e.target.value)}
+					onInput={(e) => {
+						const target = e.currentTarget;
+						target.style.maxHeight = "700px";
+						target.style.height = `${target.scrollHeight}px`;
+					}}
 					disabled={disabled}
 					placeholder={
 						(parameter.styling as { placeholder?: string })?.placeholder
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -259,7 +259,7 @@ export const CreateWorkspacePageViewExperimental: FC<
 					Go back
 				</button>
 			</div>
-			<div className="flex flex-col gap-6 max-w-screen-sm mx-auto">
+			<div className="flex flex-col gap-6 max-w-screen-md mx-auto">
 				<header className="flex flex-col items-start gap-2 mt-10">
 					<div className="flex items-center gap-2">
 						<Avatar

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ export const Slider = React.forwardRef<`
`20`	`20`	`)}`
`21`	`21`	`{...props}`
`22`	`22`	`>`
`23`		`- <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-surface-secondary data-[disabled]:opacity-40">`
	`23`	`+ <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-surface-secondary data-[disabled]:opacity-40">`
`24`	`24`	`<SliderPrimitive.Range className="absolute h-full bg-content-primary" />`
`25`	`25`	`</SliderPrimitive.Track>`
`26`	`26`	`<SliderPrimitive.Thumb`