chore: revert styles for <LogLine />

jakehwll · jakehwll · commit bdac8b9b38e8 · 2025-12-17T11:06:17.000Z
diff --git a/site/src/components/Logs/LogLine.tsx b/site/src/components/Logs/LogLine.tsx
@@ -1,5 +1,7 @@
+import type { Interpolation, Theme } from "@emotion/react";
 import type { LogLevel } from "api/typesGenerated";
 import type { FC, HTMLAttributes } from "react";
+import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { cn } from "utils/cn";
 
 const DEFAULT_LOG_LINE_SIDE_PADDING = 24;
@@ -19,31 +21,7 @@ type LogLineProps = {
 export const LogLine: FC<LogLineProps> = ({ level, ...divProps }) => {
 	return (
 		<pre
-			css={(theme) => ({
-				padding: `0 var(--log-line-side-padding, ${DEFAULT_LOG_LINE_SIDE_PADDING}px)`,
-				"&.error": {
-					backgroundColor: theme.roles.error.background,
-					color: theme.roles.error.text,
-					"& .dashed-line": {
-						backgroundColor: theme.roles.error.outline,
-					},
-				},
-				"&.debug": {
-					backgroundColor: theme.roles.notice.background,
-					color: theme.roles.notice.text,
-					"& .dashed-line": {
-						backgroundColor: theme.roles.notice.outline,
-					},
-				},
-				"&.warn": {
-					backgroundColor: theme.roles.warning.background,
-					color: theme.roles.warning.text,
-
-					"& .dashed-line": {
-						backgroundColor: theme.roles.warning.outline,
-					},
-				},
-			})}
+			css={styles.line}
 			{...divProps}
 			className={cn(
 				"m-0 break-all flex items-center text-[13px]",
@@ -67,3 +45,44 @@ export const LogLinePrefix: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
 		/>
 	);
 };
+
+const styles = {
+	line: (theme) => ({
+		margin: 0,
+		wordBreak: "break-all",
+		display: "flex",
+		alignItems: "center",
+		fontSize: 13,
+		color: theme.palette.text.primary,
+		fontFamily: MONOSPACE_FONT_FAMILY,
+		height: "auto",
+		padding: `0 var(--log-line-side-padding, ${DEFAULT_LOG_LINE_SIDE_PADDING}px)`,
+
+		"&.error": {
+			backgroundColor: theme.roles.error.background,
+			color: theme.roles.error.text,
+
+			"& .dashed-line": {
+				backgroundColor: theme.roles.error.outline,
+			},
+		},
+
+		"&.debug": {
+			backgroundColor: theme.roles.notice.background,
+			color: theme.roles.notice.text,
+
+			"& .dashed-line": {
+				backgroundColor: theme.roles.notice.outline,
+			},
+		},
+
+		"&.warn": {
+			backgroundColor: theme.roles.warning.background,
+			color: theme.roles.warning.text,
+
+			"& .dashed-line": {
+				backgroundColor: theme.roles.warning.outline,
+			},
+		},
+	}),
+} satisfies Record<string, Interpolation<Theme>>;
