fix: adjust form width and slider value display

jaaydenh · jaaydenh · commit 69a9e030a74a · 2025-04-21T16:52:48.000Z
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} />
 			)}
@@ -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,35 @@ 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
 					defaultValue={defaultValue}
 					onChange={(e) => onChange(e.target.value)}
+					onInput={(e) => {
+						const target = e.currentTarget;
+						target.style.height = "auto";
+						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
