From b8851f03e32a0770d686aacd0cb47cadb03e3a1d Mon Sep 17 00:00:00 2001
From: Andrew Aquino <dawneraq@gmail.com>
Date: Thu, 7 Aug 2025 14:08:23 -0400
Subject: [PATCH] fix: prevent horizontal form section info from overlapping
 form fields (#19189)

...on screens that are not wide enough to accommodate 2-column layout.

closes #19055

Sticky positioning on form section info still works as expected on
desktop:


https://github.com/user-attachments/assets/e8f5b364-d20e-4248-acc6-848293947c92

Sticky positioning is no longer applied to form section info on
tablet/mobile:


https://github.com/user-attachments/assets/c52c6b04-7b73-457e-9d9e-0b461fff56ac
---
 site/src/components/Form/Form.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx
index faf900fb4f..715f5ec008 100644
--- a/site/src/components/Form/Form.tsx
+++ b/site/src/components/Form/Form.tsx
@@ -159,10 +159,13 @@ const styles = {
 			position: "initial" as const,
 		},
 	}),
-	formSectionInfoHorizontal: {
+	formSectionInfoHorizontal: (theme) => ({
 		maxWidth: 312,
-		position: "sticky",
-	},
+
+		[theme.breakpoints.up("lg")]: {
+			position: "sticky",
+		},
+	}),
 	formSectionInfoTitle: (theme) => ({
 		fontSize: 20,
 		color: theme.palette.text.primary,