fixed styling

Author: BakedAlaskaTM

package-lock.json

@@ -17,7 +17,7 @@ export default function LevelComponent({ onClose, lvl }: LevelProps) {
   };
   const seed = lvl*71 - 10;
   return (
-    <>
+    <div className="flex items-center justify-center min-h-screen w-full container">
       <style>{`
         @keyframes expandDown {
           from { transform: scaleY(0); }
@@ -35,26 +35,27 @@ export default function LevelComponent({ onClose, lvl }: LevelProps) {
           animation: collapseUp 0.2s ease-in forwards;
           transform-origin: center;
         }
+        .container {
+          position: absolute;
+          z-index: 1000;
+          margin: 0px;
+        }
       `}</style>
       <div
-        className={`${isClosing ? 'collapse-up' : 'expand-down'} w-screen h-screen flex gap-10 p-4 font-mono overflow-hidden`}
+        className={`${isClosing ? 'collapse-up' : 'expand-down'} w-4/5 h-screen flex gap-10 p-4 font-mono overflow-hidden`}
         onAnimationEnd={handleAnimationEnd}
       >
         {/* X button */}
         <button
           onClick={handleClose}
-          className="absolute top-9 right-36 text-white text-xl leading-none"
+          className="absolute top-9 right-10 text-white text-xl leading-none"
         >
           ✕
         </button>
 
-        <div className="flex-1 bg-[#2a2a2a] rounded-2xl p-3 flex flex-col gap-3">
-          <InfoComponent seed={seed}/>
-        </div>
-        <div className="flex-1 bg-[#2a2a2a] rounded-2xl p-3 flex flex-col gap-3">
-          <OutputComponent seed={seed} />
-        </div>
+        <InfoComponent seed={seed}/>
+        <OutputComponent seed={seed} />
       </div>
-    </>
+    </div>
   );
 }

src/components/LevelComponent.tsx

@@ -83,7 +83,7 @@ nums = [1, 2, 3]
   }
 
   return (
-    <div className="flex-1 p-3 flex flex-col gap-3">
+    <div className="flex-1 bg-[#2a2a2a] p-3 rounded-2xl flex flex-col gap-3">
         {/* Editor */}
         <textarea
         value={code}

src/components/OutputComponent.tsx

@@ -1,13 +1,3 @@
-* {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    vertical-align: baseline;
-    overflow: hidden;
-    /* outline: 1px solid red !important; */
-}
-
 html, body {
     width: 100%;
     height: 100%;
@@ -37,6 +27,9 @@ header {
 
 }
 
+.cleardiv {
+    clear: both;
+}
 
 .solarsystem {
     width: 100%;
@@ -46,6 +39,18 @@ header {
 }
 
 button {
-    z-index: 10000;
+    z-index: 100;
     color: white;
-}
+}
+
+/*
+{
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+    overflow: hidden;
+    // outline: 1px solid red !important;
+}
+*/

src/pages/home/Home.module.css

@@ -24,24 +24,24 @@ export default function Home() {
 
     return (
         <div>
-            <button className="ml-100 mt-80 absolute border-4 rounded-3xl p-5" onClick={handleOpen} disabled={isVisible}>
-                Glorp
-            </button>
-            {isVisible && (
-                <LevelComponent
-                key={mountKey}
-                onClose={() => setIsVisible(false)}
-                lvl={lvlNum}
-                />
-            )}
-
             <header>
                 <div className={styles["header-brand"]}>
                     <h1>glorpython</h1>
                 </div>
             </header>
-
-            <canvas ref={canvasRef} className={styles.solarsystem}></canvas>
+            <button className="ml-5 mt-5 absolute border-4 rounded-3xl p-5" onClick={handleOpen} disabled={isVisible}>
+                Glorp
+            </button>
+            <section className="">
+                {isVisible && (
+                    <LevelComponent
+                    key={mountKey}
+                    onClose={() => setIsVisible(false)}
+                    lvl={lvlNum}
+                    />
+                )}
+                <canvas ref={canvasRef} className={styles.solarsystem}></canvas>
+            </section>
         </div>
     );
 }