Fix: adjust button layout to prevent overlap in ZapPlanner

[kanishka0411]

Fixes #1816
Makes the "New Recurring Payment" button responsive by showing only the icon on smaller screens to prevent layout overlap.

Summary by CodeRabbit

• Style

  • Improved the ZapPlanner dialog trigger button’s responsive sizing and label visibility to better suit different screen sizes while preserving the icon.

• Chores

  • Added an accessibility label to the trigger for improved screen reader support and clarity.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

The ZapPlanner dialog trigger Button gains accessibility and responsive tweaks: an aria-label="New Recurring Payment", a className="max-lg:size-9", and the visible label text is moved into a <span class="hidden lg:inline"> so only the icon shows on small screens.

Changes

Cohort / File(s)	Summary
Responsive Button UI frontend/src/screens/internal-apps/ZapPlanner.tsx	Added aria-label="New Recurring Payment"; added className="max-lg:size-9" to Button; wrapped visible label text in <span class="hidden lg:inline"> so text hides on small screens while icon remains.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A button with charm, snug and light,
It whispers its label only in sight,
On tiny screens it stays concise,
On wide horizons shows words twice,
I hop with joy—responsive delight! 🥕

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: making the ZapPlanner button responsive and preventing layout overlap, which aligns with the PR's objective of showing only the icon on smaller screens.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/src/screens/internal-apps/ZapPlanner.tsx`:
- Around line 358-362: The icon-only Button with PlusCircleIcon and className
"max-lg:size-9" lacks an accessible name on small screens; add an accessible
label by adding aria-label="New Recurring Payment" to the Button element (or
alternatively include a screen-reader-only span such as <span
className="sr-only">New Recurring Payment</span>) while keeping the visible
<span className="hidden lg:inline"> for large screens so the button remains
accessible to assistive tech.

[rolznz]

@kanishka0411 thanks for the PR. Could you add "Fixes # (issue number)" in the description?

[kanishka0411]

Done