From b0d444980ad146bf7be2d6bb7369a04d0a3613b8 Mon Sep 17 00:00:00 2001
From: Hamzat Victor <oluwaborihamzat@gmail.com>
Date: Wed, 8 Jan 2025 23:03:51 +0100
Subject: [PATCH] fix: make layout more concrete with css grids

---
 frontend/app/(app)/code/[id]/page.tsx        | 28 ++++++++------------
 frontend/app/globals.css                     | 12 ++++-----
 frontend/components/editor/index.tsx         |  6 ++---
 frontend/components/editor/sidebar/index.tsx |  9 ++++---
 4 files changed, 25 insertions(+), 30 deletions(-)

diff --git a/frontend/app/(app)/code/[id]/page.tsx b/frontend/app/(app)/code/[id]/page.tsx
index 9ec40a5..3d553e4 100644
--- a/frontend/app/(app)/code/[id]/page.tsx
+++ b/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>
   )
 }
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index e1d1913..848528c 100644
--- a/frontend/app/globals.css
+++ b/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 */
   );
 }
 
diff --git a/frontend/components/editor/index.tsx b/frontend/components/editor/index.tsx
index 2460de4..c58a5be 100644
--- a/frontend/components/editor/index.tsx
+++ b/frontend/components/editor/index.tsx
@@ -980,9 +980,9 @@ export default function CodeEditor({
     )
 
   return (
-    <>
-      {/* Copilot DOM elements */}
+    <div className="flex max-h-full overflow-hidden">
       <PreviewProvider>
+        {/* Copilot DOM elements */}
         <div ref={generateRef} />
         <div ref={suggestionRef} className="absolute">
           <AnimatePresence>
@@ -1304,7 +1304,7 @@ export default function CodeEditor({
           )}
         </ResizablePanelGroup>
       </PreviewProvider>
-    </>
+    </div>
   )
 }
 
diff --git a/frontend/components/editor/sidebar/index.tsx b/frontend/components/editor/sidebar/index.tsx
index 6d2a2af..4763174 100644
--- a/frontend/components/editor/sidebar/index.tsx
+++ b/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]">
-        <div className="flex w-full items-center justify-between h-8 mb-1">
+      <ScrollArea className="flex-grow overflow-auto px-2 pt-0 pb-4 relative">
+        <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>
-      <div className="fixed bottom-0 w-48 flex flex-col p-2 bg-background">
+      </ScrollArea>
+      <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"