fix JSON formatting

Author: boiln

src/components/code-block.tsx

@@ -76,7 +76,7 @@ export const CodeBlock = (props: CodeBlockProps) => {
 
             <pre
                 className={cn(
-                    "flex-1 overflow-auto rounded-md !bg-background/95 p-3 text-sm leading-normal",
+                    "flex-1 rounded-md !bg-background/95 p-3 text-sm leading-normal",
                     isWrapped && "whitespace-pre-wrap break-words"
                 )}
                 tabIndex={0}

src/components/request-table/index.tsx

@@ -295,12 +295,7 @@ const TableBody_ = (props: TableBodyProps) => {
 
     return (
         <div className="flex-1 overflow-hidden">
-            <CustomScrollbar
-                className="h-full"
-                ref={tableRef}
-                tabIndex={0}
-                onKeyDown={onKeyDown}
-            >
+            <CustomScrollbar className="h-full" ref={tableRef} tabIndex={0} onKeyDown={onKeyDown}>
                 <div className="min-w-max">
                     <Table>
                         <TableBody>

src/components/ui/custom-scrollbar.tsx

@@ -50,7 +50,8 @@ export const CustomScrollbar = forwardRef<HTMLDivElement, CustomScrollbarProps>(
             scrollState.scrollHeight > 0
                 ? Math.max(
                       30,
-                      (scrollState.clientHeight / scrollState.scrollHeight) * scrollState.clientHeight
+                      (scrollState.clientHeight / scrollState.scrollHeight) *
+                          scrollState.clientHeight
                   )
                 : 0;
         const thumbTop =
@@ -101,7 +102,7 @@ export const CustomScrollbar = forwardRef<HTMLDivElement, CustomScrollbarProps>(
         return (
             <div className={cn("flex h-full", className)}>
                 <div
-                    className="flex-1 overflow-y-scroll overflow-x-hidden scrollbar-hide"
+                    className="scrollbar-hide flex-1 overflow-x-hidden overflow-y-scroll"
                     ref={containerRef as React.RefObject<HTMLDivElement>}
                     tabIndex={tabIndex}
                     onKeyDown={onKeyDown}
@@ -111,12 +112,12 @@ export const CustomScrollbar = forwardRef<HTMLDivElement, CustomScrollbarProps>(
                 {/* Custom scrollbar track */}
                 <div
                     ref={trackRef}
-                    className="w-3 bg-muted border-l border-border flex-shrink-0 relative cursor-pointer"
+                    className="relative w-3 flex-shrink-0 cursor-pointer border-l border-border bg-muted"
                     onMouseDown={handleTrackMouseDown}
                 >
                     {showScrollbar && (
                         <div
-                            className="absolute left-0 right-0 bg-foreground/30 hover:bg-foreground/50 rounded-full mx-0.5 cursor-grab active:cursor-grabbing transition-colors"
+                            className="absolute left-0 right-0 mx-0.5 cursor-grab rounded-full bg-foreground/30 transition-colors hover:bg-foreground/50 active:cursor-grabbing"
                             style={{
                                 height: thumbHeight,
                                 top: thumbTop,

src/lib/code-formatting.ts

@@ -114,16 +114,9 @@ const formatNdjson = async (str: string): Promise<string | null> => {
         const prefix = line.trim().slice(0, line.trim().length - jsonPart.length);
 
         try {
-            JSON.parse(jsonPart);
-
-            const formatted = await prettier.format(jsonPart, {
-                parser: "json",
-                plugins: [babelPlugin, estreePlugin],
-                tabWidth: 4,
-                printWidth: 100,
-            });
-
-            formattedLines.push(prefix + formatted.trim());
+            const parsed = JSON.parse(jsonPart);
+            const formatted = JSON.stringify(parsed, null, 4);
+            formattedLines.push(prefix + formatted);
             hasFormattedAny = true;
         } catch {
             formattedLines.push(line.trim());
@@ -142,6 +135,15 @@ export const formatCode = async (str: string, format: string): Promise<string> =
             return str;
         }
 
+        if (format === "json") {
+            try {
+                const parsed = JSON.parse(str);
+                return JSON.stringify(parsed, null, 4);
+            } catch {
+                // If JSON parsing fails, fall through to prettier
+            }
+        }
+
         const parserMap: Record<string, string> = {
             json: "json",
             javascript: "babel",