From 27948866887bfaf1ee2d43f3d5374ab1153e6704 Mon Sep 17 00:00:00 2001
From: Jake Howell <jacob@coder.com>
Date: Tue, 28 Jul 2026 14:25:07 +1000
Subject: [PATCH] fix: demui `<Form />` emotion usage (#27560)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tiny simple change just moving us over to Tailwind instead of MUI for
`<Form />`. Functionally equivalent minus the mismatch between `md` in
`Tailwind` (`≥ 768px`) and `MUI` (`≥ 900px`).
---
 site/src/components/Form/Form.tsx | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx
index ebfab3b4a6..8422a0f6cb 100644
--- a/site/src/components/Form/Form.tsx
+++ b/site/src/components/Form/Form.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import {
 	type ComponentProps,
 	createContext,
@@ -20,22 +19,16 @@ type FormProps = HTMLProps<HTMLFormElement> & {
 	direction?: FormContextValue["direction"];
 };
 
-export const Form: FC<FormProps> = ({ direction, ...formProps }) => {
-	const theme = useTheme();
-
+export const Form: FC<FormProps> = ({ direction, className, ...formProps }) => {
 	return (
 		<FormContext.Provider value={{ direction }}>
 			<form
 				{...formProps}
-				css={{
-					display: "flex",
-					flexDirection: "column",
-					gap: direction === "horizontal" ? 80 : 40,
-
-					[theme.breakpoints.down("md")]: {
-						gap: 64,
-					},
-				}}
+				className={cn(
+					"flex flex-col gap-16",
+					direction === "horizontal" ? "md:gap-20" : "md:gap-10",
+					className,
+				)}
 			/>
 		</FormContext.Provider>
 	);