From 838fbc18dc58ae69f9e73b3d6f62760fd7188cf5 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Fri, 17 Oct 2025 09:59:22 -0300
Subject: [PATCH] fix: improve options table reading (#20341)

From @chrifro

- text-sm regular for the body text (24px line height)
- text-sm bold and white font for the headline

**Before:**

<img width="1624" height="967" alt="Screenshot 2025-10-16 at 10 08 19"
src="https://github.com/user-attachments/assets/b0ef6aef-57b6-43d0-921b-8028c58866f0"
/>


**After:**

<img width="1624" height="967" alt="Screenshot 2025-10-16 at 10 10 27"
src="https://github.com/user-attachments/assets/f39526f3-f0cc-4678-83b3-84bf4161b5be"
/>
---
 .../pages/DeploymentSettingsPage/Option.tsx   | 19 ++++----------
 .../DeploymentSettingsPage/OptionsTable.tsx   | 25 ++-----------------
 2 files changed, 7 insertions(+), 37 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/Option.tsx b/site/src/pages/DeploymentSettingsPage/Option.tsx
index 3dd61750d1..ae13db003c 100644
--- a/site/src/pages/DeploymentSettingsPage/Option.tsx
+++ b/site/src/pages/DeploymentSettingsPage/Option.tsx
@@ -5,26 +5,17 @@ import type { FC, HTMLAttributes, PropsWithChildren } from "react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 
 export const OptionName: FC<PropsWithChildren> = ({ children }) => {
-	return <span css={{ display: "block" }}>{children}</span>;
-};
-
-export const OptionDescription: FC<PropsWithChildren> = ({ children }) => {
-	const theme = useTheme();
-
 	return (
-		<span
-			css={{
-				display: "block",
-				color: theme.palette.text.secondary,
-				fontSize: 14,
-				marginTop: 4,
-			}}
-		>
+		<span className="block text-sm font-medium text-content-primary">
 			{children}
 		</span>
 	);
 };
 
+export const OptionDescription: FC<PropsWithChildren> = ({ children }) => {
+	return <span className="text-sm font-normal">{children}</span>;
+};
+
 interface OptionValueProps {
 	children?: boolean | number | string | string[] | Record<string, boolean>;
 }
diff --git a/site/src/pages/DeploymentSettingsPage/OptionsTable.tsx b/site/src/pages/DeploymentSettingsPage/OptionsTable.tsx
index 11b5182e56..ddc4266124 100644
--- a/site/src/pages/DeploymentSettingsPage/OptionsTable.tsx
+++ b/site/src/pages/DeploymentSettingsPage/OptionsTable.tsx
@@ -1,4 +1,3 @@
-import { css } from "@emotion/react";
 import type { SerpentOption } from "api/typesGenerated";
 import {
 	Table,
@@ -29,20 +28,7 @@ const OptionsTable: FC<OptionsTableProps> = ({ options, additionalValues }) => {
 	}
 
 	return (
-		<Table
-			className="options-table"
-			css={css`
-          & td {
-            padding-top: 24px;
-            padding-bottom: 24px;
-          }
-
-          & td:last-child,
-          & th:last-child {
-            padding-left: 32px;
-          }
-        `}
-		>
+		<Table className="options-table">
 			<TableHeader>
 				<TableRow>
 					<TableHead className="w-1/2">Option</TableHead>
@@ -56,14 +42,7 @@ const OptionsTable: FC<OptionsTableProps> = ({ options, additionalValues }) => {
 							<TableCell>
 								<OptionName>{option.name}</OptionName>
 								<OptionDescription>{option.description}</OptionDescription>
-								<div
-									css={{
-										marginTop: 24,
-										display: "flex",
-										flexWrap: "wrap",
-										gap: 8,
-									}}
-								>
+								<div className="pt-2 flex flex-wrap gap-2">
 									{option.flag && (
 										<OptionConfig isSource={option.value_source === "flag"}>
 											<OptionConfigFlag>CLI</OptionConfigFlag>