fix: prevent horizontal form section info from overlapping form fields (#19189)

aqandrew · web-flow · commit b8851f03e32a · 2025-08-07T11:08:23.000-07:00
...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
diff --git 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,
