Canvas: Fix messages and details scrolling issues
Change-Id: Id7831f65b7e692c611228d5937412500c3beae21
diff --git a/apps/canvas/front/src/App.css b/apps/canvas/front/src/App.css
index 31745d5..4444564 100644
--- a/apps/canvas/front/src/App.css
+++ b/apps/canvas/front/src/App.css
@@ -5,3 +5,7 @@
.react-flow__handle.valid {
background: #55dd99;
}
+
+body {
+ overflow: hidden;
+}
\ No newline at end of file
diff --git a/apps/canvas/front/src/App.tsx b/apps/canvas/front/src/App.tsx
index 0f59fb9..106e6f0 100644
--- a/apps/canvas/front/src/App.tsx
+++ b/apps/canvas/front/src/App.tsx
@@ -22,14 +22,14 @@
function AppImpl() {
return (
<Tabs defaultValue="canvas" className="flex-1 flex flex-col min-h-0">
- <div className="flex items-center justify-between border-b">
- <TabsList>
+ <div className="flex justify-between border-b">
+ <TabsList className="!rounded-none">
<TabsTrigger value="canvas">Canvas</TabsTrigger>
<TabsTrigger value="logs">Logs</TabsTrigger>
<TabsTrigger value="config">Config</TabsTrigger>
<TabsTrigger value="integrations">Integrations</TabsTrigger>
</TabsList>
- <ProjectSelect />
+ <ProjectSelect className="w-fit min-w-[150px]" />
</div>
<TabsContent value="canvas" className="!mt-0 flex-1 min-h-0">
<CanvasBuilder />
diff --git a/apps/canvas/front/src/Canvas.tsx b/apps/canvas/front/src/Canvas.tsx
index 453176c..3bdf00b 100644
--- a/apps/canvas/front/src/Canvas.tsx
+++ b/apps/canvas/front/src/Canvas.tsx
@@ -33,7 +33,7 @@
</ResizablePanelGroup>
</ResizablePanel>
<ResizableHandle withHandle />
- <ResizablePanel defaultSize={20}>
+ <ResizablePanel defaultSize={20} className="!overflow-y-auto">
<Details />
</ResizablePanel>
</ResizablePanelGroup>
diff --git a/apps/canvas/front/src/Config.tsx b/apps/canvas/front/src/Config.tsx
index b92e99e..9b410e1 100644
--- a/apps/canvas/front/src/Config.tsx
+++ b/apps/canvas/front/src/Config.tsx
@@ -5,7 +5,7 @@
export function Config() {
const store = useStateStore();
return (
- <div className="h-full p-4 bg-muted rounded-lg overflow-auto">
+ <div className="h-full p-4 bg-muted overflow-auto text-xs">
<JSONView
src={generateDodoConfig(store.projectId, store.nodes, store.env) as object}
theme="rjv-default"
diff --git a/apps/canvas/front/src/Logs.tsx b/apps/canvas/front/src/Logs.tsx
index 97718df..c27d420 100644
--- a/apps/canvas/front/src/Logs.tsx
+++ b/apps/canvas/front/src/Logs.tsx
@@ -117,7 +117,7 @@
{selectedService && (
<pre
ref={preRef}
- className="flex-1 h-full p-4 bg-muted rounded-lg overflow-auto font-['JetBrains_Mono'] whitespace-pre-wrap break-all"
+ className="flex-1 h-full p-4 bg-muted overflow-auto font-['JetBrains_Mono'] text-xs whitespace-pre-wrap break-all"
>
{cleanAnsiEscapeSequences(logs) || "No logs available"}
</pre>
diff --git a/apps/canvas/front/src/Messages.tsx b/apps/canvas/front/src/Messages.tsx
index c4683f2..e51cf44 100644
--- a/apps/canvas/front/src/Messages.tsx
+++ b/apps/canvas/front/src/Messages.tsx
@@ -40,7 +40,7 @@
setOpen([...grouped.keys()]);
}, [grouped, setOpen]);
return (
- <Accordion type="multiple" value={open} onValueChange={(v) => setOpen(v)}>
+ <Accordion type="multiple" value={open} onValueChange={(v) => setOpen(v)} className="h-full max-h-full">
{[...grouped.entries()].map(([id, messages]) => (
<AccordionItem key={id} value={id}>
<AccordionTrigger className="flex flex-row-reverse !gap-1 !justify-end !h-fit !py-0">
diff --git a/apps/canvas/front/src/ProjectSelect.tsx b/apps/canvas/front/src/ProjectSelect.tsx
index 5df5f6d..9b8bb45 100644
--- a/apps/canvas/front/src/ProjectSelect.tsx
+++ b/apps/canvas/front/src/ProjectSelect.tsx
@@ -8,12 +8,13 @@
import { Separator } from "./components/ui/separator";
import { Plus } from "lucide-react";
import { z } from "zod";
+import { cn } from "./lib/utils";
const createNewSchema = z.object({
id: z.string().min(1),
});
-export function ProjectSelect() {
+export function ProjectSelect({ className }: { className?: string }) {
const { toast } = useToast();
const store = useStateStore();
const [projects, setProjects] = useState<Project[]>([]);
@@ -127,7 +128,9 @@
return (
<>
<Select onValueChange={onSelect} value={selectedId}>
- <SelectTrigger className="w-[200px] !border-none !shadow-none !focus:ring-0 !focus:ring-offset-0">
+ <SelectTrigger
+ className={cn("!border-none", "!shadow-none", "!focus:ring-0", "!focus:ring-offset-0", className)}
+ >
<SelectValue placeholder="Choose Project" />
</SelectTrigger>
<SelectContent>
diff --git a/apps/canvas/front/src/Tootls.tsx b/apps/canvas/front/src/Tootls.tsx
index 2cf5d58..b60e55c 100644
--- a/apps/canvas/front/src/Tootls.tsx
+++ b/apps/canvas/front/src/Tootls.tsx
@@ -8,8 +8,8 @@
const messages = useMessages();
const env = useEnv();
return (
- <Tabs defaultValue="messages" className="w-[400px] px-5 w-full h-full">
- <TabsList>
+ <Tabs defaultValue="messages" className="h-full flex-1 flex flex-col bg-muted">
+ <TabsList className="!justify-start !rounded-none">
<TabsTrigger value="messages" className="space-x-2">
<div>Messages</div>
<Badge>{messages.length}</Badge>
@@ -17,13 +17,15 @@
<TabsTrigger value="deployment">Deployment</TabsTrigger>
<TabsTrigger value="deployKeys">Deploy keys</TabsTrigger>
</TabsList>
- <TabsContent value="messages">
- <Messages />
- </TabsContent>
- <TabsContent value="deployment">
- <Deployment />
- </TabsContent>
- <TabsContent value="deployKeys">{env && <>{env.deployKey}</>}</TabsContent>
+ <div className="!overflow-y-auto p-1">
+ <TabsContent value="messages">
+ <Messages />
+ </TabsContent>
+ <TabsContent value="deployment">
+ <Deployment />
+ </TabsContent>
+ <TabsContent value="deployKeys">{env && <>{env.deployKey}</>}</TabsContent>
+ </div>
</Tabs>
);
}
diff --git a/apps/canvas/front/src/components/details.tsx b/apps/canvas/front/src/components/details.tsx
index b7a0049..2f65601 100644
--- a/apps/canvas/front/src/components/details.tsx
+++ b/apps/canvas/front/src/components/details.tsx
@@ -42,7 +42,12 @@
const selected = useMemo(() => nodes.filter((n) => n.selected).map((n) => n.id), [nodes]);
const all = useMemo(() => open.concat(selected).filter(unique), [open, selected]);
return (
- <Accordion type="multiple" value={all} onValueChange={(v) => setOpen(v)}>
+ <Accordion
+ type="multiple"
+ value={all}
+ onValueChange={(v) => setOpen(v)}
+ className="flex flex-col overflow-y-auto"
+ >
{sorted.map((n, index) => (
<>
{index > 0 && <Separator className="my-2" />}