refactor: update margins on doc and integrate ScrollArea in DocDemoWrapper component

Author: tanerengiiin

apps/showcase/assets/styles/layout/_code.css

@@ -3,7 +3,7 @@
     color: var(--code-figure-color);
     border-radius: var(--radius-lg);
     border: 1px solid var(--code-figure-border);
-    margin-top: calc(var(--spacing) * 2);
+    margin: calc(var(--spacing) * 2) 0 calc(var(--spacing) * 4) 0;
     overflow: hidden;
     outline: none;
     position: relative;

apps/showcase/shared/components/docs/doc-demo-wrapper.tsx

@@ -2,6 +2,7 @@
 import { openInStackBlitz } from '@/shared/utils/stackblitz';
 import { Code } from '@primeicons/react/code';
 import { Times } from '@primeicons/react/times';
+import { ScrollArea } from '@primereact/ui/scrollarea';
 import { Tooltip } from '@primereact/ui/tooltip';
 import { cn } from '@primeuix/utils';
 import React from 'react';
@@ -43,7 +44,7 @@ export default function DocDemoWrapper({
         : (highlightedCode as string);
 
     return (
-        <div className={cn('mb-16 mt-2 p-2 space-y-2.25 rounded-[14px] bg-surface-100 dark:bg-surface-800/60 shadow-[0_0_0_0.5px_rgba(0,0,0,0.2)] dark:shadow-[0_0_0_0.5px_rgba(255,255,255,0.2)]', className)} {...props}>
+        <div className={cn('mb-16 mt-2 p-2 space-y-2.25 rounded-[14px] bg-surface-100 dark:bg-surface-800/60 shadow-[0_0_0_0.5px_rgba(0,0,0,0.2)] dark:shadow-[0_0_0_0.5px_rgba(255,255,255,0.2)] m-px', className)} {...props}>
             {component && (
                 <div className="flex flex-col overflow-hidden bg-(--code-figure-background) rounded-[8px] shadow-[0_0_0_0.5px_rgba(0,0,0,0.2)] dark:shadow-[0_0_0_0.5px_rgba(255,255,255,0.15)]">
                     <div className="flex-1 pt-8 px-8 pb-5 md:pt-10 md:px-10 md:pb-7">{component}</div>
@@ -117,9 +118,19 @@ export default function DocDemoWrapper({
             )}
             {!isSourceNotAvailable && (mode !== 'collapsible' || isCollapsed) && (
                 <div className="rounded-[8px] bg-(--code-figure-background) overflow-hidden shadow-[0_0_0_0.5px_rgba(0,0,0,0.2)] dark:shadow-[0_0_0_0.5px_rgba(255,255,255,0.15)]">
-                    <figure data-rehype-pretty-code-figure="in-wrapper" data-expanded={isExpanded} className={cn('', mode === 'compact' && 'data-[expanded=true]:[&_pre]:max-h-max [&_pre]:max-h-[300px]')}>
-                        <div dangerouslySetInnerHTML={{ __html: highlightedCode }} />
-                    </figure>
+                    <ScrollArea.Root className="border-none! p-0!" variant="hover">
+                        <ScrollArea.Viewport className={cn('h-auto! p-0!', mode === 'compact' && !isExpanded && 'max-h-75')}>
+                            <ScrollArea.Content as="figure" data-rehype-pretty-code-figure="in-scrollarea" className="m-0! border-none! overflow-visible! **:data-rehype-pretty-code-pre:overflow-visible!">
+                                <div dangerouslySetInnerHTML={{ __html: highlightedCode }} />
+                            </ScrollArea.Content>
+                        </ScrollArea.Viewport>
+                        <ScrollArea.Scrollbar orientation="vertical" className="z-10">
+                            <ScrollArea.Thumb />
+                        </ScrollArea.Scrollbar>
+                        <ScrollArea.Scrollbar orientation="horizontal" className="z-10">
+                            <ScrollArea.Thumb />
+                        </ScrollArea.Scrollbar>
+                    </ScrollArea.Root>
                 </div>
             )}
         </div>