Make share preview use full width/height

Hassanrkbiz · Aug 12, 2024 · 8be1996 · 8be1996
1 parent bc880ca
commit 8be1996
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/app/share/[id]/layout.tsx b/app/share/[id]/layout.tsx
@@ -3,9 +3,5 @@ export default function Layout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  return (
-    <body className="flex min-h-full flex-col items-center justify-center">
-      {children}
-    </body>
-  );
+  return <body className="flex min-h-full flex-col">{children}</body>;
 }
diff --git a/components/code-viewer.css b/components/code-viewer.css
@@ -0,0 +1,7 @@
+.sp-preview-container {
+  @apply flex h-full w-full grow flex-col justify-center;
+}
+
+.sp-preview-iframe {
+  @apply grow;
+}
diff --git a/components/code-viewer.tsx b/components/code-viewer.tsx
@@ -8,6 +8,7 @@ import {
 } from "@codesandbox/sandpack-react/unstyled";
 import { dracula as draculaTheme } from "@codesandbox/sandpack-themes";
 import dedent from "dedent";
+import "./code-viewer.css";
 
 export default function CodeViewer({
   code,
@@ -36,10 +37,12 @@ export default function CodeViewer({
         "App.tsx": code,
         ...sharedFiles,
       }}
+      className="flex h-full w-full grow flex-col justify-center"
       options={{ ...sharedOptions }}
       {...sharedProps}
     >
       <SandpackPreview
+        className="flex h-full w-full grow flex-col justify-center p-4 md:pt-16"
         showOpenInCodeSandbox={false}
         showRefreshButton={false}
       />