fix: editor sizing

kaplayjs · Oct 17, 2024 · 50831ab · 50831ab
1 parent 11c48c4
commit 50831ab
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 34 deletions.
diff --git a/src/components/Playground/WorkspaceExample.tsx b/src/components/Playground/WorkspaceExample.tsx
@@ -15,38 +15,36 @@ type Props = {
 
 export const WorkspaceExample: FC<Props> = (props) => {
     return (
-        <>
-            <div
-                className={cn("h-full w-screen", {
-                    "hidden": props.editorIsLoading,
-                })}
-            >
-                <header className="h-[4%] flex">
-                    {props.isPortrait && <ToolbarToolsMenu /> || <Toolbar />}
-                </header>
+        <div
+            className={cn("h-full w-screen flex flex-col", {
+                "hidden": props.editorIsLoading,
+            })}
+        >
+            <header className="h-9 flex">
+                {props.isPortrait && <ToolbarToolsMenu /> || <Toolbar />}
+            </header>
 
-                <main className="h-[92%] lg:h-[96%] overflow-hidden">
-                    <Allotment
-                        vertical={props.isPortrait}
-                        defaultSizes={[0.5, 0.5]}
-                    >
-                        <Allotment.Pane snap>
-                            <MonacoEditor
-                                onMount={props.onMount}
-                            />
-                        </Allotment.Pane>
-                        <Allotment.Pane snap>
-                            <GameView />
-                        </Allotment.Pane>
-                    </Allotment>
-                </main>
+            <main className="h-full overflow-hidden">
+                <Allotment
+                    vertical={props.isPortrait}
+                    defaultSizes={[0.5, 0.5]}
+                >
+                    <Allotment.Pane snap>
+                        <MonacoEditor
+                            onMount={props.onMount}
+                        />
+                    </Allotment.Pane>
+                    <Allotment.Pane snap>
+                        <GameView />
+                    </Allotment.Pane>
+                </Allotment>
+            </main>
 
-                {props.isPortrait && (
-                    <footer className="h-[4%] flex justify-center items-center bg-base-300">
-                        <ExampleList />
-                    </footer>
-                )}
-            </div>
-        </>
+            {props.isPortrait && (
+                <footer className="h-10 flex justify-center items-center bg-base-300">
+                    <ExampleList />
+                </footer>
+            )}
+        </div>
     );
 };
diff --git a/src/components/Playground/WorkspaceProject.tsx b/src/components/Playground/WorkspaceProject.tsx
@@ -17,15 +17,15 @@ export const WorkspaceProject: FC<Props> = (props) => {
     return (
         <>
             <div
-                className={cn("h-full w-screen", {
+                className={cn("h-screen w-screen flex flex-col", {
                     "hidden": props.editorIsLoading,
                 })}
             >
-                <header className="h-[4%] flex">
+                <header className="h-9 flex">
                     <Toolbar />
                 </header>
 
-                <main className="h-[96%] overflow-hidden">
+                <main className="h-full overflow-hidden">
                     <Allotment
                         defaultSizes={[0.5, 2, 2]}
                         vertical={props.isPortrait}