From 54815196c158bbfed5e6d7a4c7e41458ed46707b Mon Sep 17 00:00:00 2001
From: Abdul Rahman <81605929+abdulrahmancodes@users.noreply.github.com>
Date: Fri, 7 Nov 2025 18:01:05 +0530
Subject: [PATCH] Improve AI Tool Step Renderer Layout and JSON Tree Scrolling
 (#15698)

### Before


https://github.com/user-attachments/assets/a222a6ff-550c-453b-bc0b-ee9bdb925956


### After



https://github.com/user-attachments/assets/249b7097-8dc1-4611-8205-2a43cb015a33
---
 .../ai/components/ToolStepRenderer.tsx        | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/twenty-front/src/modules/ai/components/ToolStepRenderer.tsx b/packages/twenty-front/src/modules/ai/components/ToolStepRenderer.tsx
index 5892d5c250..5b47d2476b 100644
--- a/packages/twenty-front/src/modules/ai/components/ToolStepRenderer.tsx
+++ b/packages/twenty-front/src/modules/ai/components/ToolStepRenderer.tsx
@@ -29,9 +29,18 @@ const StyledLoadingContainer = styled.div`
 
 const StyledContentContainer = styled.div`
   background: ${({ theme }) => theme.background.transparent.lighter};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  padding: ${({ theme }) => theme.spacing(3)};
   border: 1px solid ${({ theme }) => theme.border.color.light};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  min-width: 0;
+  padding: ${({ theme }) => theme.spacing(3)};
+`;
+
+const StyledJsonTreeContainer = styled.div`
+  overflow-x: auto;
+
+  ul {
+    min-width: 0;
+  }
 `;
 
 const StyledToggleButton = styled.div<{ isExpandable: boolean }>`
@@ -88,11 +97,6 @@ const StyledTab = styled.div<{ isActive: boolean }>`
   }
 `;
 
-const StyledJsonContainer = styled.div`
-  max-height: 400px;
-  overflow: auto;
-`;
-
 type TabType = 'output' | 'input';
 
 export const ToolStepRenderer = ({ toolPart }: { toolPart: ToolUIPart }) => {
@@ -108,8 +112,6 @@ export const ToolStepRenderer = ({ toolPart }: { toolPart: ToolUIPart }) => {
   const hasError = isDefined(errorText);
   const isExpandable = isDefined(output) || hasError;
 
-  const isTwoFirstDepths = ({ depth }: { depth: number }) => depth < 2;
-
   if (!output && !hasError) {
     return (
       <StyledContainer>
@@ -159,10 +161,10 @@ export const ToolStepRenderer = ({ toolPart }: { toolPart: ToolUIPart }) => {
       </StyledToggleButton>
 
       {isExpandable && (
-        <AnimatedExpandableContainer isExpanded={isExpanded}>
+        <AnimatedExpandableContainer isExpanded={isExpanded} mode="fit-content">
           <StyledContentContainer>
             {hasError ? (
-              <StyledJsonContainer>{errorText}</StyledJsonContainer>
+              errorText
             ) : (
               <>
                 <StyledTabContainer>
@@ -180,12 +182,12 @@ export const ToolStepRenderer = ({ toolPart }: { toolPart: ToolUIPart }) => {
                   </StyledTab>
                 </StyledTabContainer>
 
-                <StyledJsonContainer>
+                <StyledJsonTreeContainer>
                   <JsonTree
                     value={
                       (activeTab === 'output' ? result : input) as JsonValue
                     }
-                    shouldExpandNodeInitially={isTwoFirstDepths}
+                    shouldExpandNodeInitially={() => false}
                     emptyArrayLabel={t`Empty Array`}
                     emptyObjectLabel={t`Empty Object`}
                     emptyStringLabel={t`[empty string]`}
@@ -193,7 +195,7 @@ export const ToolStepRenderer = ({ toolPart }: { toolPart: ToolUIPart }) => {
                     arrowButtonExpandedLabel={t`Collapse`}
                     onNodeValueClick={copyToClipboard}
                   />
-                </StyledJsonContainer>
+                </StyledJsonTreeContainer>
               </>
             )}
           </StyledContentContainer>