feat: resolve inline styles

jakehwll · jakehwll · commit abf46323eb68 · 2025-12-16T01:57:59.000Z
diff --git a/site/src/components/CustomLogo/CustomLogo.tsx b/site/src/components/CustomLogo/CustomLogo.tsx
@@ -24,7 +24,7 @@ export const CustomLogo: FC<{ css?: Interpolation<Theme> }> = (props) => {
 			onLoad={(e) => {
 				e.currentTarget.style.display = "inline";
 			}}
-			className="application-logo max-w-50"
+			className="application-logo max-w-[200px]"
 		/>
 	) : (
 		<CoderIcon {...props} className="w-12 h-12" />
diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx
@@ -28,8 +28,7 @@ export const Form: FC<FormProps> = ({ direction, ...formProps }) => {
 				{...formProps}
 				className={cn(
 					"flex flex-col gap-16",
-					direction === "horizontal" && "md:gap-20",
-					direction !== "horizontal" && "md:gap-10",
+					direction === "horizontal" ? "md:gap-20" : "md:gap-10",
 				)}
 			/>
 		</FormContext.Provider>
diff --git a/site/src/components/Loader/Loader.tsx b/site/src/components/Loader/Loader.tsx
@@ -21,8 +21,7 @@ export const Loader: FC<LoaderProps> = ({
 		<div
 			{...attrs}
 			className={cn(
-				fullscreen && classNames.fullscreen,
-				!fullscreen && classNames.inline,
+				fullscreen ? classNames.fullscreen : classNames.inline,
 				attrs.className,
 			)}
 			data-testid="loader"
diff --git a/site/src/components/Margins/Margins.tsx b/site/src/components/Margins/Margins.tsx
@@ -27,10 +27,10 @@ export const Margins: FC<MarginsProps> = ({
 		<div
 			{...divProps}
 			style={{
-				"--max-width": `${maxWidth}px`,
-				"--padding": `${sidePadding}px`,
+				...(maxWidth ? { maxWidth: `${maxWidth}px` } : {}),
+				...(sidePadding ? { padding: `${sidePadding}px` } : {}),
 			}}
-			className="mx-auto px-[var(--padding,_auto)] w-full max-w-[var(--max-width,_100%)]"
+			className="mx-auto w-full"
 		>
 			{children}
 		</div>
diff --git a/site/src/components/Menu/MenuSearch.tsx b/site/src/components/Menu/MenuSearch.tsx
@@ -11,8 +11,11 @@ export const MenuSearch: FC<SearchFieldProps> = (props) => {
 			fullWidth
 			className={cn(
 				"[&_fieldset]:border-0 [&_fieldset]:rounded-none",
-				"[&_fieldset]:!border-0 [&_fieldset]:!border-b",
 				"[&_fieldset]:!border-surface-quaternary",
+				"[&_fieldset]:!border-0",
+				// MUI has so many nested selectors that it's easier to just
+				// override the border directly using the `!important` hack
+				"[&_fieldset]:!border-b",
 			)}
 			{...props}
 		/>
diff --git a/site/src/components/OverflowY/OverflowY.tsx b/site/src/components/OverflowY/OverflowY.tsx
@@ -30,15 +30,10 @@ export const OverflowY: FC<OverflowYProps> = ({
 		<div
 			{...attrs}
 			style={{
-				"--computed-height": computedHeight,
-				"--computed-max-height": computedMaxHeight,
+				height: computedHeight,
+				maxHeight: computedMaxHeight,
 			}}
-			className={cn(
-				"w-full overflow-y-auto flex-shrink-1",
-				"h-[var(--computed-height)]",
-				"max-h-[var(--computed-max-height)]",
-				attrs.className,
-			)}
+			className={cn("w-full overflow-y-auto flex-shrink-1", attrs.className)}
 		>
 			{children}
 		</div>
diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx
@@ -52,8 +52,7 @@ export const PageHeaderSubtitle: FC<PageHeaderSubtitleProps> = ({
 		<h2
 			className={cn(
 				"text-base font-normal block mb-0 text-content-secondary leading-[1.4]",
-				condensed && "mt-1",
-				!condensed && "mt-2",
+				condensed ? "mt-1" : "mt-2",
 			)}
 		>
 			{children}
