[Bug Report] VTextField Border is not aligned correctly with outlined and reverse prop in browser mozilla firefox

[asrori7]

Environment

Vuetify Version: 2.2.15
Vue Version: 2.6.10
Browsers: Mozilla Firefox
OS: Windows

Steps to reproduce

create vtextfield with prop outlined and reverse. Aligned only correctly in chrome browser but in other browser ex. mozilla firefox legend not aligned correctly. like in the screenshot that I attached in comment.

Expected Behavior

label and legend should be in right position in mozilla firefox

Actual Behavior

only label in right position and legend still in left in mozilla firefox

Reproduction Link

https://codepen.io/neko-chan/pen/xxGpYPm

[asrori7]

[jacekkarczmarczyk]

Expected Behavior

label and legend should be in right position

You've submitted an issue that does not contain a reproduction. In order to effectively disposition this, we need to verify that the problem exists outside of your environment. Please open a new issue with the missing information.

Thank you for your contribution and interest in improving Vuetify. If you have any additional questions, please reach out to us in our Discord community.

[asrori7]

@jacekkarczmarczyk I'am sorry for missing information, label and legend just correctly in CHROME browser. but in other browser ex. mozilla firefox legend not aligned correctly. like in the screenshot that I attached in comment.

[jacekkarczmarczyk]

Sorry, but a screenshot is not a valid reproduction, please create a minimal codepen/codesandbox/github repo that reproduces the issue

[asrori7]

@jacekkarczmarczyk this is my codepen https://codepen.io/neko-chan/pen/xxGpYPm. it is correctly on chrome but not in mozilla firefox.

[jacekkarczmarczyk]

Sorry, missed information about Firefox

[tronolives]

@jacekkarczmarczyk or anyone interested, I believe I have a fix for this, but I'm fairly new and would appreciate advice.
Replacing VTextField.sass:418 text-align: right with margin-inline-start: auto does the trick on Chrome, Firefox, and Safari and some initial smoke testing shows that it works fine.

Can you think of a reason why this would not be a sufficient fix? If not, do you have any suggestions for further testing? ( I can't test Windows/Edge)
Thanks :^)

[fpdrozd]

@tronolives It does not work in Edge for me. But I tried margin-left: auto instead and it works fine as well (in Edge too).

Still don't know if it's a sufficient fix.

[asrori7]

for now, add this line stylesheet code in the App.vue

.v-application--is-ltr .v-text-field--outlined.v-text-field--reverse legend {
margin-inline-start: auto !important;
margin-left: auto !important;
}

[KaelWD]

Don't close issues just because you've found a workaround, it's still a bug.

[dchinu97]

@KaelWD Can please you assign this to me?