Skip to content

Commit f51b020

Browse files
maticzavmaticzav
committed
Fix Agent Example Styling
1 parent c87ed7a commit f51b020

File tree

2 files changed

+15
-11
lines changed

2 files changed

+15
-11
lines changed

‎typescript/agent/src/app/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@ export default function RootLayout({
2626
<html lang="en">
2727
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
2828
<div className="fixed inset-0 w-full h-full flex flex-col items-center justify-center">
29-
<div className="absolute inset-0 w-full max-w-5xl mx-auto h-full border-l border-r border-dashed border-gray-400"></div>
29+
<div className="absolute inset-0 w-full max-w-11/12 md:max-w-5xl mx-auto h-full border-l border-r border-dashed border-gray-400"></div>
3030

3131
<div className="z-1 w-full border-t border-b border-dashed border-gray-400">
32-
<div className="max-w-5xl mx-auto h-[640px]">{children}</div>
32+
<div className="max-w-11/12 md:max-w-5xl mx-auto h-[calc(100vh-4rem)] md:h-[640px]">{children}</div>
3333
</div>
3434
</div>
3535
</body>

‎typescript/agent/src/app/page.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -85,21 +85,21 @@ export default function Home() {
8585
}, [messages]);
8686

8787
return (
88-
<div className="w-full h-full grid grid-cols-2">
89-
<div className="col-span-1">
90-
<div className="w-full h-full border-r border-dashed border-gray-400">
88+
<div className="w-full h-full grid grid-cols-1 grid-rows-2 md:grid-cols-2 md:grid-rows-1">
89+
<div className="col-span-1 row-span-1">
90+
<div className="w-full h-full border-b md:border-b-0 md:border-r border-dashed border-gray-400">
9191
{/* Placeholder */}
92-
<div className="w-full h-full flex items-center justify-center p-1">
92+
<div className="w-full h-full flex items-center justify-center">
9393
{liveUrl != null ? (
94-
<iframe src={liveUrl} className="w-full h-full border border-dashed border-gray-400" />
94+
<iframe src={liveUrl} className="w-full h-full border border-transparent" />
9595
) : (
9696
<Image src="/browseruse.svg" alt="logo" width={40} height={40} className="size-16 object-contain" />
9797
)}
9898
</div>
9999
</div>
100100
</div>
101-
<div className="col-span-1 h-full flex flex-col overflow-hidden">
102-
<Conversation className="flex-1 overflow-hidden">
101+
<div className="col-span-1 row-span-1 h-full flex flex-col overflow-hidden">
102+
<Conversation className="flex-1 overflow-hidden border-r border-transparent">
103103
<ConversationContent>
104104
{messages.map((message) => (
105105
<Message key={message.id} from={message.role}>
@@ -125,7 +125,7 @@ export default function Home() {
125125
isStreaming={status === "streaming"}
126126
>
127127
<ReasoningTrigger />
128-
<ReasoningContent>Starting task...</ReasoningContent>
128+
<ReasoningContent>Starting browser...</ReasoningContent>
129129
</Reasoning>
130130
);
131131
}
@@ -135,7 +135,11 @@ export default function Home() {
135135
}
136136

137137
return (
138-
<Reasoning key={`${message.id}-${i}`} className="w-full" isStreaming={status === "streaming"}>
138+
<Reasoning
139+
key={`${message.id}-${i}`}
140+
className="w-full mb-0"
141+
isStreaming={status === "streaming"}
142+
>
139143
<ReasoningTrigger />
140144
<ReasoningContent>{part.output.lastStep.nextGoal}</ReasoningContent>
141145
</Reasoning>

0 commit comments

Comments
 (0)