diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx
index 1894622..fa7f7a0 100644
--- a/src/app/(app)/layout.tsx
+++ b/src/app/(app)/layout.tsx
@@ -6,9 +6,9 @@ interface AppLayoutProps {
 
 export default function AppLayout({ children }: AppLayoutProps) {
   return (
-    <div className="flex flex-1 flex-col">
+    <div className="h-screen flex flex-col">
       <Banner />
-      <main className="flex flex-1 flex-col">
+      <main className="flex flex-1 min-h-0">
         {children}
       </main>
     </div>
diff --git a/src/app/(app)/playground/@description/layout.tsx b/src/app/(app)/playground/@description/layout.tsx
index 75aa61f..d5f836b 100644
--- a/src/app/(app)/playground/@description/layout.tsx
+++ b/src/app/(app)/playground/@description/layout.tsx
@@ -8,7 +8,7 @@ interface DescriptionLayoutProps {
 
 export default function DescriptionLayout({ children }: DescriptionLayoutProps) {
   return (
-    <Tabs defaultValue="description" className="h-full">
+    <Tabs defaultValue="description">
       <ScrollArea className="h-11 flex items-center pt-1 px-1">
         <TabsList className="gap-1 bg-transparent">
           <TabsTrigger
@@ -25,7 +25,7 @@ export default function DescriptionLayout({ children }: DescriptionLayoutProps)
         </TabsList>
         <ScrollBar orientation="horizontal" />
       </ScrollArea>
-      <TabsContent value="description" className="h-full mt-0 border-t">
+      <TabsContent value="description" className="mt-0 border-t">
         {children}
       </TabsContent>
     </Tabs>
diff --git a/src/app/(app)/playground/@workspace/layout.tsx b/src/app/(app)/playground/@workspace/layout.tsx
index dbb03fc..9fc5d0f 100644
--- a/src/app/(app)/playground/@workspace/layout.tsx
+++ b/src/app/(app)/playground/@workspace/layout.tsx
@@ -8,7 +8,7 @@ interface WorkspaceLayoutProps {
 
 export default function WorkspaceLayout({ children }: WorkspaceLayoutProps) {
   return (
-    <Tabs defaultValue="code" className="h-full">
+    <Tabs defaultValue="code">
       <ScrollArea className="h-11 flex items-center pt-1 px-1">
         <TabsList className="gap-1 bg-transparent">
           <TabsTrigger
@@ -25,7 +25,7 @@ export default function WorkspaceLayout({ children }: WorkspaceLayoutProps) {
         </TabsList>
         <ScrollBar orientation="horizontal" />
       </ScrollArea>
-      <TabsContent value="code" className="h-full mt-0 border-t">
+      <TabsContent value="code" className="mt-0 border-t">
         {children}
       </TabsContent>
     </Tabs>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0679ea5..3334173 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -13,15 +13,15 @@ interface RootLayoutProps {
 
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body className="min-h-svh antialiased">
+    <html lang="en" className="h-full" suppressHydrationWarning>
+      <body className="flex min-h-full antialiased">
         <ThemeProvider
           attribute="class"
           defaultTheme="system"
           enableSystem
           disableTransitionOnChange
         >
-          <div className="relative flex min-h-svh flex-col">
+          <div className="w-full">
             {children}
           </div>
         </ThemeProvider>
diff --git a/src/components/code-editor.tsx b/src/components/code-editor.tsx
index 5c44bbb..66bb569 100644
--- a/src/components/code-editor.tsx
+++ b/src/components/code-editor.tsx
@@ -102,7 +102,7 @@ export default function CodeEditor() {
       defaultValue={DEFAULT_VALUE[language]}
       path={DEFAULT_PATH[language]}
       theme={resolvedTheme === "light" ? "github-light-default" : "github-dark-default"}
-      className="h-[calc(100vh-56px)]"
+      className="h-[calc(100vh-112px)]"
       options={mergeOptions}
       beforeMount={(monaco) => {
         shikiToMonaco(highlighter, monaco);
diff --git a/src/components/mdx-preview.tsx b/src/components/mdx-preview.tsx
index 4484204..9455950 100644
--- a/src/components/mdx-preview.tsx
+++ b/src/components/mdx-preview.tsx
@@ -109,7 +109,7 @@ export default function MdxPreview({ source }: MdxPreviewProps) {
   }
 
   return (
-    <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-56px)]">
+    <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-112px)]">
       <div className="markdown-body">
         <MDXRemote {...mdxSource!} components={components} />
       </div>
