Add a dir="rtl" Playwright smoke test rendering the dashboard shell without clipped content

[Jagadeeshftw]

Description

No automated test currently renders any part of the app with dir="rtl" set, so regressions in RTL readiness (overflow, misaligned icons, clipped text) would only be caught manually, if at all, ahead of eventual locale support.

Requirements and context

• Add a Playwright spec that forces dir="rtl" on the html element and loads the dashboard route
• Assert no element overflows its container and no text is visually clipped
• Capture a screenshot artifact for manual visual review on failure
• Must be accessible (WCAG 2.1 AA), responsive, and consistent with existing design tokens
• Should be tested and easy to review

Suggested execution

Fork the repo and create a branch

git checkout -b test/rtl-dashboard-smoke

Implement changes

• Update/Write component(s): app/layout.tsx
• Add/Update tests: tests/dashboard-rtl.spec.ts
• Add documentation: CONTRIBUTING.md
• Annotate accessibility (contrast, keyboard nav, ARIA)
• Validate responsive behavior across breakpoints (sm 640, md 768, lg 1024, xl 1280)

Test and commit

• Run tests: pnpm test (or the repo's test command)
• Cover edge cases (empty/error/loading states, long text, RTL, dark mode)
• Include before/after screenshots and accessibility notes

Example commit message

test: add an RTL smoke test for the dashboard shell

Guidelines

• WCAG 2.1 AA compliance
• Clear documentation and spec hand-off
• Timeframe: 96 hours

[Emelie-Dev]

@Emelie-Dev has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi, I would love to work on this issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Emelie-Dev to this issue.

[drips-wave]

Congratulations, @Emelie-Dev! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @Emelie-Dev: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been marked as completed by a Drips Wave moderator for @Emelie-Dev as part of the Stellar Wave Program's 7th Wave 🥳

Moderator's reason: [Auto-assessed] The contributor provided a high-quality, comprehensive Playwright test suite in PR #1138 that implements all issue requirements, including custom logic for detecting RTL-specific layout regressions and text clipping across multiple breakpoints. The only failing CI check is a Vercel deployment authorization requirement which is outside the contributor's control, and there are no maintainer objections across any channel.

😎 @Emelie-Dev: You earned 400 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.

ℹ️ Note: This issue was marked complete via moderation. Points were issued even though the GitHub issue remains open.

[grainlify]

@Emelie-Dev was removed as assignee: no matching application for this issue was found on Grainlify. Maintainers can only assign contributors who applied through the platform.