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/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStep.tsx

@@ -7,6 +7,7 @@ import { useWorkflowRunIdOrThrow } from '@/workflow/hooks/useWorkflowRunIdOrThro
 import { WorkflowVersionComponentInstanceContext } from '@/workflow/states/context/WorkflowVersionComponentInstanceContext';
 import { useWorkflowSelectedNodeOrThrow } from '@/workflow/workflow-diagram/hooks/useWorkflowSelectedNodeOrThrow';
 import { WorkflowRunStepInputDetail } from '@/workflow/workflow-steps/components/WorkflowRunStepInputDetail';
+import { WorkflowRunStepOutputDetail } from '@/workflow/workflow-steps/components/WorkflowRunStepOutputDetail';
 import { WorkflowStepDetail } from '@/workflow/workflow-steps/components/WorkflowStepDetail';
 import { WORKFLOW_RUN_STEP_SIDE_PANEL_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-steps/constants/WorkflowRunStepSidePanelTabListComponentId';
 import { getWorkflowRunStepExecutionStatus } from '@/workflow/workflow-steps/utils/getWorkflowRunStepExecutionStatus';
@@ -39,7 +40,7 @@ export const CommandMenuWorkflowRunViewStep = () => {
       })
     : undefined;
 
-  const isInputTabDisabled =
+  const areInputAndOutputTabsDisabled =
     workflowSelectedNode === TRIGGER_STEP_ID ||
     stepExecutionStatus === 'running' ||
     stepExecutionStatus === 'not-executed';
@@ -50,9 +51,14 @@ export const CommandMenuWorkflowRunViewStep = () => {
       id: 'input',
       title: 'Input',
       Icon: IconLogin2,
-      disabled: isInputTabDisabled,
+      disabled: areInputAndOutputTabsDisabled,
+    },
+    {
+      id: 'output',
+      title: 'Output',
+      Icon: IconLogout,
+      disabled: areInputAndOutputTabsDisabled,
     },
-    { id: 'output', title: 'Output', Icon: IconLogout },
   ];
 
   if (!isDefined(workflowRun)) {
@@ -83,6 +89,10 @@ export const CommandMenuWorkflowRunViewStep = () => {
       {activeTabId === 'input' ? (
         <WorkflowRunStepInputDetail stepId={workflowSelectedNode} />
       ) : null}
+
+      {activeTabId === 'output' ? (
+        <WorkflowRunStepOutputDetail stepId={workflowSelectedNode} />
+      ) : null}
     </WorkflowVersionComponentInstanceContext.Provider>
   );
 };