feat: change demo layout

Author: Ohh-889

playground/src/app/(demo)/layout.tsx

@@ -43,17 +43,15 @@ function DemoLayout({ children }: { children: React.ReactNode }) {
     <>
       <DemoTabs items={componentTabs} />
 
-      <ScrollArea className="h-full">
-        <div className="p-[18px]">
-          <div className="mb-8 border border-gray-200 rounded-xl bg-white p-6 shadow-lg transition-all dark:border-neutral-700 dark:bg-neutral-800 hover:shadow-xl">
-            <h3 className="mb-4 border-b border-gray-200 pb-2 text-xl text-gray-800 font-bold dark:border-neutral-700 dark:text-gray-100">
-              Demo <DemoTitle />
-            </h3>
-
-            {children}
-          </div>
+      <div className="h-full p-[18px]">
+        <div className="mb-8 h-full border border-gray-200 rounded-xl bg-white p-6 shadow-lg transition-all dark:border-neutral-700 dark:bg-neutral-800 hover:shadow-xl">
+          <h3 className="mb-4 border-b border-gray-200 pb-2 text-xl text-gray-800 font-bold dark:border-neutral-700 dark:text-gray-100">
+            Demo <DemoTitle />
+          </h3>
+
+          <ScrollArea className="h-full pb-20">{children}</ScrollArea>
         </div>
-      </ScrollArea>
+      </div>
     </>
   );
 }

playground/src/app/(demo)/modules/DemoTabs.tsx

@@ -15,8 +15,12 @@ export default function DemoTabs({ items }: DemoTabsProps) {
 
   return (
     <Tabs
+      enableIndicator={false}
       items={items}
       value={currentTab}
+      classNames={{
+        list: 'flex-wrap justify-start'
+      }}
     />
   );
 }

playground/src/app/layout.tsx

@@ -32,7 +32,7 @@ export default async function RootLayout({
         <div className="h-full">
           <Card
             flexHeight
-            className="h-full lt-sm:h-auto"
+            className="h-full max-sm:h-auto"
             title="Soybean UI Components"
           >
             {children}