fix(web): compact plan questionnaire navigation buttons

[nassimna]

Summary

• replace the plan questionnaire's text-heavy previous/next controls with compact icon buttons in the composer footer
• keep the final action explicit with a compact Submit button that includes a check icon
• add a narrow-viewport browser regression to verify the questionnaire controls stay inside the composer bounds

Problem

The plan questionnaire footer was using full text labels like Previous, Next question, and Submit answers inside the composer action row. On narrower widths, those controls could push outside the composer container and break the layout.

Solution

Switch the intermediate questionnaire navigation to icon-only chevron buttons with accessible aria-labels, and shorten the final action to Submit with a check icon. This preserves the existing questionnaire behavior and disabled states while reducing the action row footprint enough to stay within the composer on narrow viewports.

Testing

• bun lint
• bun typecheck
• bun run test:browser -- src/components/ChatView.browser.tsx

Screenshots

Provided in the request context during PR preparation.

Included states:

• step 2 of 3 showing the compact chevron next button inside the composer footer
• step 3 of 3 showing the compact previous chevron plus Submit button inside the composer footer

Note

Make compact questionnaire navigation in ChatView render icon-only previous/next controls with aria-labels and a Submit button at narrow widths in ChatView.tsx

Update pending-user-input controls to use ChevronLeftIcon and ChevronRightIcon with aria-labels, reduce gap from 2 to 1.5, and show CheckIcon with "Submit" on the final step; add snapshot/test utilities and an integration test in ChatView.browser.tsx.

📍Where to Start

Start with the pending-user-input controls in ChatView in ChatView.tsx, then review the compact UI test in ChatView.browser.tsx.

^{Macroscope summarized 260c0ec.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 54be89dd-963e-4cd8-9fa4-da877e0c6a60

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

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

[maria-rcks]

#706