Textarea is broken when width is set to 100%

[marin-bratanov]

Describe the bug

The wrapper gets 100% width, bot the actual textarea does not, so the resize handle is in the wrong place and you cannot focus it by clicking its entire perceived area

To reproduce
Sample blazor code, uses a kendo form that sets 100% width to the inputs

<div class="demo-section k-form k-form-vertical">
    <div class="form-wrapper k-form">
        <div class="k-form-field">
            <div class="k-form-field-wrap">
                <TelerikTextArea Id="productDescription"
                                 Label="Enter product description:"
                                 @bind-Value="@theText">
                </TelerikTextArea>
            </div>
        </div>
    </div>
</div>

@code{
    string theText { get; set; } = "one\ntwo\nthree\nfour\nlines";
}

Expected behavior

The actual textarea takes up 100% of its wrapper, you can focus it by clicking anywhere on it, the resize handle is in the expected bottom right corner, not in the middle.

Screenshots

Affected package (please remove the unneeded items)

• theme-default
• theme-bootstrap
• theme-material

Affected suites (please remove the unneeded items)

• Telerik UI for Blazor

but probably all

Affected browsers (please remove the unneeded items)

• All

Build system information (please remove the unneeded items)

• Not Applicable

Additional context

Makes our demos look very bad.

I also suspect it might be related to #1951

[jivanova]

Dojo with reproduction: https://dojo.telerik.com/IhORIroj

The issue stems from default width set to the k-input element: https://github.com/telerik/kendo-themes/blob/develop/packages/default/scss/textarea/_layout.scss#L36