Merge pull request #26 from JBB0807/editor-layout

adjusted the layout

src/components/EditorPanel.jsx

@@ -8,9 +8,10 @@ export default function EditorPanel({ code, onChange }) {
       border: '1px solid #444',
       borderRadius: '8px',
       backgroundColor: '#1e1e1e',
-      height: '70vh',
-      boxShadow: '0 0 10px rgba(255, 0, 255, 0.2)',
-      overflow: 'hidden'
+      height: '65vh',
+      boxShadow: "0 0 12px #00bfff",
+      overflow: 'hidden',
+      marginTop: '45px'
     }}>
       <Editor
         height="100%"

src/components/PreviewPanel.jsx

@@ -26,7 +26,7 @@ export default function PreviewPanel({ code }) {
       display: 'flex',
       flexDirection: 'column',
       boxSizing: 'border-box',
-      height: '67vh',
+      height: '72vh',
       marginBorder : '1.5rem',
     }}>
       <div style={{
@@ -50,7 +50,7 @@ export default function PreviewPanel({ code }) {
         border: '1px solid #ff2a6d',
         borderRadius: '8px',
         padding: '0.2rem',
-        marginBottom: '1rem'
+        marginBottom: '1.2rem'
       }}>
         <input
           type="text"
@@ -61,7 +61,7 @@ export default function PreviewPanel({ code }) {
             width: '100%',
             textAlign: 'center',
             padding: '0.2rem',
-            marginBottom: '0.25rem',
+            marginBottom: '0.5rem',
             border: 'none',
             borderRadius: 4,
             background: 'transparent',
@@ -95,7 +95,9 @@ export default function PreviewPanel({ code }) {
 
       <div style={{
         flex: 1,
-        overflow: 'hidden',
+        overflow: 'auto',
+        flexDirection: 'column',
+        justifyContent: 'center',
         borderRadius: '8px',
         height: '100vh',
       }}>
@@ -103,7 +105,7 @@ export default function PreviewPanel({ code }) {
           <iframe
             src={`https://gameboard-service-aged-glitter-8141.fly.dev/?game=${encodeURIComponent(gameId)}&autoplay=false&showControls=true`}
             title="Battlesnake Board"
-            style={{ width: '100%', height: '100%', border: 'none' }}
+            style={{ width: '41vw', height: '85vh', border: 'none', paddingTop: '1rem', borderRadius: '8px' }}
             allowFullScreen
             scrolling="no"
           />

src/pages/CodeEditor.jsx

@@ -108,8 +108,8 @@ export default function PageCodeEditor() {
             borderRadius: "10px",
             padding: "1rem",
             color: "#eee",
-            minHeight: "30vh",
-            overflow: "auto"
+            height: "100%",
+            overflow: "auto",
           }}
         >
           <h3
@@ -124,7 +124,7 @@ export default function PageCodeEditor() {
             🐍 Snake Brain (Python)
           </h3>
           <EditorPanel code={code} onChange={setCode} />
-          <div style={{ marginTop: "1rem", display: "flex", flexDirection: "flex-end" }}>
+          <div style={{ marginTop: "1rem", display: "flex", flexDirection: "row", justifyContent: "center" }}>
             <button
               onClick={handleSave}
               disabled={isSaving}