From ae4bc3e0a921684a020cee19e2e9e1f14960499b Mon Sep 17 00:00:00 2001
From: "Jaron (aider)" <jaron@fishhat.dev>
Date: Sat, 22 Feb 2025 23:11:34 -0600
Subject: [PATCH] feat: Adjust code example styling for dynamic height and
 responsive layout

---
 website/src/app/page.module.css               | 8 +++++++-
 website/src/components/CodeExample.module.css | 3 ++-
 website/src/components/CodeExample.tsx        | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/website/src/app/page.module.css b/website/src/app/page.module.css
index 6e7f1ae..d4d57ba 100644
--- a/website/src/app/page.module.css
+++ b/website/src/app/page.module.css
@@ -100,6 +100,12 @@
   pointer-events: none;
 }
 
+.hero > div:nth-child(2) {
+  flex: 1;
+  min-width: 45%;
+  height: 100%;
+}
+
 .code {
   font-family: var(--font-mono);
   font-size: 1em;
@@ -145,4 +151,4 @@
 
 .codeBlock code:focus-within {
   background: var(--gray-alpha-200);
-}
\ No newline at end of file
+}
diff --git a/website/src/components/CodeExample.module.css b/website/src/components/CodeExample.module.css
index dd9bd4b..f6be3c4 100644
--- a/website/src/components/CodeExample.module.css
+++ b/website/src/components/CodeExample.module.css
@@ -1,6 +1,7 @@
 .editorContainer {
     width: 100%;
-    height: 400px;
+    height: 100%;
+    min-height: 300px;
     border-radius: 8px;
     overflow: hidden;
     margin: 20px 0;
diff --git a/website/src/components/CodeExample.tsx b/website/src/components/CodeExample.tsx
index ab9e108..7f2c1dc 100644
--- a/website/src/components/CodeExample.tsx
+++ b/website/src/components/CodeExample.tsx
@@ -32,7 +32,7 @@ export default function CodeExample() {
     return (
         <div className={styles.editorContainer}>
             <Editor
-                height="400px"
+                height="100%"
                 defaultLanguage="typescript"
                 defaultValue={exampleCode}
                 theme="vs-dark"