fix: improve mobile responsiveness for workflows page

[KartikLabhshetwar]

What does this PR do?

• Fixes Mobile Responsiveness Issues on Workflows Page: Poor Layout and Text Overflow #24256
• Fixes CAL-6516

Visual Demo (For contributors especially)

Video Demo (if applicable):

before:

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

after:

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

Mandatory Tasks (DO NOT REMOVE)

• 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.
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

[vercel]

@KartikLabhshetwar is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/features/ee/workflows/pages/workflow.tsx (1)

474-474: LGTM: Button sizing and spacing improve mobile touch targets.

Adding size="sm" to both buttons makes them more compact and suitable for mobile. The gap-2 on the container provides consistent spacing.

However, the ml-3 on the delete button (line 482) seems redundant given the gap-2 on the parent container. Consider removing it for consistency.

Apply this diff to remove the redundant margin:

                 color="destructive"
                 type="button"
                 size="sm"
                 StartIcon="trash-2"
                 data-testid="delete-button"
-                className="ml-3"
                 onClick={() => {

Also applies to: 479-479, 482-482, 494-494

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 409a027 and 25d8371.

📒 Files selected for processing (1)

• packages/features/ee/workflows/pages/workflow.tsx (4 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/review.mdc)

Always use t() for text localization in frontend code; direct text embedding should trigger a warning

Files:

• packages/features/ee/workflows/pages/workflow.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/review.mdc)

Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js .utc() in hot paths like loops

Files:

• packages/features/ee/workflows/pages/workflow.tsx

**/*.{ts,tsx,js,jsx}

⚙️ CodeRabbit configuration file

Flag default exports and encourage named exports. Named exports provide better tree-shaking, easier refactoring, and clearer imports. Exempt main components like pages, layouts, and components that serve as the primary export of a module.

Files:

• packages/features/ee/workflows/pages/workflow.tsx

🧬 Code graph analysis (1)

packages/features/ee/workflows/pages/workflow.tsx (1)

packages/ui/components/button/Button.tsx (1)

• Button (221-349)

🔇 Additional comments (5)

packages/features/ee/workflows/pages/workflow.tsx (5)

414-414: LGTM: Responsive header padding improves mobile layout.

The reduction to px-2 on mobile and restoration to px-4 at the sm breakpoint provides more usable space on small screens while maintaining the original layout on larger devices.

---

415-415: LGTM: min-w-0 enables proper text truncation on mobile.

Setting min-w-0 allows the flex container's children to shrink below their intrinsic minimum width, which is essential for truncating long workflow names. The gap-2 provides consistent spacing between elements.

---

440-447: LGTM: Tooltip wrapper resolves title overflow on mobile.

Wrapping the workflow name in a Tooltip with truncate and responsive min-w-0 / sm:min-w-[100px] correctly handles long titles. Users can see the full name on hover when truncated, improving the mobile experience.

---

463-463: LGTM: Badge styling adjustments improve mobile compactness.

Reducing the left margin from ml-4 to ml-2, removing mt-1, and explicitly setting text-xs makes badges more compact and consistently sized, which is appropriate for mobile layouts.

Also applies to: 468-468

---

501-501: LGTM: Responsive container spacing optimizes mobile content area.

Reducing vertical margin to my-4 and adding horizontal padding px-2 on mobile provides more usable content space while preventing edge-to-edge content. The sm: breakpoint restores the original spacing on larger screens.

[KartikLabhshetwar]

hi @Udit-takkar can you please review this?

[KartikLabhshetwar]

@dhairyashiil

[Pallava-Joshi]

LGTM

[github-actions]

E2E results are ready!

• Workflow #90332.1 latest results

[Pallava-Joshi]

hey you don't need to keep pinging here, i've already approved the changes. the consumer team will take it from here. thanks :)

[KartikLabhshetwar]

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 :)

[Udit-takkar]

@KartikLabhshetwar Hey, you don't to update branch every single time. Reviewer can do this or do it once in two/three days

[SouravVerma-art]

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!

[cubic-dev-ai]

1 issue found across 1 file

Prompt for AI agents (all 1 issues)

Understand the root cause of the following 1 issues and fix them.


<file name="packages/features/ee/workflows/pages/workflow.tsx">

<violation number="1" location="packages/features/ee/workflows/pages/workflow.tsx:475">
Tooltip fallback diverges from the label’s loading state; please mirror the same conditional so the tooltip shows “loading” when data is pending.</violation>
</file>

_{React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.}

[Pallava-Joshi]

can you address cubic suggestions

[Pallava-Joshi]

i guess i tested this one already. someone from the consumer team will go through it. you can even help us by picking some medium and high priority issues though :)

[cubic-dev-ai]

No issues found across 1 file

some tests are failing now

[cubic-dev-ai]

No issues found across 12 files

[cubic-dev-ai]

No issues found across 1 file

[cubic-dev-ai]

No issues found across 1 file

[KartikLabhshetwar]

@dhairyashiil can you please review this once?

[cubic-dev-ai]

No issues found across 1 file