fix(input): autofill bg overlap on focus border (#DS-4950)#1518
Merged
Conversation
|
Visit the preview URL for this PR (updated for commit 03675db): https://koobiq-next--prs-1518-ivbae58h.web.app (expires Sun, 03 May 2026 08:58:59 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c |
lskramarov
approved these changes
Apr 27, 2026
rmnturov
approved these changes
Apr 28, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
This PR addresses a visual issue where the input background (notably in :-webkit-autofill state) overlaps the focused border/outline in kbq-form-field, aiming to keep the overall control height unchanged while preventing background bleed.
Changes:
- Adds a new sizing token for focus outline width (
--kbq-form-field-size-focus-outline-width). - Adjusts focus outline box-shadow to use the new token.
- Tweaks input sizing and autofill+focused paddings/margins and attempts to suppress browser autofill background.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| packages/components/form-field/form-field.scss | Adjusts .kbq-input min-height and adds special styling for focused + :-webkit-autofill to avoid background overlap. |
| packages/components/form-field/form-field-tokens.scss | Introduces a new CSS variable token for focus outline width. |
| packages/components/form-field/_form-field-theme.scss | Updates autofill styling (transparent background + long transition hack) and makes focus box-shadow width token-driven. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
NikGurev
changed the title
artembelik
approved these changes
Apr 28, 2026
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
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.
Summary
The fix contains 2 changes
For the focused + autofilled state:
Before
padding 5px; margin: 0px;After
padding 4px 0; margin: 1px 0This way, the height remains the same, but the background of the input does not go beyond the boundaries.
No way to test since issue for autofill in playwrigh exist: microsoft/playwright#26831
Press for description in ru-RU
Фикс включает 2 изменения
Для состояния focused + autofilled:
Было
padding 5px; margin: 0px;Стало
padding 4px 0; margin: 1px 0Таким образом, высота остается той же, но задний фон инпута не выходит за границы