fix: make layout more concrete with css grids

frontend/app/(app)/code/[id]/page.tsx

@@ -91,23 +91,17 @@ export default async function CodePage({ params }: { params: { id: string } }) {
   }
 
   return (
-    <>
-      <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
-        {/* <Room id={sandboxId}> */}
-          <TerminalProvider>
-            <Navbar
-              userData={userData}
-              sandboxData={sandboxData}
-              shared={
-                shared as { id: string; name: string; avatarUrl: string }[]
-              }
-            />
-            <div className="w-screen flex grow">
-              <CodeEditor userData={userData} sandboxData={sandboxData} />
-            </div>
-          </TerminalProvider>
-        {/* </Room> */}
+    <TerminalProvider>
+      {/* <Room id={sandboxId}> */}
+      <div className="overflow-hidden overscroll-none w-screen h-screen grid [grid-template-rows:3.5rem_auto] bg-background">
+        <Navbar
+          userData={userData}
+          sandboxData={sandboxData}
+          shared={shared as { id: string; name: string; avatarUrl: string }[]}
+        />
+        <CodeEditor userData={userData} sandboxData={sandboxData} />
       </div>
-    </>
+      {/* </Room> */}
+    </TerminalProvider>
   )
 }

frontend/app/globals.css

@@ -102,24 +102,24 @@
 .light .gradient-button-bg {
   background: radial-gradient(
     circle at top,
-    #f5f5f5 0%, /* Very light gray */
-    #e0e0e0 50%  /* Soft gray */
+    #f5f5f5 0%,
+    /* Very light gray */ #e0e0e0 50% /* Soft gray */
   );
 }
 
 .light .gradient-button {
   background: radial-gradient(
     circle at bottom,
-    hsl(0, 0%, 85%) -10%, /* Slightly darker gray */
-    hsl(0, 0%, 95%) 50%   /* Very soft light gray */
+    hsl(0, 0%, 85%) -10%,
+    /* Slightly darker gray */ hsl(0, 0%, 95%) 50% /* Very soft light gray */
   );
 }
 
 .light .gradient-button-bg > div:hover {
   background: radial-gradient(
     circle at bottom,
-    hsl(0, 0%, 80%) -10%, /* Slightly darker gray for hover */
-    hsl(0, 0%, 90%) 80%   /* Softer gray */
+    hsl(0, 0%, 80%) -10%,
+    /* Slightly darker gray for hover */ hsl(0, 0%, 90%) 80% /* Softer gray */
   );
 }