From b5a445d3c25b73b4103b6c0a4c5e90ef8254b10a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?McKayla=20=E3=81=AF=E3=81=AA?= <mckayla@hey.com>
Date: Wed, 8 Jul 2026 13:59:54 -0600
Subject: [PATCH] fix(site): stop popover heading from overlapping provisioner
 tag fields (#27101)

---
 .../ProvisionerTagsPopover.tsx                | 52 ++++++++++---------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx
index 8380f6e6da..a10dca47b9 100644
--- a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx
@@ -3,7 +3,7 @@ import useTheme from "@mui/system/useTheme";
 import type { FC } from "react";
 import type { ProvisionerDaemon } from "#/api/typesGenerated";
 import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
-import { FormSection } from "#/components/Form/Form";
+import { FormSection, VerticalForm } from "#/components/Form/Form";
 import { TopbarButton } from "#/components/FullPageLayout/Topbar";
 import {
 	Popover,
@@ -43,30 +43,32 @@ export const ProvisionerTagsPopover: FC<ProvisionerTagsPopoverProps> = ({
 						borderBottom: `1px solid ${theme.palette.divider}`,
 					}}
 				>
-					<FormSection
-						classes={{
-							// Override lg:gap-6 from FormSection defaults. The
-							// lg:flex-col counters the default FormContext
-							// direction ("horizontal") which adds lg:flex-row.
-							root: "flex-col lg:flex-col gap-4 lg:gap-4",
-						}}
-						title="Provisioner Tags"
-						description={
-							<>
-								Tags are a way to control which provisioner daemons complete
-								which build jobs.&nbsp;
-								<Link
-									href={docs("/admin/provisioners")}
-									target="_blank"
-									rel="noreferrer"
-								>
-									Learn more...
-								</Link>
-							</>
-						}
-					>
-						<ProvisionerTagsField value={tags} onChange={onTagsChange} />
-					</FormSection>
+					<VerticalForm>
+						<FormSection
+							classes={{
+								// Override lg:gap-6 from FormSection defaults. The
+								// lg:flex-col counters the default FormContext
+								// direction ("horizontal") which adds lg:flex-row.
+								root: "flex-col lg:flex-col gap-4 lg:gap-4",
+							}}
+							title="Provisioner Tags"
+							description={
+								<>
+									Tags are a way to control which provisioner daemons complete
+									which build jobs.&nbsp;
+									<Link
+										href={docs("/admin/provisioners")}
+										target="_blank"
+										rel="noreferrer"
+									>
+										Learn more...
+									</Link>
+								</>
+							}
+						>
+							<ProvisionerTagsField value={tags} onChange={onTagsChange} />
+						</FormSection>
+					</VerticalForm>
 				</div>
 			</PopoverContent>
 		</Popover>