flex table track

PlaylistShared.Pwa/Components/SharedPlaylist/AddTrackSection.razor

@@ -5,32 +5,35 @@
 @inject HttpClient Http
 @inject ISnackbar Snackbar
 
-<MudStack>
+<MudStack Style="height: 100%; overflow: hidden;">
+    <MudItem>
         <MudTextField @bind-Value="_searchQuery"
                       @bind-Value:after="SearchTracks"
                       Variant="Variant.Outlined"
                       FullWidth
                       Label="Название или ссылка на трек Яндекс.Музыки"
                       Disabled="@_isSearching"
-                    Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Secondary"
+                      Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Secondary" />
-                    />
 
         <MudToggleGroup T="TrackSearchType"
                         @bind-Value="_searchType"
                         @bind-Value:after="SearchTracks"
                         Size="Size.Small"
                         Color="Color.Primary"
-                    Disabled="@(_isSearching)"
+                        Disabled="@(_isSearching)">
-                    >
             <MudToggleItem Value="TrackSearchType.All" Text="Все" />
             <MudToggleItem Value="TrackSearchType.Track" Text="Трек" />
             <MudToggleItem Value="TrackSearchType.Album" Text="Альбом" />
             <MudToggleItem Value="TrackSearchType.Artist" Text="Исполнитель" />
         </MudToggleGroup>
+    </MudItem>
 
     <MudTable Items="@_searchResults"
               Virtualize
-                Hover="true"
+              Hover
+              Elevation="0"
+              Class="d-flex flex-grow-1 flex-column"
+              Style="min-height: 0;"
               Breakpoint="Breakpoint.Sm"
               Loading="@_isSearching">
         <RowTemplate>

PlaylistShared.Pwa/Pages/SharedPlaylistView.razor

@@ -11,7 +11,7 @@
 @inject AuthenticationStateProvider AuthProvider
 @inject IDialogService DialogService
 
-<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="mt-8">
+<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pa-4" Style="height: 100%;">
     @if (_loading)
     {
         <MudProgressCircular Indeterminate />
@@ -22,21 +22,26 @@
     }
     else
     {
-        <MudSplitPanel>
+        <MudSplitPanel Class="flex-grow-1" Style="height: 100%;">
             <FirstPanel>
-                <MudCard>
+                <MudCard Class="d-flex flex-column" Style="height: 100%;">
                     <MudCardHeader>
                         <CardHeaderContent>
                             <PlaylistHeader Playlist="@_playlist" />
                         </CardHeaderContent>
                     </MudCardHeader>
 
-                    <MudCardContent>
+                    <MudCardContent Class="flex-grow-1 d-flex flex-column" Style="overflow: hidden;">
+                        <MudItem>                              
                             <MudIconButton Icon="@Icons.Material.Filled.Refresh" OnClick="LoadTracks" Disabled="@_tracksLoading" Size="Size.Medium" />
+                        </MudItem>
+
                         <MudTable Items="@_tracks"
-                                  Virtualize="true"
+                                  Virtualize
-                                  Height="400px"
+                                  Hover
-                                  Hover="true"
+                                  Elevation="0"
+                                  Class="d-flex flex-grow-1 flex-column"
+                                  Style="min-height: 0;"
                                   Breakpoint="Breakpoint.Sm"
                                   Loading="@_tracksLoading">
                             <RowTemplate>
@@ -57,13 +62,14 @@
             <SecondPanel>
                 @if (_canAdd)
                 {
-                    <MudCard>
+                    <MudCard Class="d-flex flex-column" Style="height: 100%;">
                         <MudCardHeader>
                             <CardHeaderContent>
                                 <MudText Typo="Typo.h5" Color="Color.Primary">Добавление треков</MudText>
                             </CardHeaderContent>
                         </MudCardHeader>
-                        <MudCardContent>
+
+                        <MudCardContent Class="flex-grow-1 d-flex flex-column" Style="overflow: hidden;">
                             <AddTrackSection ShareToken="Token" OnTrackAdded="LoadTracks" OnTrackRemoved="LoadTracks" ExistingTrackIds="_existingTrackIds" />
                         </MudCardContent>
                     </MudCard>