chore: fix :first-child warning (#17727)

Fix the following warning: ``` The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. ```
coder · matifali · May 22, 2025 · May 2, 2025 · May 8, 2025 · May 8, 2025
commit 28a00de9bd15e35a6e5bce6b82ec6c337db55d6f
diff --git a/site/src/components/InputGroup/InputGroup.tsx b/site/src/components/InputGroup/InputGroup.tsx
@@ -25,14 +25,9 @@ export const InputGroup: FC<HTMLProps<HTMLDivElement>> = (props) => {
 					zIndex: 2,
 				},
 
-				"& > *:first-child": {
+				"& > *:first-of-type": {
 					borderTopRightRadius: 0,
 					borderBottomRightRadius: 0,
-
-					"&.MuiFormControl-root .MuiInputBase-root": {
-						borderTopRightRadius: 0,
-						borderBottomRightRadius: 0,
-					},
 				},
 
 				"& > *:last-child": {
@@ -45,7 +40,7 @@ export const InputGroup: FC<HTMLProps<HTMLDivElement>> = (props) => {
 					},
 				},
 
-				"& > *:not(:first-child):not(:last-child)": {
+				"& > *:not(:first-of-type):not(:last-child)": {
 					borderRadius: 0,
 
 					"&.MuiFormControl-root .MuiInputBase-root": {

diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx
@@ -348,19 +348,19 @@ const MarkdownGfmAlert: FC<MarkdownGfmAlertProps> = ({
 					"[&_p]:m-0 [&_p]:mb-2",
 
 					alertType === "important" &&
-						"border-highlight-purple [&_p:first-child]:text-highlight-purple",
+						"border-highlight-purple [&_p:first-of-type]:text-highlight-purple",
 
 					alertType === "warning" &&
-						"border-border-warning [&_p:first-child]:text-border-warning",
+						"border-border-warning [&_p:first-of-type]:text-border-warning",
 
 					alertType === "note" &&
-						"border-highlight-sky [&_p:first-child]:text-highlight-sky",
+						"border-highlight-sky [&_p:first-of-type]:text-highlight-sky",
 
 					alertType === "tip" &&
-						"border-highlight-green [&_p:first-child]:text-highlight-green",
+						"border-highlight-green [&_p:first-of-type]:text-highlight-green",
 
 					alertType === "caution" &&
-						"border-highlight-red [&_p:first-child]:text-highlight-red",
+						"border-highlight-red [&_p:first-of-type]:text-highlight-red",
 				)}
 			>
 				<p className="font-bold">

diff --git a/site/src/components/Table/Table.tsx b/site/src/components/Table/Table.tsx
@@ -36,10 +36,10 @@ export const TableBody = React.forwardRef<
 	<tbody
 		ref={ref}
 		className={cn(
-			"[&>tr:first-child>td]:border-t [&>tr>td:first-child]:border-l",
+			"[&>tr:first-of-type>td]:border-t [&>tr>td:first-of-type]:border-l",
 			"[&>tr:last-child>td]:border-b [&>tr>td:last-child]:border-r",
-			"[&>tr:first-child>td:first-child]:rounded-tl-md [&>tr:first-child>td:last-child]:rounded-tr-md",
-			"[&>tr:last-child>td:first-child]:rounded-bl-md [&>tr:last-child>td:last-child]:rounded-br-md",
+			"[&>tr:first-of-type>td:first-of-type]:rounded-tl-md [&>tr:first-of-type>td:last-child]:rounded-tr-md",
+			"[&>tr:last-child>td:first-of-type]:rounded-bl-md [&>tr:last-child>td:last-child]:rounded-br-md",
 			className,
 		)}
 		{...props}

diff --git a/site/src/modules/resources/ResourceCard.tsx b/site/src/modules/resources/ResourceCard.tsx
@@ -19,7 +19,7 @@ const styles = {
 			borderBottom: 0,
 		},
 
-		"&:first-child": {
+		"&:first-of-type": {
 			borderTopLeftRadius: 8,
 			borderTopRightRadius: 8,
 		},

diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Chart.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Chart.tsx
@@ -185,7 +185,7 @@ const styles = {
 			},
 		},
 
-		"& li:first-child": {
+		"& li:first-of-type": {
 			color: theme.palette.text.secondary,
 		},
 

diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/XAxis.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/XAxis.tsx
@@ -56,7 +56,7 @@ const XAxisLabel: FC<HTMLProps<HTMLLIElement>> = (props) => {
 					// Note: This adjustment is not applied to the first element,
 					// as the 0 label/value is not displayed in the chart.
 					width: "calc(var(--x-axis-width) * 2)",
-					"&:not(:first-child)": {
+					"&:not(:first-of-type)": {
 						marginLeft: "calc(-1 * var(--x-axis-width))",
 					},
 				},

diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/YAxis.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/YAxis.tsx
@@ -35,7 +35,7 @@ const styles = {
 		flexShrink: 0,
 	},
 	section: (theme) => ({
-		"&:not(:first-child)": {
+		"&:not(:first-of-type)": {
 			borderTop: `1px solid ${theme.palette.divider}`,
 		},
 	}),

diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -559,7 +559,7 @@ const TemplateParametersUsagePanel: FC<TemplateParametersUsagePanelProps> = ({
 									marginRight: -24,
 									borderTop: `1px solid ${theme.palette.divider}`,
 									width: "calc(100% + 48px)",
-									"&:first-child": {
+									"&:first-of-type": {
 										borderTop: 0,
 									},
 									gap: 24,

diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
@@ -123,7 +123,7 @@ const styles = {
 		lineHeight: "1.5",
 		borderTop: `1px solid ${theme.palette.divider}`,
 
-		"&:first-child": {
+		"&:first-of-type": {
 			borderTop: 0,
 		},
 	}),
-Original file line number
+Diff line change
@@ Expand Up / @@ -185,7 +185,7 @@ const styles = { @@
     			},
     		},
-    		"& li:first-child": {
+    		"& li:first-of-type": {
     			color: theme.palette.text.secondary,
     		},
@@ Expand Down @@