fix(examples): fix title doesn't show when height is too small

tidbcloud · Aug 2, 2024 · 5f8ff23 · 5f8ff23
1 parent fef46e6
commit 5f8ff23
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 39 deletions.
diff --git a/packages/playground-nextjs/app/examples/page.tsx b/packages/playground-nextjs/app/examples/page.tsx
@@ -22,49 +22,44 @@ export default function Page({
   const showOutputBox = ex === 'events' || ex === 'all'
 
   return (
-    <main className="flex h-screen place-items-center justify-center p-4">
-      <div className="max-w-7xl min-w-[800px]">
-        <div className="text-center">
-          <h1 className="text-xl font-bold tracking-tight sm:text-3xl">
-            TiSQLEditor
-          </h1>
+    <main className="flex min-h-full items-center justify-center p-4">
+      <div className="max-w-7xl min-w-[800px] text-center">
+        <h1 className="text-xl font-bold tracking-tight sm:text-3xl">
+          TiSQLEditor
+        </h1>
 
-          <div className="mt-10 flex items-center gap-1">
-            <ExampleSelect />
-            <EditorThemeSelect />
-            <Button variant="ghost" size="icon">
-              <Link href={`/example?ex=${ex}&theme=${editorTheme}`}>
-                <FullscreenIcon className="h-4 w-4" />
-              </Link>
-            </Button>
+        <div className="mt-10 flex items-center gap-1">
+          <ExampleSelect />
+          <EditorThemeSelect />
+          <Button variant="ghost" size="icon">
+            <Link href={`/example?ex=${ex}&theme=${editorTheme}`}>
+              <FullscreenIcon className="h-4 w-4" />
+            </Link>
+          </Button>
 
-            <div className="mr-auto"></div>
+          <div className="mr-auto"></div>
 
-            <Button variant="outline">
-              <Link href={`/playground`}>Playground</Link>
-            </Button>
-            <Button variant="ghost" size="icon">
-              <a
-                href="https://github.com/tidbcloud/tisqleditor"
-                target="_blank"
-              >
-                <GithubIcon className="h-4 w-4" />
-              </a>
-            </Button>
-          </div>
+          <Button variant="outline">
+            <Link href={`/playground`}>Playground</Link>
+          </Button>
+          <Button variant="ghost" size="icon">
+            <a href="https://github.com/tidbcloud/tisqleditor" target="_blank">
+              <GithubIcon className="h-4 w-4" />
+            </a>
+          </Button>
+        </div>
 
-          <div
-            className={cn(
-              'mt-2 text-left',
-              showOutputBox ? 'h-[600px]' : 'h-[400px]'
-            )}
-          >
-            <DynamicEditorExample
-              example={ex}
-              theme={editorTheme}
-              withSelect={true}
-            />
-          </div>
+        <div
+          className={cn(
+            'mt-2 text-left',
+            showOutputBox ? 'h-[600px]' : 'h-[400px]'
+          )}
+        >
+          <DynamicEditorExample
+            example={ex}
+            theme={editorTheme}
+            withSelect={true}
+          />
         </div>
       </div>
     </main>

diff --git a/packages/playground-nextjs/app/globals.css b/packages/playground-nextjs/app/globals.css
@@ -73,4 +73,8 @@
   body {
     @apply bg-background text-foreground;
   }
+  html,
+  body {
+    @apply h-full;
+  }
 }