From 3f8204ddd3603a569b7432b9ffe47b368d595685 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Thu, 18 Apr 2024 08:37:43 +0100
Subject: [PATCH] make code dialog look much nicer

---
 src/app/components/code-dialog.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app/components/code-dialog.tsx b/src/app/components/code-dialog.tsx
index 857c138..b19cd86 100644
--- a/src/app/components/code-dialog.tsx
+++ b/src/app/components/code-dialog.tsx
@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
-import { atelierSeasideDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
 
 type CodeDialogProps = {
@@ -35,10 +35,14 @@ export function CodeDialog({ title, description, code, children }: CodeDialogPro
           <DialogDescription>{description}</DialogDescription>
         </DialogHeader>
         <SyntaxHighlighter
-          language="javascript"
-          style={atelierSeasideDark}
+          language="json"
+          style={atomOneDark}
+          wrapLongLines
           customStyle={{
             maxHeight: "600px",
+            backgroundColor: "var(--secondary)",
+            overflow: "hidden",
+            wordBreak: "break-all",
           }}
         >
           {code}