Handle JSON viewer empty states (#10750)

- Display the number of descendants for object and array elements
- Display an empty state for arrays and objects
- Make the input and output visualizer scrollable horizontally 
  - Prevent JSON visualizer's text to wrap

## Demo: input


https://github.com/user-attachments/assets/d6bd6acf-a779-4fc7-a8b1-12b857cee7f9

Closes https://github.com/twentyhq/core-team-issues/issues/497

packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowRunStepInputDetail.tsx

@@ -7,6 +7,8 @@ import { isDefined } from 'twenty-shared';
 import { IconBrackets } from 'twenty-ui';
 
 const StyledContainer = styled.div`
+  display: grid;
+  overflow-x: auto;
   padding-block: ${({ theme }) => theme.spacing(4)};
   padding-inline: ${({ theme }) => theme.spacing(3)};
 `;
@@ -31,6 +33,10 @@ export const WorkflowRunStepInputDetail = ({ stepId }: { stepId: string }) => {
     stepId,
   });
 
+  if (stepContext.length === 0) {
+    throw new Error('The input tab must be rendered with a non-empty context.');
+  }
+
   return (
     <StyledContainer>
       <JsonNestedNode
@@ -40,6 +46,7 @@ export const WorkflowRunStepInputDetail = ({ stepId }: { stepId: string }) => {
           value: context,
         }))}
         Icon={IconBrackets}
+        emptyElementsText=""
         depth={0}
       />
     </StyledContainer>

packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowRunStepOutputDetail.tsx

@@ -5,6 +5,8 @@ import styled from '@emotion/styled';
 import { isDefined } from 'twenty-shared';
 
 const StyledContainer = styled.div`
+  display: grid;
+  overflow-x: auto;
   padding-block: ${({ theme }) => theme.spacing(4)};
   padding-inline: ${({ theme }) => theme.spacing(3)};
 `;