update diff looking good

frontend/src/components/config/util.tsx

@@ -322,7 +322,7 @@ export const SystemCommand = ({
 }) => {
   return (
     <ConfigItem label={label} className="items-start">
-      <div className="grid gap-4 grid-cols-[auto_1fr] grid-rows-1 items-center">
+      <div className="grid gap-y-4 gap-x-8 grid-cols-[auto_1fr] grid-rows-1 items-center">
         Path:
         <Input
           placeholder="Command working directory"

frontend/src/components/updates/details.tsx

@@ -19,7 +19,7 @@ import { useRead } from "@lib/hooks";
 import { ResourceComponents } from "@components/resources";
 import { Link } from "react-router-dom";
 import { fmt_duration, fmt_version } from "@lib/formatting";
-import { logToHtml, usableResourcePath, version_is_none } from "@lib/utils";
+import { sanitizeOnlySpan, usableResourcePath, version_is_none } from "@lib/utils";
 import { UsableResource } from "@types";
 
 export const UpdateUser = ({ user_id }: { user_id: string }) => {
@@ -148,7 +148,7 @@ export const UpdateDetailsInner = ({
                     <CardDescription>stdout</CardDescription>
                     <pre
                       dangerouslySetInnerHTML={{
-                        __html: logToHtml(log.stdout),
+                        __html: sanitizeOnlySpan(log.stdout),
                       }}
                       className="max-h-[500px] overflow-y-auto"
                     />
@@ -159,7 +159,7 @@ export const UpdateDetailsInner = ({
                     <CardDescription>stderr</CardDescription>
                     <pre
                       dangerouslySetInnerHTML={{
-                        __html: logToHtml(log.stderr),
+                        __html: sanitizeOnlySpan(log.stderr),
                       }}
                       className="max-h-[500px] overflow-y-auto"
                     />

frontend/src/lib/utils.ts

@@ -99,6 +99,15 @@ export const usableResourcePath = (resource: UsableResource) => {
   return `${resource.toLowerCase()}s`
 }
 
+export const sanitizeOnlySpan = (log: string) => {
+  return sanitizeHtml(log, {
+    allowedTags: ["span"],
+    allowedAttributes: {
+      "span": ["class"]
+    },
+  });
+}
+
 const convert = new Convert();
 /**
  * Converts the ansi colors in log to html.