Split workflow summary JSON into two on wide screens

[adhityamamallan]

Summary

• Add new props to WorkflowSummaryJsonView:
  • defaultTab: Default tab that is opened on load
  • hideTabToggle: Replaces the tab toggle with a static title when true
• Add two static title JSON views to workflow summary (one for input and one for result) that show up only on wide screens
• Show the result by default for a completed workflow on narrower screens where we don't show both input and result

Test plan

Updated unit tests + ran locally.

Completed workflow

Running workflow

[Copilot]

Pull Request Overview

This PR enhances the WorkflowSummaryJsonView component to support responsive design by displaying JSON data differently on narrow vs. wide screens. On wide screens, it shows separate input and result views side-by-side, while on narrow screens it maintains the tabbed interface with improved default tab selection based on workflow state.

• Add new props defaultTab and hideTabToggle to WorkflowSummaryJsonView component
• Implement responsive layout with separate JSON panels for wide screens and a single tabbed panel for narrow screens
• Show result tab by default for completed workflows on narrow screens

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
workflow-summary.tsx	Updates layout to render three JSON view instances with responsive CSS classes and conditional default tabs
workflow-summary.styles.ts	Adds responsive CSS classes to show/hide JSON panels based on screen size
workflow-summary-json-view.types.ts	Defines new props for tab control and tab type definition
workflow-summary-json-view.tsx	Implements conditional rendering of tab toggle vs static title and dynamic tab generation
workflow-summary-json-view.styles.ts	Adds styling for static title display
workflow-summary-json-view.constants.tsx	Refactors tab options into a type-safe label mapping
workflow-summary-json-view.test.tsx	Adds comprehensive test coverage for new props and behavior
workflow-summary.test.tsx	Updates tests to verify multiple JSON view instances with correct props

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Assem-Uber]

Creating the hiding logic based on css, still renders what is inside. On wide screens now we have 2 JSONs showing by default + the unused hidden JSON.
this decreases what the page can handle to 1/3. Lets have a followup for changing this to be based on JS condition instead of css

[adhityamamallan]

Yup, I'll add an issue to track this. Do we currently have the capability to render based on screen width?