refactor(components): simplify CodeBlock usage in workflow-value-renderer and improve styling

Author: bchapuis

apps/web/src/components/docs/code-block.tsx

@@ -92,14 +92,14 @@ export function CodeBlock({ children, className, language }: CodeBlockProps) {
       <Button
         size="icon"
         variant="ghost"
-        className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8 text-zinc-400 hover:text-zinc-100 hover:bg-transparent z-10"
+        className="absolute right-0 top-0 h-8 w-8 text-zinc-400 z-10"
         onClick={handleCopy}
       >
         {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
       </Button>
       <div
         className={cn(
-          "mb-4 mt-2 overflow-x-auto rounded-md text-sm [&_pre]:m-0 [&_pre]:p-4 [&_pre]:!bg-secondary [&_pre]:dark:!bg-neutral-900 [&_code]:whitespace-pre-wrap",
+          "overflow-y-auto overflow-x-auto nowheel mb-4 mt-2 text-sm [&_pre]:m-0 [&_pre]:p-4 [&_pre]:!bg-secondary [&_pre]:dark:!bg-neutral-900 [&_code]:whitespace-pre",
           className
         )}
         dangerouslySetInnerHTML={{ __html: highlightedCode }}

apps/web/src/components/workflow/workflow-value-renderer.tsx

@@ -221,17 +221,13 @@ const GeoJSONRenderer = ({
           width={compact ? 300 : 400}
           height={compact ? 200 : 300}
         />
-
-        <div
-          className={`${compact ? "max-h-[300px] overflow-y-auto nowheel" : ""}`}
-        >
-          <CodeBlock
-            language="json"
-            className="text-xs my-0 border [&_pre]:p-2"
-          >
-            {formattedValue}
-          </CodeBlock>
-        </div>
+        <CodeRenderer
+          value={formattedValue}
+          type="json"
+          compact={compact}
+          readonly={readonly}
+          onChange={onChange}
+        />
       </div>
     );
   }
@@ -312,11 +308,14 @@ const CodeRenderer = ({
   if (readonly) {
     return (
       <div
-        className={`${compact ? "mt-1 max-h-[300px] overflow-y-auto nowheel" : "mt-2"}`}
+        className={
+          "border rounded-md bg-muted overflow-auto " +
+          `${compact ? "mt-1 h-32" : "mt-2"}`
+        }
       >
         <CodeBlock
           language={getLanguage(type)}
-          className="text-xs my-0 border [&_pre]:p-2"
+          className="text-xs my-0 [&_pre]:p-2"
         >
           {value}
         </CodeBlock>