From a0457ba141a5fed91a633aa3eed5bb58931bef19 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Thu, 22 May 2025 15:59:42 +0000
Subject: [PATCH 1/2] fix: prevent layout shift when Select component dropdown
 appears

---
 site/src/index.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/site/src/index.css b/site/src/index.css
index f3bf0918ddb3a..36f1c62954614 100644
--- a/site/src/index.css
+++ b/site/src/index.css
@@ -107,4 +107,9 @@
 		--removed-body-scroll-bar-size: 0 !important;
 		margin-right: 0 !important;
 	}
+
+	/* Prevent layout shift when modals open by maintaining scrollbar width */
+	html {
+		scrollbar-gutter: stable;
+	}
 }

From 178ccca00fb23168c75c98619f353f7c2f87160a Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Fri, 23 May 2025 12:26:42 +0000
Subject: [PATCH 2/2] feat: show required badge instead of diagnostic

---
 .../DynamicParameter/DynamicParameter.tsx     | 58 +++++++++++++------
 1 file changed, 40 insertions(+), 18 deletions(-)

diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
index fc74a3a46a005..96727cd0c796f 100644
--- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
+++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -89,9 +89,7 @@ export const DynamicParameter: FC<DynamicParameterProps> = ({
 					/>
 				)}
 			</div>
-			{parameter.diagnostics.length > 0 && (
-				<ParameterDiagnostics diagnostics={parameter.diagnostics} />
-			)}
+			<ParameterDiagnostics diagnostics={parameter.diagnostics} />
 		</div>
 	);
 };
@@ -112,6 +110,9 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
 	const displayName = parameter.display_name
 		? parameter.display_name
 		: parameter.name;
+	const hasRequiredDiagnostic = parameter.diagnostics?.find(
+		(d) => d.extra?.code === "required",
+	);
 
 	return (
 		<div className="flex items-start gap-2">
@@ -186,6 +187,22 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
 							</Tooltip>
 						</TooltipProvider>
 					)}
+					{hasRequiredDiagnostic && (
+						<TooltipProvider delayDuration={100}>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<span className="flex items-center">
+										<Badge size="sm" variant="destructive" border="none">
+											Required
+										</Badge>
+									</span>
+								</TooltipTrigger>
+								<TooltipContent className="max-w-xs">
+									{hasRequiredDiagnostic.summary || "Required parameter"}
+								</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+					)}
 				</Label>
 
 				{Boolean(parameter.description) && (
@@ -558,21 +575,26 @@ const ParameterDiagnostics: FC<ParameterDiagnosticsProps> = ({
 	diagnostics,
 }) => {
 	return (
-		<div className="flex flex-col gap-2">
-			{diagnostics.map((diagnostic, index) => (
-				<div
-					key={`parameter-diagnostic-${diagnostic.summary}-${index}`}
-					className={`text-xs px-1 ${
-						diagnostic.severity === "error"
-							? "text-content-destructive"
-							: "text-content-warning"
-					}`}
-				>
-					<p className="font-medium">{diagnostic.summary}</p>
-					{diagnostic.detail && <p className="m-0">{diagnostic.detail}</p>}
-				</div>
-			))}
-		</div>
+		<>
+			{diagnostics.map((diagnostic, index) => {
+				if (diagnostic.extra?.code === "required") {
+					return null;
+				}
+				return (
+					<div
+						key={`parameter-diagnostic-${diagnostic.summary}-${index}`}
+						className={`text-xs px-1 ${
+							diagnostic.severity === "error"
+								? "text-content-destructive"
+								: "text-content-warning"
+						}`}
+					>
+						<p className="font-medium">{diagnostic.summary}</p>
+						{diagnostic.detail && <p className="m-0">{diagnostic.detail}</p>}
+					</div>
+				);
+			})}
+		</>
 	);
 };