fix: update dynamic params styles (#17489)

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

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

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

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