TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make layout more concrete with css grids

Browse Source
This commit is contained in:
Hamzat Victor 2025-01-08 23:03:51 +01:00
parent cfa9485e97
commit b0d444980a
4 changed files with 25 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>
)
}

12
frontend/app/globals.css
View File

@ -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 */
);
}

6
frontend/components/editor/index.tsx
View File

@ -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>
)
}

9
frontend/components/editor/sidebar/index.tsx
View File

@ -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"