[Bug Report] V-Textarea label overflows the border when too long

[kumold]

Original issue with the border has been resolved, now there's an issue with the label (see the first comment for details)

Environment

Vuetify Version: 2.1.14 Vue Version: 2.6.10 Browsers: Edge 80.0.355.1 OS: Windows 10

Steps to reproduce

Set v-textfield label text too long

Expected Behavior

Width of element with the border should match width of input

Actual Behavior

width of element containing border is bigger than input's

Reproduction Link

https://codepen.io/kumold/pen/gObMNPb?&editable=true&editors=101

[jacekkarczmarczyk]

Border looks good in 2.2.3, however there's an issue now with label overflowing the border, so i'm leaving this issue open

https://codepen.io/jkarczm/pen/yLyjPve

[lioneaglesolutions]

Leaving this one open for the minute as upon investigating, some odd behaviour in V3 - the label make the text area border extend beyond the actual text area. @johnleider

https://play.vuetifyjs.com/#eNq9UstOIzEQ/JWWz/EYWCSkaBax/7DSHjAHM252vPglu2eSCOXftz0BJYQDnJjDSF39qKpu37+IXzl384RiLXrCkL0hvNWxt26GwZtaf2oRjLyGzD8toNLOI2MbZ2lcw+XFRd5qwR3w+vWzJNySKWiOYDShNbmYJ5I38lKLY+7JeY/2GHvziJ6Lf48If1KywUSoSEAJNqk8gyFIccAVmGihJqijKRk2psLoKpgtAo1cQ9xOBXHJ1JQiDGPKGS1ENMXvuKCk6e/YnWqZTXEmErOnibyLrOskG5JFL2fjp2bm+/Xd9uq4XF55w3vFl2oHU6fXq0NxmZaSXr0GYiXY0XPt/tUU+dwvrV2LoVYt1nB/INFiJMp1rdRgI1eyYTeXLiKpmIPih0LuaXf3o7vqrpi50hsk+Wy1W4a1SQ867pnQhZwKyWDyGeshsTAvSMN4Uos/kXDHZapMkVxAaVNYtFzfHMSc4B3WIB9L2lQsPEWL1QlPU/wFrs/sMsWH0Yr5ZiyyYLRYsHzV0lnbO1tnuQ/WGv2+bXy/Eoc+3v0iWjz8B2VOS2s=

[johnleider]

Part of this can be fixed by removing the max-width from floating labels, but the outline extending past it's box is something @KaelWD would have to speak to.

[timothyjohnwilson]

hitting the same issue with v-text-field

Edit: not a great fix but i've temporarily added:

.v-field__outline__notch {
  max-width: calc(
    100% - var(--v-field-padding-start) - var(--v-field-padding-end)
  ) !important;
}