From 49dedd84300e0a188ce2033dacd2037814296390 Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Wed, 13 Nov 2024 23:19:35 +0100
Subject: [PATCH] Fix JSONGenerator: streamline SelectItem markup and enhance
 JSON display layout for improved readability and user experience

---
 frontend/src/app/json-editor/page.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/json-editor/page.tsx b/frontend/src/app/json-editor/page.tsx
index 1d6b045d..75c370bc 100644
--- a/frontend/src/app/json-editor/page.tsx
+++ b/frontend/src/app/json-editor/page.tsx
@@ -547,10 +547,7 @@ export default function JSONGenerator() {
                 </SelectTrigger>
                 <SelectContent>
                   {Object.keys(AlertColors).map((type) => (
-                    <SelectItem
-                      key={type}
-                      value={type}
-                    >
+                    <SelectItem key={type} value={type}>
                       <span className="flex items-center gap-2">
                         {type.charAt(0).toUpperCase() + type.slice(1)}{" "}
                         <div
@@ -590,7 +587,7 @@ export default function JSONGenerator() {
               : "The current JSON does not match the required schema."}
           </AlertDescription>
         </Alert>
-        <pre className="mt-4 p-4 relative bg-secondary rounded shadow">
+        <div className="relative">
           <Button
             className="absolute right-2 top-2"
             size="icon"
@@ -608,8 +605,10 @@ export default function JSONGenerator() {
               <Clipboard className="h-4 w-4" />
             )}
           </Button>
-          {JSON.stringify(script, null, 2)}
-        </pre>
+          <pre className="mt-4 p-4 bg-secondary rounded shadow overflow-x-scroll">
+            {JSON.stringify(script, null, 2)}
+          </pre>
+        </div>
       </div>
     </div>
   );