fix(ui): resolve multiple UI/UX issues - Fix sidebar stuck state when…

[krishna9358]

Summary

This PR fixes 4 critical UI/UX issues reported in the Studio interface, improving sidebar behavior, secret selection, layout responsiveness, and keyboard shortcuts.

Issues Fixed

1. Sidebar Stuck When Opening Link in New Tab (CMD+Click)
   Problem: The sidebar would expand and get stuck in an "open" state when a user CMD+clicked a link (e.g., "Secrets") to open it in a new tab. This happened because the click event triggered the route change logic before the browser opened the new tab. Solution:

Added a check in the navigation onClick handler to ignore state updates if modifier keys (CMD, Ctrl, Shift) are pressed.
Added event listeners (blur, visibilitychange) to auto-collapse the sidebar if the window loses focus while hovering. File: src/components/layout/AppLayout.tsx

2. Secret Selection Clearing Issue
   Problem: Clicking the clear (X) button or "Clear Selection" in a secret dropdown did not clear the value. The selection would momentarily clear and then immediately revert to the previous value. Root Cause:

SecretSelect
onChange prop type was too strict (string instead of string | undefined).
ParameterField
had an auto-migration useEffect that treated undefined as an invalid value and automatically re-selected the first available secret. Solution:
Updated
SecretSelect
to accept undefined in onChange.
Added stopPropagation and preventDefault to partial-fix focus issues in dropdown.
Modified the auto-migration logic in
ParameterField
to ONLY run for non-empty string values (legacy name references), preventing it from overriding intentional clears. Files:
src/components/inputs/SecretSelect.tsx
,
src/components/inputs/LeanSelect.tsx
,
src/components/workflow/ParameterField.tsx
,
src/components/workflow/ConfigPanel.tsx

3. TopBar Layout Overlap
   Problem: The Design/Execute toggle and action buttons overlapped or misaligned when the sidebar opened/closed because of absolute positioning. Solution: Refactored the TopBar layout to use Flexbox (flex-1, justify-center) instead of absolute positioning (left-1/2), ensuring components flow correctly without overlap regardless of available width. File: src/components/layout/TopBar.tsx

4. Text Input Undo/Redo Conflict
   Problem: Pressing Cmd+Z/Cmd+Shift+Z while editing text inputs (e.g., node names) triggered the workflow graph undo/redo instead of the browser's native text undo. Solution: Added a check in the global keyboard handler to skip custom undo/redo logic if the active element is a text input, textarea, or contenteditable. File: src/features/workflow-builder/WorkflowBuilder.tsx

Testing

• bun run test
• bun run lint
• bun run typecheck
• Additional notes:

Documentation

• Updated the relevant doc(s) (see docs/guide.md) or checked that no updates are needed.
• Recorded contract/architecture changes in both public docs and .ai logs when applicable.

[chatgpt-codex-connector]

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.