Skip to content

fix: hide native browser reveal toggles on password inputs#421

Open
simranbali-ace04 wants to merge 1 commit into
aryandas2911:mainfrom
simranbali-ace04:fix/password-eye-redundancy
Open

fix: hide native browser reveal toggles on password inputs#421
simranbali-ace04 wants to merge 1 commit into
aryandas2911:mainfrom
simranbali-ace04:fix/password-eye-redundancy

Conversation

@simranbali-ace04
Copy link
Copy Markdown

Description

On the Login and Signup pages, there's a layout clash where modern browsers (like Edge and Chrome) force-render their native credential reveal toggles inside password fields. This results in two eye icons showing up simultaneously, causing layout overlapping and clipping inside the input wrapper. This PR overrides those default browser graphics to keep the UI clean and uniform.

Related Issue

Closes #339

Changes Made

  • Targeted browser-specific pseudo-elements (::-ms-reveal, ::-ms-clear, and webkit password toggles) globally in frontend/src/index.css.
  • Set their display properties to none to prevent forced native icons from breaking our custom Lucide-react buttons.

Screenshots

Layout clipping issue fixed

Checklist

  • I have read CONTRIBUTING.md
  • My branch follows the naming convention
  • I have tested this locally
  • Linting passes (npm run lint in frontend/)
  • No unrelated files were modified
  • Screenshots are attached

@simranbali-ace04
Copy link
Copy Markdown
Author

Hey @aryandas2911 , I have added this PR and fixed this assigned issue . Kindly review the PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

style: hide browser native password reveal icons to prevent overlap

1 participant