Fix: Action button in the WhatsApp

[ankit-mehta07]

Summary

This PR fixes a UI alignment issue in WhatsApp (WA) forms where the action buttons were right-aligned.

To ensure consistency across the platform, the action buttons are now left-aligned, matching the layout and styling used in other forms.

Fixes #3677

Test Plan

• Ran yarn in the repository root
• Started the application locally
• Verified all WhatsApp form action buttons are left-aligned
• Confirmed alignment matches other forms
• Checked for any UI regressions

Summary by CodeRabbit

• Style
  • Updated the "Interactive Msg" menu item label formatting for improved visual consistency
  • Adjusted the Actions column alignment in the WhatsApp Forms list for better layout presentation

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This PR addresses UI/UX alignment consistency by making two updates: capitalizing the menu item text from "Interactive msg" to "Interactive Msg" in the menu configuration, and changing the horizontal alignment of the Actions column in WhatsApp Forms from right-aligned (end) to left-aligned (start) to match alignment patterns used elsewhere in the platform.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• WhatsApp Forms: Add UI for listing WhatsApp flows #3615: Modifies the same WhatsAppFormList.module.css file and specifically targets the .Actions alignment definition
• Whatsapp forms cleanup #3629: Updates the WhatsAppFormList CSS module with broader class modifications in the same file
• Whatsapp Forms #3624: Introduces and defines the WhatsAppFormList CSS module that is being refined in this PR

Suggested labels

status: ready for review

Suggested reviewers

• priyanshu6238
• shijithkjayan

Poem

🐰 A rabbit hops through code so neat,
One letter uppercase, the text complete,
The Actions now align left-wise,
UI polish, clean and precise,
Consistency blooms in every place! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The capitalization change to 'Interactive Msg' in src/config/menu.ts is unrelated to the linked issue #3677 which focuses on WhatsApp form action button alignment.	Remove the menu title capitalization change from this PR or address it in a separate PR focused on menu updates.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title mentions 'Action button in the WhatsApp' but does not clearly specify the core change: fixing alignment from right to left. It also does not mention the menu capitalization change.
Linked Issues check	✅ Passed	The PR addresses issue #3677 by changing the WhatsApp form action buttons from right-aligned to left-aligned via CSS modification, meeting the primary requirement. The menu capitalization change appears unrelated to the linked issue.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bc2d8fd and f299d5a.

📒 Files selected for processing (2)

• src/config/menu.ts
• src/containers/WhatsAppForms/WhatsAppFormList/WhatsAppFormList.module.css

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx}

⚙️ CodeRabbit configuration file

Review the Typescript and React code for conformity with best practices in React, Recoil, Graphql, and Typescript. Highlight any deviations.

Files:

• src/config/menu.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Codacy Static Code Analysis

🔇 Additional comments (2)

src/config/menu.ts (1)

132-132: LGTM! Capitalization improves consistency.

The change from "Interactive msg" to "Interactive Msg" aligns with the capitalization pattern used in other menu items throughout the configuration.

src/containers/WhatsAppForms/WhatsAppFormList/WhatsAppFormList.module.css (1)

27-27: Change is correct and covers all WhatsApp form action buttons.

The alignment change from end to start correctly implements left-alignment for action buttons. Verification confirms that the .Actions class exists only in WhatsAppFormList.module.css (the list view displaying multiple forms), and the detail view component (WhatsAppForm) does not have action button styling. This single CSS change covers all action buttons in the WhatsApp forms module.

---

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.}

[priyanshu6238]

Hi @ankit-mehta07 , thanks for the update
Could you please remove these changes? They were already addressed in PR #3708, so we don’t need to include them again here.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 82.73%. Comparing base (22d93bd) to head (076411f).

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3709      +/-   ##
==========================================
- Coverage   82.81%   82.73%   -0.08%     
==========================================
  Files         317      317              
  Lines       11852    11852              
  Branches     2485     2485              
==========================================
- Hits         9815     9806       -9     
- Misses       1285     1295      +10     
+ Partials      752      751       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.