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>
+      {/* <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={shared as { id: string; name: string; avatarUrl: string }[]}
-                shared as { id: string; name: string; avatarUrl: string }[]
-              }
         />
-            <div className="w-screen flex grow">
         <CodeEditor userData={userData} sandboxData={sandboxData} />
       </div>
-          </TerminalProvider>
       {/* </Room> */}
-      </div>
+    </TerminalProvider>
-    </>
   )
 }

frontend/app/globals.css

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

frontend/components/editor/index.tsx

@@ -980,9 +980,9 @@ export default function CodeEditor({
     )
 
   return (
-    <>
+    <div className="flex max-h-full overflow-hidden">
-      {/* Copilot DOM elements */}
       <PreviewProvider>
+        {/* Copilot DOM elements */}
         <div ref={generateRef} />
         <div ref={suggestionRef} className="absolute">
           <AnimatePresence>
@@ -1304,7 +1304,7 @@ export default function CodeEditor({
           )}
         </ResizablePanelGroup>
       </PreviewProvider>
-    </>
+    </div>
   )
 }
 

frontend/components/editor/sidebar/index.tsx

@@ -9,6 +9,7 @@ import SidebarFolder from "./folder"
 import New from "./new"
 
 import { Button } from "@/components/ui/button"
+import { ScrollArea } from "@/components/ui/scroll-area"
 import { Skeleton } from "@/components/ui/skeleton"
 import { cn, sortFileExplorer } from "@/lib/utils"
 import {
@@ -104,8 +105,8 @@ export default function Sidebar({
 
   return (
     <div className="h-full w-56 select-none flex flex-col text-sm">
-      <div className="flex-grow overflow-auto p-2 pb-[84px]">
+      <ScrollArea className="flex-grow overflow-auto px-2 pt-0 pb-4 relative">
-        <div className="flex w-full items-center justify-between h-8 mb-1">
+        <div className="flex w-full items-center justify-between h-8 pb-1 isolate z-10 sticky pt-2 top-0 bg-background">
           <div className="text-muted-foreground">Explorer</div>
           <div className="flex space-x-1">
             <button
@@ -179,8 +180,8 @@ export default function Sidebar({
             </>
           )}
         </div>
-      </div>
+      </ScrollArea>
-      <div className="fixed bottom-0 w-48 flex flex-col p-2 bg-background">
+      <div className="flex flex-col p-2 bg-background">
         <Button
           variant="ghost"
           className="w-full justify-start text-sm text-muted-foreground font-normal h-8 px-2 mb-2"