Improve code block line wrapping

- Moves comment section to the bottom

Author: Shrinks99

packages/ui/src/components/code-block/code-block.module.css

@@ -30,11 +30,11 @@
 }
 
 .content {
-  @apply bg-card-background rounded-b-md border;
+  @apply bg-card-background border-t-border border-t;
   @apply font-mono text-xs;
   @apply flex-1;
   @apply flex flex-col;
-  @apply overflow-hidden;
+  @apply overflow-scroll;
 }
 
 .neutral {
@@ -57,17 +57,19 @@
   @apply border-brand-yellow;
 }
 
-.scroll-container {
-  @apply overflow-y-auto p-3;
-  @apply w-full;
+.code-label {
+  @apply p-3;
+  @apply border-t-border border-t;
 }
 
-.code-label {
-  @apply text-text-secondary mb-1;
+.code-label-text {
+  @apply text-text-secondary;
+  @apply font-mono text-xs;
 }
 
 .pre {
-  @apply bg-transparent! p-0!;
+  @apply bg-transparent! px-3! my-0!;
+  @apply py-3;
 }
 
 .code.wrap {

packages/ui/src/components/code-block/code-block.tsx

@@ -32,7 +32,7 @@ const CodeBlock = ({
   const [theme] = useTheme();
 
   return (
-    <div className={cn(styles['code-block'], className)}>
+    <div className={cn(styles['code-block'], styles[variant], className)}>
       <div className={styles.header}>
         <div className={styles['header-left']}>
           {title && <span className={styles.title}>{title}</span>}
@@ -44,21 +44,23 @@ const CodeBlock = ({
           <CopyButton value={copy || code} size="sm" />
         </div>
       </div>
-      <div className={cn(styles.content, styles[variant])}>
-        <div className={cn(styles['scroll-container'], 'styled-vertical-scrollbar')}>
-          {codeLabel && <div className={styles['code-label']}>{codeLabel}</div>}
-          <SyntaxHighlighter
-            language={language}
-            style={theme === 'dark' ? darkStyle : lightStyle}
-            wrapLines={WRAP}
-            wrapLongLines={WRAP}
-            className={styles.pre}
-            codeTagProps={{ className: cn(styles.code, { [styles.wrap]: WRAP }) }}
-          >
-            {code}
-          </SyntaxHighlighter>
-        </div>
+      <div className={cn(styles.content)}>
+        <SyntaxHighlighter
+          language={language}
+          style={theme === 'dark' ? darkStyle : lightStyle}
+          wrapLines={WRAP}
+          wrapLongLines={WRAP}
+          className={styles.pre}
+          codeTagProps={{ className: cn(styles.code, { [styles.wrap]: WRAP }) }}
+        >
+          {code}
+        </SyntaxHighlighter>
       </div>
+      {codeLabel && (
+        <div className={styles['code-label']}>
+          <p className={styles['code-label-text']}>{codeLabel}</p>
+        </div>
+      )}
     </div>
   );
 };