calcom
fix: improve mobile responsiveness for workflows page
What does this PR do?
- Fixes #24256
- Fixes CAL-6516
Visual Demo (For contributors especially)
Video Demo (if applicable):
before:
https://github.com/user-attachments/assets/3934b889-497f-4fa1-9b57-fa7526d13148
after:
https://github.com/user-attachments/assets/d0075d0e-e70c-4a0a-93a2-84aea2743251
Mandatory Tasks (DO NOT REMOVE)
- [x] I have self-reviewed the code (A decent size PR without self-review might be rejected).
- [ ] I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
- [x] I confirm automated tests are in place that prove my fix is effective or that my feature works.
@KartikLabhshetwar is attempting to deploy a commit to the cal Team on Vercel.
A member of the Team first needs to authorize it.
![vercel[bot] avatar](https://avatars.githubusercontent.com/in/8329?v=4 "Published by a pub.dev verified publisher"){kind=small}
Walkthrough
This change updates the Workflows page header and container layout for responsiveness. It adjusts horizontal/vertical spacing, switches to flexible min-widths (min-w-0, sm:min-w-[100px]), and wraps the non-edit name display in a Tooltip. Badge styles are refined (spacing and text size). The header action area is restructured into a flex container with gap-2; delete and save buttons now explicitly use size="sm" with updated spacing. Page wrapper spacing is reduced and made responsive (px-2, sm:px-0; my-4, sm:my-8). No changes were made to data fetching, mutations, or form schema logic.
Pre-merge checks and finishing touches
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | ⚠️ Warning | Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. | You can run @coderabbitai generate docstrings to improve docstring coverage. |
✅ Passed checks (4 passed)
| Check name | Status | Explanation |
|---|---|---|
| Title Check | ✅ Passed | The title clearly states that the pull request fixes mobile responsiveness issues on the workflows page and aligns with the primary change in the code, which focuses on layout and text adjustments for small screens. |
| Linked Issues Check | ✅ Passed | The changes implement the responsive padding, flexible min-width settings, truncation with tooltips, badge and button size adjustments, and layout spacing tweaks specified in both linked issues to resolve mobile layout stacking, title overflow, cramped form controls, and touch target sizing on the workflows page [#24256] and [CAL-6516]. |
| Out of Scope Changes Check | ✅ Passed | The pull request only includes UI layout and styling adjustments within packages/features/ee/workflows/pages/workflow.tsx to improve mobile responsiveness and does not introduce any unrelated functionality or changes beyond the objectives defined in the linked issues. |
| Description Check | ✅ Passed | The pull request description clearly references the relevant issues (#24256 and CAL-6516) and outlines the goal of improving mobile responsiveness on the workflows page. It includes before and after visual demos that demonstrate the layout and text adjustments implemented. This level of detail aligns with the raw summary of presentational and layout changes made in workflow.tsx. |
✨ Finishing touches
- [ ] 📝 Generate docstrings
🧪 Generate unit tests (beta)
- [ ] Create PR with unit tests
- [ ] Post copyable unit tests in a comment
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
![coderabbitai[bot] avatar](https://avatars.githubusercontent.com/in/347564?v=4 "Published by a pub.dev verified publisher"){kind=small}
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
hey you don't need to keep pinging here, i've already approved the changes. the consumer team will take it from here. thanks :)
hey you don't need to keep pinging here, i've already approved the changes. the consumer team will take it from here. thanks :)
? When I am updating the branch is it also showing you the notification?
Because I have never pinged you :)
@KartikLabhshetwar Hey, you don't to update branch every single time. Reviewer can do this or do it once in two/three days
@KartikLabhshetwar Hey, you don't to update branch every single time. Reviewer can do this or do it once in two/three days
Hi, @Udit-takkar will keep this mind from now on.
Sorry for the inconvenience caused.
Hi team, I noticed this issue doesn't appear to be addressed yet. I'm interested in working on a solution. If it's still available, please let me know if I can be assigned. Thanks!
Hi team, I noticed this issue doesn't appear to be addressed yet. I'm interested in working on a solution. If it's still available, please let me know if I can be assigned. Thanks!