Canvas: Fix messages and details scrolling issues
Change-Id: Id7831f65b7e692c611228d5937412500c3beae21
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>
);
}