From 5dfaa1a7ad0110720327f3946902b57bc249760a Mon Sep 17 00:00:00 2001
From: Jason Dove <1695733+jasongdove@users.noreply.github.com>
Date: Thu, 10 Jul 2025 14:38:17 +0000
Subject: [PATCH] improve mobile layout for some pages with tables (#2130)

---
 ErsatzTV/Pages/Channels.razor   | 211 +++++++++++++++++---------------
 ErsatzTV/Pages/FFmpeg.razor     | 125 ++++++++++---------
 ErsatzTV/Pages/Watermarks.razor | 135 ++++++++++----------
 ErsatzTV/wwwroot/css/site.css   |   4 +
 4 files changed, 250 insertions(+), 225 deletions(-)

diff --git a/ErsatzTV/Pages/Channels.razor b/ErsatzTV/Pages/Channels.razor
index 9a6add59..444164ee 100644
--- a/ErsatzTV/Pages/Channels.razor
+++ b/ErsatzTV/Pages/Channels.razor
@@ -10,107 +10,114 @@
 @inject NavigationManager NavigationManager
 @inject IFFmpegSegmenterService SegmenterService
 
-<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
-    <MudTable Hover="true"
-              @bind-RowsPerPage="@_rowsPerPage"
-              ServerData="@(new Func<TableState, CancellationToken, Task<TableData<ChannelViewModel>>>(ServerReload))"
-              @ref="_table">
-        <ToolBarContent>
-            <MudText Typo="Typo.h6">Channels</MudText>
-        </ToolBarContent>
-        <ColGroup>
-            <col style="width: 60px;"/>
-            <col/>
-            <col style="width: 15%"/>
-            <col style="width: 15%"/>
-            <col style="width: 15%"/>
-            <col style="width: 15%"/>
-            <col style="width: 240px;"/>
-        </ColGroup>
-        <HeaderContent>
-            <MudTh>
-                <MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<ChannelViewModel, object>(x => decimal.Parse(x.Number, CultureInfo.InvariantCulture))">Number</MudTableSortLabel>
-            </MudTh>
-            <MudTh>Logo</MudTh>
-            <MudTh>
-                <MudTableSortLabel SortBy="new Func<ChannelViewModel, object>(x => x.Name)">Name</MudTableSortLabel>
-            </MudTh>
-            <MudTh>Language</MudTh>
-            <MudTh>Mode</MudTh>
-            <MudTh>FFmpeg Profile</MudTh>
-            <MudTh/>
-        </HeaderContent>
-        <RowTemplate>
-            <MudTd DataLabel="Number">@context.Number</MudTd>
-            <MudTd DataLabel="Logo">
-                @if (!string.IsNullOrWhiteSpace(context.Logo?.Path))
-                {
-                    <MudElement HtmlTag="img" src="@context.Logo.UrlWithContentType" Style="max-height: 50px"/>
-                }
-                else
-                {
-                    <MudElement HtmlTag="img" src="@($"iptv/logos/gen?text={context.WebEncodedName}")" Style="max-height: 50px"/>
-                }
-            </MudTd>
-            <MudTd DataLabel="Name">@context.Name</MudTd>
-            <MudTd DataLabel="Language">@context.PreferredAudioLanguageCode</MudTd>
-            <MudTd DataLabel="Mode">@GetStreamingMode(context.StreamingMode)</MudTd>
-            <MudTd DataLabel="FFmpeg Profile">
-                @if (context.StreamingMode != StreamingMode.HttpLiveStreamingDirect)
-                {
-                    @_ffmpegProfiles.Find(p => p.Id == context.FFmpegProfileId)?.Name
-                }
-            </MudTd>
-            <MudTd>
-                <div style="align-items: center; display: flex;">
-                    @if (CanPreviewChannel(context))
-                    {
-                        <MudTooltip Text="Preview Channel">
-                            <MudIconButton Icon="@Icons.Material.Filled.PlayCircle"
-                                           OnClick="@(_ => PreviewChannel(context))">
-                            </MudIconButton>
-                        </MudTooltip>
-                    }
-                    else
-                    {
-                        <MudTooltip Text="Channel preview requires playout, MPEG-TS/HLS Segmenter, and H264/AAC">
-                            <MudIconButton Icon="@Icons.Material.Filled.PlayCircle" Disabled="true">
-                            </MudIconButton>
-                        </MudTooltip>
-                    }
-                    @if (SegmenterService.IsActive(context.Number))
-                    {
-                        <MudTooltip Text="Stop Transcode Session">
-                            <MudIconButton Icon="@Icons.Material.Filled.Stop"
-                                           OnClick="@(_ => StopChannel(context))">
-                            </MudIconButton>
-                        </MudTooltip>
-                    }
-                    else
-                    {
-                        <div style="width: 48px"></div>
-                    }
-                    <MudTooltip Text="Edit Channel">
-                        <MudIconButton Icon="@Icons.Material.Filled.Edit"
-                                       Href="@($"channels/{context.Id}")">
-                        </MudIconButton>
-                    </MudTooltip>
-                    <MudTooltip Text="Delete Channel">
-                        <MudIconButton Icon="@Icons.Material.Filled.Delete"
-                                       OnClick="@(_ => DeleteChannelAsync(context))">
-                        </MudIconButton>
-                    </MudTooltip>
-                </div>
-            </MudTd>
-        </RowTemplate>
-        <PagerContent>
-            <MudTablePager/>
-        </PagerContent>
-    </MudTable>
-    <MudButton Variant="Variant.Filled" Color="Color.Primary" Href="channels/add" Class="mt-4">
-        Add Channel
-    </MudButton>
-</MudContainer>
+<MudForm Style="max-height: 100%">
+    <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100; align-items: center">
+        <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="ml-8" StartIcon="@Icons.Material.Filled.Add" Href="channels/add">
+            Add Channel
+        </MudButton>
+    </MudPaper>
+    <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
+        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
+            <MudText Typo="Typo.h5" Class="mb-2">Channels</MudText>
+            <MudDivider Class="mb-6"/>
+            <MudTable Hover="true"
+                      @bind-RowsPerPage="@_rowsPerPage"
+                      ServerData="@(new Func<TableState, CancellationToken, Task<TableData<ChannelViewModel>>>(ServerReload))"
+                      @ref="_table">
+                <ColGroup>
+                    <MudHidden Breakpoint="Breakpoint.Xs">
+                        <col style="width: 60px;"/>
+                        <col/>
+                        <col style="width: 15%"/>
+                        <col style="width: 15%"/>
+                        <col style="width: 15%"/>
+                        <col style="width: 15%"/>
+                        <col style="width: 240px;"/>
+                    </MudHidden>
+                </ColGroup>
+                <HeaderContent>
+                    <MudTh>
+                        <MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<ChannelViewModel, object>(x => decimal.Parse(x.Number, CultureInfo.InvariantCulture))">Number</MudTableSortLabel>
+                    </MudTh>
+                    <MudTh>Logo</MudTh>
+                    <MudTh>
+                        <MudTableSortLabel SortBy="new Func<ChannelViewModel, object>(x => x.Name)">Name</MudTableSortLabel>
+                    </MudTh>
+                    <MudTh>Language</MudTh>
+                    <MudTh>Mode</MudTh>
+                    <MudTh>FFmpeg Profile</MudTh>
+                    <MudTh/>
+                </HeaderContent>
+                <RowTemplate>
+                    <MudTd DataLabel="Number">@context.Number</MudTd>
+                    <MudTd DataLabel="Logo">
+                        @if (!string.IsNullOrWhiteSpace(context.Logo?.Path))
+                        {
+                            <MudElement HtmlTag="img" src="@context.Logo.UrlWithContentType" Style="max-height: 50px"/>
+                        }
+                        else
+                        {
+                            <MudElement HtmlTag="img" src="@($"iptv/logos/gen?text={context.WebEncodedName}")" Style="max-height: 50px"/>
+                        }
+                    </MudTd>
+                    <MudTd DataLabel="Name">@context.Name</MudTd>
+                    <MudTd DataLabel="Language">@context.PreferredAudioLanguageCode</MudTd>
+                    <MudTd DataLabel="Mode">@GetStreamingMode(context.StreamingMode)</MudTd>
+                    <MudTd DataLabel="FFmpeg Profile">
+                        @if (context.StreamingMode != StreamingMode.HttpLiveStreamingDirect)
+                        {
+                            @_ffmpegProfiles.Find(p => p.Id == context.FFmpegProfileId)?.Name
+                        }
+                    </MudTd>
+                    <MudTd>
+                        <div style="align-items: center; display: flex;">
+                            @if (CanPreviewChannel(context))
+                            {
+                                <MudTooltip Text="Preview Channel">
+                                    <MudIconButton Icon="@Icons.Material.Filled.PlayCircle"
+                                                   OnClick="@(_ => PreviewChannel(context))">
+                                    </MudIconButton>
+                                </MudTooltip>
+                            }
+                            else
+                            {
+                                <MudTooltip Text="Channel preview requires playout, MPEG-TS/HLS Segmenter, and H264/AAC">
+                                    <MudIconButton Icon="@Icons.Material.Filled.PlayCircle" Disabled="true">
+                                    </MudIconButton>
+                                </MudTooltip>
+                            }
+                            @if (SegmenterService.IsActive(context.Number))
+                            {
+                                <MudTooltip Text="Stop Transcode Session">
+                                    <MudIconButton Icon="@Icons.Material.Filled.Stop"
+                                                   OnClick="@(_ => StopChannel(context))">
+                                    </MudIconButton>
+                                </MudTooltip>
+                            }
+                            else
+                            {
+                                <div style="width: 48px"></div>
+                            }
+                            <MudTooltip Text="Edit Channel">
+                                <MudIconButton Icon="@Icons.Material.Filled.Edit"
+                                               Href="@($"channels/{context.Id}")">
+                                </MudIconButton>
+                            </MudTooltip>
+                            <MudTooltip Text="Delete Channel">
+                                <MudIconButton Icon="@Icons.Material.Filled.Delete"
+                                               OnClick="@(_ => DeleteChannelAsync(context))">
+                                </MudIconButton>
+                            </MudTooltip>
+                        </div>
+                    </MudTd>
+                </RowTemplate>
+                <PagerContent>
+                    <MudTablePager/>
+                </PagerContent>
+            </MudTable>
+        </MudContainer>
+    </div>
+</MudForm>
 
 @code {
     private readonly CancellationTokenSource _cts = new();
@@ -209,7 +216,7 @@
 
         IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete Channel", parameters, options);
         DialogResult result = await dialog.Result;
-        if (!result.Canceled)
+        if (result is { Canceled: false })
         {
             await Mediator.Send(new DeleteChannel(channel.Id), _cts.Token);
             if (_table != null)
diff --git a/ErsatzTV/Pages/FFmpeg.razor b/ErsatzTV/Pages/FFmpeg.razor
index c9e92926..d48981f8 100644
--- a/ErsatzTV/Pages/FFmpeg.razor
+++ b/ErsatzTV/Pages/FFmpeg.razor
@@ -5,64 +5,71 @@
 @inject IMediator Mediator
 @inject NavigationManager NavigationManager
 
-<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
-    <MudTable Hover="true" Items="_ffmpegProfiles">
-        <ToolBarContent>
-            <MudText Typo="Typo.h6">FFmpeg Profiles</MudText>
-        </ToolBarContent>
-        <ColGroup>
-            <col/>
-            <col/>
-            <col/>
-            <col/>
-            <col style="width: 180px;"/>
-        </ColGroup>
-        <HeaderContent>
-            <MudTh>Name</MudTh>
-            <MudTh>Resolution</MudTh>
-            <MudTh>Video Format</MudTh>
-            <MudTh>Audio Format</MudTh>
-            <MudTh/>
-        </HeaderContent>
-        <RowTemplate>
-            <MudTd DataLabel="Name">@context.Name</MudTd>
-            <MudTd DataLabel="Resolution">@context.Resolution.Name</MudTd>
-            <MudTd DataLabel="Video Format">
-                @if (context.HardwareAcceleration != HardwareAccelerationKind.None)
-                {
-                    @($"{context.VideoFormat.ToString().ToLowerInvariant()} / {context.HardwareAcceleration.ToString().ToLowerInvariant()}")
-                }
-                else
-                {
-                    @context.VideoFormat.ToString().ToLowerInvariant()
-                }
-            </MudTd>
-            <MudTd DataLabel="Audio Format">@context.AudioFormat.ToString().ToLowerInvariant()</MudTd>
-            <MudTd>
-                <div style="align-items: center; display: flex;">
-                    <MudTooltip Text="Edit Profile">
-                        <MudIconButton Icon="@Icons.Material.Filled.Edit"
-                                       Href="@($"ffmpeg/{context.Id}")">
-                        </MudIconButton>
-                    </MudTooltip>
-                    <MudTooltip Text="Copy Profile">
-                        <MudIconButton Icon="@Icons.Material.Filled.ContentCopy"
-                                       OnClick="@(_ => CopyProfileAsync(context))">
-                        </MudIconButton>
-                    </MudTooltip>
-                    <MudTooltip Text="Delete Profile">
-                        <MudIconButton Icon="@Icons.Material.Filled.Delete"
-                                       OnClick="@(_ => DeleteProfileAsync(context))">
-                        </MudIconButton>
-                    </MudTooltip>
-                </div>
-            </MudTd>
-        </RowTemplate>
-    </MudTable>
-    <MudButton Variant="Variant.Filled" Color="Color.Primary" Href="ffmpeg/add" Class="mt-4">
-        Add Profile
-    </MudButton>
-</MudContainer>
+<MudForm Style="max-height: 100%">
+    <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100; align-items: center">
+        <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="ml-8" StartIcon="@Icons.Material.Filled.Add" Href="ffmpeg/add">
+            Add Profile
+        </MudButton>
+    </MudPaper>
+    <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
+        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
+            <MudText Typo="Typo.h5" Class="mb-2">FFmpeg Profiles</MudText>
+            <MudDivider Class="mb-6"/>
+            <MudTable Hover="true" Items="_ffmpegProfiles">
+                <ColGroup>
+                    <MudHidden Breakpoint="Breakpoint.Xs">
+                        <col/>
+                        <col/>
+                        <col/>
+                        <col/>
+                        <col style="width: 180px;"/>
+                    </MudHidden>
+                </ColGroup>
+                <HeaderContent>
+                    <MudTh>Name</MudTh>
+                    <MudTh>Resolution</MudTh>
+                    <MudTh>Video Format</MudTh>
+                    <MudTh>Audio Format</MudTh>
+                    <MudTh/>
+                </HeaderContent>
+                <RowTemplate>
+                    <MudTd DataLabel="Name">@context.Name</MudTd>
+                    <MudTd DataLabel="Resolution">@context.Resolution.Name</MudTd>
+                    <MudTd DataLabel="Video Format">
+                        @if (context.HardwareAcceleration != HardwareAccelerationKind.None)
+                        {
+                            @($"{context.VideoFormat.ToString().ToLowerInvariant()} / {context.HardwareAcceleration.ToString().ToLowerInvariant()}")
+                        }
+                        else
+                        {
+                            @context.VideoFormat.ToString().ToLowerInvariant()
+                        }
+                    </MudTd>
+                    <MudTd DataLabel="Audio Format">@context.AudioFormat.ToString().ToLowerInvariant()</MudTd>
+                    <MudTd>
+                        <div style="align-items: center; display: flex;">
+                            <MudTooltip Text="Edit Profile">
+                                <MudIconButton Icon="@Icons.Material.Filled.Edit"
+                                               Href="@($"ffmpeg/{context.Id}")">
+                                </MudIconButton>
+                            </MudTooltip>
+                            <MudTooltip Text="Copy Profile">
+                                <MudIconButton Icon="@Icons.Material.Filled.ContentCopy"
+                                               OnClick="@(_ => CopyProfileAsync(context))">
+                                </MudIconButton>
+                            </MudTooltip>
+                            <MudTooltip Text="Delete Profile">
+                                <MudIconButton Icon="@Icons.Material.Filled.Delete"
+                                               OnClick="@(_ => DeleteProfileAsync(context))">
+                                </MudIconButton>
+                            </MudTooltip>
+                        </div>
+                    </MudTd>
+                </RowTemplate>
+            </MudTable>
+        </MudContainer>
+    </div>
+</MudForm>
 
 @code {
     private readonly CancellationTokenSource _cts = new();
@@ -87,7 +94,7 @@
 
         IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete FFmpeg Profile", parameters, options);
         DialogResult result = await dialog.Result;
-        if (!result.Canceled)
+        if (result is { Canceled: false })
         {
             await Mediator.Send(new DeleteFFmpegProfile(ffmpegProfile.Id), _cts.Token);
             await LoadFFmpegProfilesAsync(_cts.Token);
diff --git a/ErsatzTV/Pages/Watermarks.razor b/ErsatzTV/Pages/Watermarks.razor
index 038b49cb..e1c930f2 100644
--- a/ErsatzTV/Pages/Watermarks.razor
+++ b/ErsatzTV/Pages/Watermarks.razor
@@ -5,68 +5,75 @@
 @inject IMediator Mediator
 @inject NavigationManager NavigationManager
 
-<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
-    <MudTable Hover="true" Items="_watermarks">
-        <ToolBarContent>
-            <MudText Typo="Typo.h6">Watermarks</MudText>
-        </ToolBarContent>
-        <ColGroup>
-            <col/>
-            <col/>
-            <col/>
-            <col/>
-            <col style="width: 180px;"/>
-        </ColGroup>
-        <HeaderContent>
-            <MudTh>Name</MudTh>
-            <MudTh>Image</MudTh>
-            <MudTh>Mode</MudTh>
-            <MudTh>Location</MudTh>
-            <MudTh/>
-        </HeaderContent>
-        <RowTemplate>
-            <MudTd DataLabel="Name">@context.Name</MudTd>
-            <MudTd DataLabel="Image">
-                @if (!string.IsNullOrWhiteSpace(context.Image?.Path))
-                {
-                    <MudElement HtmlTag="img" src="@($"artwork/watermarks/{context.Image.UrlWithContentType}")" Style="max-height: 50px"/>
-                }
-                else if (context.ImageSource == ChannelWatermarkImageSource.ChannelLogo)
-                {
-                    <MudText>[channel logo]</MudText>
-                }
-            </MudTd>
-            <MudTd DataLabel="Mode">
-                @context.Mode
-            </MudTd>
-            <MudTd DataLabel="Location">
-                @context.Location
-            </MudTd>
-            <MudTd>
-                <div style="align-items: center; display: flex;">
-                    <MudTooltip Text="Edit Watermark">
-                        <MudIconButton Icon="@Icons.Material.Filled.Edit"
-                                       Href="@($"watermarks/{context.Id}")">
-                        </MudIconButton>
-                    </MudTooltip>
-                    <MudTooltip Text="Copy Watermark">
-                        <MudIconButton Icon="@Icons.Material.Filled.ContentCopy"
-                                       OnClick="@(_ => CopyWatermarkAsync(context))">
-                        </MudIconButton>
-                    </MudTooltip>
-                    <MudTooltip Text="Delete Watermark">
-                        <MudIconButton Icon="@Icons.Material.Filled.Delete"
-                                       OnClick="@(_ => DeleteWatermarkAsync(context))">
-                        </MudIconButton>
-                    </MudTooltip>
-                </div>
-            </MudTd>
-        </RowTemplate>
-    </MudTable>
-    <MudButton Variant="Variant.Filled" Color="Color.Primary" Href="watermarks/add" Class="mt-4">
-        Add Watermark
-    </MudButton>
-</MudContainer>
+<MudForm Style="max-height: 100%">
+    <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100; align-items: center">
+        <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="ml-8" StartIcon="@Icons.Material.Filled.Add" Href="watermarks/add">
+            Add Watermark
+        </MudButton>
+    </MudPaper>
+    <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
+        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
+            <MudText Typo="Typo.h5" Class="mb-2">Watermarks</MudText>
+            <MudDivider Class="mb-6"/>
+            <MudTable Hover="true" Items="_watermarks">
+                <ColGroup>
+                    <MudHidden Breakpoint="Breakpoint.Xs">
+                        <col/>
+                        <col/>
+                        <col/>
+                        <col/>
+                        <col style="width: 180px;"/>
+                    </MudHidden>
+                </ColGroup>
+                <HeaderContent>
+                    <MudTh>Name</MudTh>
+                    <MudTh>Image</MudTh>
+                    <MudTh>Mode</MudTh>
+                    <MudTh>Location</MudTh>
+                    <MudTh/>
+                </HeaderContent>
+                <RowTemplate>
+                    <MudTd DataLabel="Name">@context.Name</MudTd>
+                    <MudTd DataLabel="Image">
+                        @if (!string.IsNullOrWhiteSpace(context.Image?.Path))
+                        {
+                            <MudElement HtmlTag="img" src="@($"artwork/watermarks/{context.Image.UrlWithContentType}")" Style="max-height: 50px"/>
+                        }
+                        else if (context.ImageSource == ChannelWatermarkImageSource.ChannelLogo)
+                        {
+                            <MudText>[channel logo]</MudText>
+                        }
+                    </MudTd>
+                    <MudTd DataLabel="Mode">
+                        @context.Mode
+                    </MudTd>
+                    <MudTd DataLabel="Location">
+                        @context.Location
+                    </MudTd>
+                    <MudTd>
+                        <div style="align-items: center; display: flex;">
+                            <MudTooltip Text="Edit Watermark">
+                                <MudIconButton Icon="@Icons.Material.Filled.Edit"
+                                               Href="@($"watermarks/{context.Id}")">
+                                </MudIconButton>
+                            </MudTooltip>
+                            <MudTooltip Text="Copy Watermark">
+                                <MudIconButton Icon="@Icons.Material.Filled.ContentCopy"
+                                               OnClick="@(_ => CopyWatermarkAsync(context))">
+                                </MudIconButton>
+                            </MudTooltip>
+                            <MudTooltip Text="Delete Watermark">
+                                <MudIconButton Icon="@Icons.Material.Filled.Delete"
+                                               OnClick="@(_ => DeleteWatermarkAsync(context))">
+                                </MudIconButton>
+                            </MudTooltip>
+                        </div>
+                    </MudTd>
+                </RowTemplate>
+            </MudTable>
+        </MudContainer>
+    </div>
+</MudForm>
 
 @code {
     private readonly CancellationTokenSource _cts = new();
@@ -91,7 +98,7 @@
 
         IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete Watermark", parameters, options);
         DialogResult result = await dialog.Result;
-        if (!result.Canceled)
+        if (result is { Canceled: false })
         {
             await Mediator.Send(new DeleteWatermark(watermark.Id), _cts.Token);
             await LoadWatermarksAsync();
@@ -105,7 +112,7 @@
 
         IDialogReference dialog = await Dialog.ShowAsync<CopyWatermarkDialog>("Copy Watermark", parameters, options);
         DialogResult dialogResult = await dialog.Result;
-        if (!dialogResult.Canceled && dialogResult.Data is WatermarkViewModel data)
+        if (dialogResult is { Canceled: false, Data: WatermarkViewModel data })
         {
             NavigationManager.NavigateTo($"/watermarks/{data.Id}");
         }
diff --git a/ErsatzTV/wwwroot/css/site.css b/ErsatzTV/wwwroot/css/site.css
index 65f29f00..da74cef5 100644
--- a/ErsatzTV/wwwroot/css/site.css
+++ b/ErsatzTV/wwwroot/css/site.css
@@ -158,4 +158,8 @@
 
 .form-field-stack div.mud-input-control {
     max-width: 500px;
+}
+
+.mud-table-smalldevices-sortselect {
+    display: none !important;
 }
\ No newline at end of file