fix: changed the code block styles to work on phones

joshika39 · Feb 8, 2025 · 3c9f02a · 3c9f02a
1 parent 081d63d
commit 3c9f02a
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/components/code/code-block.tsx b/components/code/code-block.tsx
@@ -10,11 +10,16 @@ export default function CodeBlock({children, className, copyString}: {
 }) {
 
   return (
-    <div className={cn('relative bg-gray-300 dark:bg-gray-700 rounded-md flex flex-row p-4 w-full justify-between', className)}>
-      <pre className={'text-foreground overflow-x-auto content-center'}>
+    <div
+      className={cn(
+        'relative bg-gray-300 grid grid-cols-6 gap-x-2 w-full dark:bg-gray-700 rounded-md p-4 justify-between',
+        className
+      )}
+    >
+      <pre className={'text-foreground col-span-5 whitespace-pre-wrap w-full content-center overflow-x-auto '}>
         {children}
       </pre>
-      <CopyButton content={copyString || children as string} className={''}/>
+      <CopyButton content={copyString || children as string} className={'m-0 self-center'}/>
     </div>
   );
 }