(fix)tool_calls/ui: overscrolling on opening diaglog (#2477)

This commit is contained in:
Manish Madan authored and GitHub committed 2026-05-18 00:37:57 +01:00
1 parent e167cf8247
commit e3bf6a5471
1 file changed
+15 -15
@@ -154,10 +154,10 @@ const ConversationBubble = forwardRef<
<img
src={DocumentationDark}
alt="Attachment"
className="h-[15px] w-[15px] object-fill"
className="h-3.75 w-3.75 object-fill"
/>
</div>
<span className="max-w-[150px] truncate font-normal">
<span className="max-w-37.5 truncate font-normal">
{file.fileName}
</span>
</div>
@@ -328,7 +328,7 @@ const ConversationBubble = forwardRef<
<div className="mb-4 flex flex-col flex-wrap items-start self-start lg:flex-nowrap">
<div className="my-2 flex flex-row items-center justify-center gap-3">
<Avatar
className="h-[26px] w-[30px] text-xl"
className="h-6.5 w-7.5 text-xl"
avatar={
<img
src={Sources}
@@ -376,7 +376,7 @@ const ConversationBubble = forwardRef<
<img
src={Document}
alt="Document"
className="h-[17px] w-[17px] object-fill"
className="h-4.25 w-4.25 object-fill"
/>
<p
className="mt-0.5 truncate text-xs"
@@ -394,11 +394,11 @@ const ConversationBubble = forwardRef<
</div>
{activeTooltip === index && (
<div
className={`dark:bg-card dark:text-foreground absolute left-1/2 z-50 max-h-48 w-40 translate-x-[-50%] translate-y-[3px] rounded-xl bg-[#FBFBFB] p-4 text-black shadow-xl sm:w-56`}
className={`dark:bg-card dark:text-foreground absolute left-1/2 z-50 max-h-48 w-40 translate-x-[-50%] translate-y-0.75 rounded-xl bg-[#FBFBFB] p-4 text-black shadow-xl sm:w-56`}
onMouseOver={() => setActiveTooltip(index)}
onMouseOut={() => setActiveTooltip(null)}
>
<p className="line-clamp-6 max-h-[164px] overflow-hidden rounded-md text-sm wrap-break-word text-ellipsis">
<p className="line-clamp-6 max-h-41 overflow-hidden rounded-md text-sm wrap-break-word text-ellipsis">
{source.text}
</p>
</div>
@@ -471,7 +471,7 @@ const ConversationBubble = forwardRef<
<div className="flex max-w-full flex-col flex-wrap items-start self-start lg:flex-nowrap">
<div className="my-2 flex flex-row items-center justify-center gap-3">
<Avatar
className="h-[34px] w-[34px] text-2xl"
className="h-8.5 w-8.5 text-2xl"
avatar={
<img
src={DocsGPT3}
@@ -1023,7 +1023,7 @@ function ToolCalls({
);
return (
<div className="mb-4 flex w-full flex-col flex-wrap items-start self-start lg:flex-nowrap">
<div className="mb-4 relative flex w-full flex-col flex-wrap items-start self-start lg:flex-nowrap">
{/* Approval bars — always visible, compact inline */}
{awaitingCalls.length > 0 && (
<div className="fade-in mt-4 ml-3 w-[90vw] md:w-[70vw] lg:w-full">
@@ -1042,7 +1042,7 @@ function ToolCalls({
<>
<div className="my-2 flex flex-row items-center justify-center gap-3">
<Avatar
className="h-[26px] w-[30px] text-xl"
className="h-6.5 w-7.5 text-xl"
avatar={
<img
src={Sources}
@@ -1089,7 +1089,7 @@ function ToolCalls({
</p>
<p className="dark:bg-card rounded-b-2xl p-2 font-mono text-sm wrap-break-word">
<span
className="dark:text-muted-foreground leading-[23px] text-black"
className="dark:text-muted-foreground leading-5.75 text-black"
style={{ fontFamily: 'IBMPlexMono-Medium' }}
>
{JSON.stringify(toolCall.arguments, null, 2)}
@@ -1117,7 +1117,7 @@ function ToolCalls({
{toolCall.status === 'completed' && (
<p className="dark:bg-card rounded-b-2xl p-2 font-mono text-sm wrap-break-word">
<span
className="dark:text-muted-foreground leading-[23px] text-black"
className="dark:text-muted-foreground leading-5.75 text-black"
style={{ fontFamily: 'IBMPlexMono-Medium' }}
>
{JSON.stringify(toolCall.result, null, 2)}
@@ -1127,7 +1127,7 @@ function ToolCalls({
{toolCall.status === 'error' && (
<p className="dark:bg-card rounded-b-2xl p-2 font-mono text-sm wrap-break-word">
<span
className="text-destructive leading-[23px]"
className="text-destructive leading-5.75"
style={{ fontFamily: 'IBMPlexMono-Medium' }}
>
{toolCall.error}
@@ -1137,7 +1137,7 @@ function ToolCalls({
{toolCall.status === 'denied' && (
<p className="dark:bg-card rounded-b-2xl p-2 font-mono text-sm wrap-break-word">
<span
className="text-muted-foreground leading-[23px]"
className="text-muted-foreground leading-5.75"
style={{ fontFamily: 'IBMPlexMono-Medium' }}
>
Denied by user
@@ -1172,7 +1172,7 @@ function Thought({
<div className="mb-4 flex w-full flex-col flex-wrap items-start self-start lg:flex-nowrap">
<div className="my-2 flex flex-row items-center justify-center gap-3">
<Avatar
className="h-[26px] w-[30px] text-xl"
className="h-6.5 w-7.5 text-xl"
avatar={
<img
src={Cloud}
@@ -1197,7 +1197,7 @@ function Thought({
</div>
{isThoughtOpen && (
<div className="fade-in mr-5 ml-2 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
<div className="bg-muted dark:bg-answer-bubble rounded-[28px] px-7 py-[18px]">
<div className="bg-muted dark:bg-answer-bubble rounded-[28px] px-7 py-4.5">
<ReactMarkdown
className="fade-in leading-normal wrap-break-word whitespace-pre-wrap"
remarkPlugins={[remarkGfm, remarkMath]}