Improves scroll behaviour for the code block

Author: samejr

apps/webapp/app/components/code/CodeBlock.tsx

@@ -265,7 +265,10 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
     return (
       <>
         <div
-          className={cn("relative overflow-hidden rounded-md border border-grid-bright", className)}
+          className={cn(
+            "relative flex flex-col overflow-hidden rounded-md border border-grid-bright",
+            className
+          )}
           style={{
             backgroundColor: theme.plain.backgroundColor,
           }}
@@ -355,9 +358,8 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
             <div
               dir="ltr"
               className={cn(
-                "px-2 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
-                !isWrapped && "overflow-x-auto",
-                isWrapped && "overflow-y-auto"
+                "min-h-0 flex-1 px-2 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
+                "overflow-auto"
               )}
               style={{
                 maxHeight,
@@ -490,9 +492,9 @@ function HighlightCode({
   }, []);
 
   const containerClasses = cn(
-    "px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
-    !isWrapped && "overflow-x-auto",
-    isWrapped && "overflow-y-auto",
+    "min-h-0 flex-1 px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
+    !isWrapped && "overflow-auto",
+    isWrapped && "overflow-auto",
     className
   );