Skip to content

Improve responsive design for decorative stars in password reset page #74

@coderabbitai

Description

@coderabbitai

Problem

The decorative stars in the password reset page (apps/web/src/app/reset/page.tsx) use hardcoded absolute positioning which may cause layout issues on mobile devices and different screen sizes.

Current Implementation

The stars are positioned using fixed values like top-20 left-10, top-40 right-20, etc., which don't adapt to different screen sizes.

Proposed Solution

Refactor the positioning to use percentage-based responsive positioning:

  • Use percentage values instead of fixed positioning (e.g., top-[10%] left-[5%])
  • Add pointer-events-none to prevent interaction issues
  • Ensure stars adapt gracefully to various screen sizes

Files Affected

  • apps/web/src/app/reset/page.tsx (lines 21-26)

References

Metadata

Metadata

Labels

Projects

Status

Todo

Relationships

None yet

Development

No branches or pull requests

Issue actions