Mobile Responsiveness Issues on Workflows Page: Poor Layout and Text Overflow

[KartikLabhshetwar]

Issue Summary

The workflows page (/workflows) has significant mobile responsiveness issues that make it difficult to use on mobile devices. The main problems include poor layout stacking, text overflow issues with workflow titles, cramped form elements, and inadequate touch targets for mobile users.

Steps to Reproduce

1. Navigate to /workflows on a mobile device or browser dev tools mobile view
2. Try to create or edit a workflow
3. Observe the layout issues in the workflow form
4. Notice how long workflow names cause layout problems in the header
5. Attempt to interact with form elements and buttons

Any other relevant information. For example, why do you consider this a bug and what did you expect to happen instead?

Actual Results

Screen.Recording.2025-10-03.at.9.35.48.PM.mov

Expected Results

Screen.Recording.2025-10-03.at.9.40.15.PM.mov

Technical details

• packages/features/ee/workflows/pages/workflow.tsx
• Browser: All mobile browsers and responsive design modes
• Screen Sizes: Mobile devices (320px - 768px width)
• Framework: React with Tailwind CSS

Evidence

• Mobile view testing in browser dev tools
• Form layout issues visible on small screens
• Header title overflow problems with long workflow names
• Poor touch target accessibility on mobile devices

[linear]

CAL-6516