From 521b129bf4db3eec8c13e4d150efdef67ac577d5 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Mon, 21 Apr 2025 16:47:10 +0000
Subject: [PATCH 1/4] chore: increase slider height

---
 site/src/components/Slider/Slider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/Slider/Slider.tsx b/site/src/components/Slider/Slider.tsx
index 4fdd21353e963..74a9aea827021 100644
--- 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

From 69a9e030a74a343f8f222e78210178003bbcca78 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Mon, 21 Apr 2025 16:47:47 +0000
Subject: [PATCH 2/4] fix: adjust form width and slider value display

---
 .../DynamicParameter/DynamicParameter.tsx     | 53 +++++++++++--------
 .../CreateWorkspacePageViewExperimental.tsx   |  2 +-
 2 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
index 68538488a2d05..25f3859b91029 100644
--- 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,18 +293,23 @@ 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":
@@ -315,6 +317,11 @@ const ParameterField: FC<ParameterFieldProps> = ({
 				<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
index 342eea1a1b396..ab69cebc93f4d 100644
--- 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

From f966e8365f2102612a9a262493bbb73ce27b0886 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Mon, 21 Apr 2025 17:01:49 +0000
Subject: [PATCH 3/4] chore: add gap between title and description for badges

---
 .../modules/workspaces/DynamicParameter/DynamicParameter.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
index 25f3859b91029..c12a365954622 100644
--- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
+++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -95,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}
 

From 8c8ec60214be0a19264b1477a2a94dc57207dfcb Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Mon, 21 Apr 2025 21:22:33 +0000
Subject: [PATCH 4/4] fix: add max height and width

---
 .../modules/workspaces/DynamicParameter/DynamicParameter.tsx   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
index c12a365954622..92ec2edbaec12 100644
--- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
+++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -315,11 +315,12 @@ const ParameterField: FC<ParameterFieldProps> = ({
 		case "textarea":
 			return (
 				<Textarea
+					className="max-w-2xl"
 					defaultValue={defaultValue}
 					onChange={(e) => onChange(e.target.value)}
 					onInput={(e) => {
 						const target = e.currentTarget;
-						target.style.height = "auto";
+						target.style.maxHeight = "700px";
 						target.style.height = `${target.scrollHeight}px`;
 					}}
 					disabled={disabled}