Fix/invisible text in inputfield - #115
Merged
krishkhinchi merged 4 commits intoJul 21, 2026
Merged
Conversation
🤖 CodeAnt AI — Review Status
Updated in place by CodeAnt AI · last 5 reviews |
github-actions
Bot
added
bug
📝 WalkthroughWalkthroughInput autofill selectors now set autofilled text to white and apply extended transitions for background and text color across standard and WebKit autofill states. ChangesAutofill styling
Estimated code review effort: 1 (Trivial) | ~3 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
github-actions
Bot
added
AI
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/styles/index.css`:
- Around line 287-291: Remove the blank lines between the declarations in the
affected stylesheet rule, specifically around -webkit-box-shadow,
-webkit-text-fill-color, and transition, so the declarations are contiguous and
Stylelint passes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 4455500f-2aff-4b98-b2ec-d66c6768f092
📒 Files selected for processing (1)
frontend/src/styles/index.css
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
Comment on lines
+283
to
+286
| input:-webkit-autofill, | ||
| input:-webkit-autofill:hover, | ||
| input:-webkit-autofill:focus, | ||
| input:-webkit-autofill:active { |
There was a problem hiding this comment.
Suggestion: This fix only targets :-webkit-autofill, so it will not apply in non-WebKit engines (for example Firefox, which uses different autofill styling behavior). As written, users on those browsers can still get unreadable autofilled credentials; add a cross-browser autofill selector strategy instead of WebKit-only rules. [incomplete implementation]
Severity Level: Major ⚠️
❌ Non-WebKit login autofill may have unreadable text.
⚠️ Accessibility inconsistent across supported browsers (Chrome vs Firefox).Steps of Reproduction ✅
1. Open the authentication UI in a non-WebKit browser (e.g., Firefox) and navigate to the
sign-in page implemented in `frontend/src/pages/SignIn.tsx:14-35`, which renders
`TextField` and `PasswordField` inputs with `autoComplete="email"` and
`autoComplete="current-password"` respectively.
2. Inspect the global CSS in `frontend/src/styles/index.css:283-292` where autofill
styling is defined only via WebKit-specific selectors: `input:-webkit-autofill`,
`input:-webkit-autofill:hover`, `input:-webkit-autofill:focus`,
`input:-webkit-autofill:active { ... }`.
3. Trigger browser autofill for the email and password fields on the sign-in or sign-up
forms (sign-up form uses the same field components with `autoComplete` attributes in
`frontend/src/pages/SignUp.tsx:86-117`) and observe that Firefox applies its own
`:-moz-autofill` styling while the WebKit-only CSS rules from `index.css` do not apply at
all.
4. Because the CSS does not target Firefox’s autofill pseudo-class, autofilled text uses
Firefox’s default colors against the dark themed backgrounds (`bg-white/[0.03]` in
`inputBase` at `frontend/src/components/auth/fields.tsx:11-15` and `--color-background:
#0C1220` at `index.css:33`), which can result in low-contrast or hard-to-read autofilled
credentials compared to the explicitly fixed, high-contrast WebKit behavior.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/styles/index.css
**Line:** 283:286
**Comment:**
*Incomplete Implementation: This fix only targets `:-webkit-autofill`, so it will not apply in non-WebKit engines (for example Firefox, which uses different autofill styling behavior). As written, users on those browsers can still get unreadable autofilled credentials; add a cross-browser autofill selector strategy instead of WebKit-only rules.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix| input:-webkit-autofill:hover, | ||
| input:-webkit-autofill:focus, | ||
| input:-webkit-autofill:active { | ||
| -webkit-box-shadow: 0 0 0 30px #0A0F1A inset !important; |
There was a problem hiding this comment.
Suggestion: The autofill background is hardcoded to #0A0F1A globally for every input, but the app uses multiple input background tokens/shades (surface-container, white/[0.04], #0C1220, etc.). This creates mismatched autofill patches and inconsistent rendering outside the login form; use the same theme token/background as each input context instead of a single fixed color. [incorrect variable usage]
Severity Level: Major ⚠️
⚠️ Autofilled docs search field background mismatches panel styling.
⚠️ Settings inputs show inconsistent colors when autofilled.Steps of Reproduction ✅
1. Note the global autofill override in `frontend/src/styles/index.css:283-292`, where
`input:-webkit-autofill` and its hover/focus/active variants are styled with
`-webkit-box-shadow: 0 0 0 30px #0A0F1A inset !important;`, effectively painting all
autofilled input backgrounds to a single hardcoded color.
2. Inspect other inputs in the app that use different themed backgrounds, such as the docs
search field in `frontend/src/pages/DocsPage.tsx:196-204` (`className` includes
`bg-white/[0.04]`) and settings text fields in `frontend/src/pages/Settings.tsx:4,8,18,22`
(`bg-surface-container`, `bg-surface-container-high`), which rely on theme tokens defined
in `index.css` (`--color-surface-container: #1c2026` at line 66, `--color-background:
#0C1220` at line 33).
3. In a WebKit-based browser (Chrome, Safari, Edge), trigger autofill on these non-auth
inputs: for example, autofill a previously saved CALLSIGN in `Settings.tsx:4` or use
browser autofill in the docs search input at `DocsPage.tsx:196-204`, and observe that the
global `input:-webkit-autofill` rule applies.
4. When autofill is applied, the inset box-shadow `#0A0F1A` from `index.css:287` overrides
the designed input backgrounds (e.g., the semi-transparent `bg-white/[0.04]` on the docs
search field or `bg-surface-container` on settings inputs), causing visually inconsistent
darker patches that no longer match their surrounding panels and theme tokens, even though
the original invisible-text bug being fixed exists only on the auth form.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/styles/index.css
**Line:** 287:287
**Comment:**
*Incorrect Variable Usage: The autofill background is hardcoded to `#0A0F1A` globally for every input, but the app uses multiple input background tokens/shades (`surface-container`, `white/[0.04]`, `#0C1220`, etc.). This creates mismatched autofill patches and inconsistent rendering outside the login form; use the same theme token/background as each input context instead of a single fixed color.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
There was a problem hiding this comment.
🧹 Nitpick comments (1)
frontend/src/styles/index.css (1)
286-290: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winSeparate prefixed and standard autofill selector lists.
If a supported browser does not parse
:autofill, the entire grouped selector rule can be discarded, including the working:-webkit-autofillselectors. Keep the prefixed and standard variants in separate rules, or use a forgiving selector construct after confirming browser support. (developer.mozilla.org)🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/styles/index.css` around lines 286 - 290, Separate the autofill selectors in the stylesheet into distinct prefixed and standard rule blocks so unsupported :autofill parsing cannot discard the working :-webkit-autofill styles. Preserve the existing declarations and selector coverage for both variants.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@frontend/src/styles/index.css`:
- Around line 286-290: Separate the autofill selectors in the stylesheet into
distinct prefixed and standard rule blocks so unsupported :autofill parsing
cannot discard the working :-webkit-autofill styles. Preserve the existing
declarations and selector coverage for both variants.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: b0f87cc8-8911-46e9-9346-94281bdeed24
📒 Files selected for processing (1)
frontend/src/styles/index.css
Contributor
Author
|
@krishkhinchi now you can safely merge this fix |
Contributor
Author
|
Please consider it under ECSoC26 |
ecsoc-sentinel
Bot
removed
the
ECSoC26-L1
ecsoc-sentinel
Bot
added
the
ECSoC26-L1
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
User description
Description
This PR resolves a critical UI accessibility issue on the login form where text becomes completely invisible when users paste credentials or use browser autofill.
Changes included:
:-webkit-autofillpseudo-class on input fields. Browsers natively force a light background with dark text on autofilled inputs, which clashed with the application's dark theme (#0A0F1A). This fix uses a massive insetbox-shadowto maintain the dark background and sets-webkit-text-fill-colorto white, ensuring that pasted or autofilled emails and passwords remain highly visible and readable.Related Issue
Fixes #113
Checklist
Screenshots / Screen Recordings
Video.Project.15.3.mp4
Breaking Changes
No breaking changes.
ECSoC26 Submission
ECSoC26-L1– BeginnerECSoC26-L2– IntermediateECSoC26-L3– AdvancedSummary by CodeRabbit
CodeAnt-AI Description
Keep autofilled login text visible
What Changed
Impact
✅ Readable login fields✅ Fewer autofill visibility issues✅ Clearer sign-in experience💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.
Greptile Summary
This PR improves the visibility of autofilled login credentials. The main changes are:
Confidence Score: 5/5
This looks safe to merge.
Important Files Changed
Reviews (2): Last reviewed commit: "fix:codeant-ai recommanded fix" | Re-trigger Greptile