I am trying to build a ChatGPT like MudBlazor application.
My Code (for playground click here):
<MudLayout><MudAppBar Elevation="1"><MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start"/><MudSpacer /><MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" /></MudAppBar><MudDrawer Open="true" Elevation="2"><MudDrawerHeader><MudText Typo="Typo.h5" Class="mt-1">APP</MudText></MudDrawerHeader></MudDrawer><MudMainContent><MudGrid Spacing="0"><MudItem xs="12"><MudGrid Spacing="0" Style="height: calc(90vh - var(--mud-appbar-height)); max-height: calc(90vh - var(--mud-appbar-height));"><MudItem xs="2" Style="background-color: yellow"></MudItem><MudItem xs="8" Style="background-color: red"></MudItem><MudItem xs="2" Style="background-color: yellow"></MudItem></MudGrid></MudItem><MudItem xs="12"><MudGrid Spacing="0" Style="height: 10vh; max-height: 10vh;"><MudItem xs="2" Style="background-color: purple"></MudItem><MudItem xs="8" Style="background-color: green"><MudTextField T="string" Placeholder="Type a message..." Variant="Variant.Filled" AutoGrow MaxLines="14" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ArrowCircleUp" /></MudItem><MudItem xs="2" Style="background-color: purple"></MudItem></MudGrid></MudItem></MudGrid></MudMainContent></MudLayout>It looks like this:
In the green area there is a MudTextField with AutoGrow enabled.
But when the input grows it grows downwards which leads to it getting bigger than the initial height and scrollbars appearing on the side which looks awkward.
Is there a way to just make it grow upwards?
It is ok, or even desirable, if the yellow and red areas become smaller as a result