Update layout to remove hacks and rely only on flexbox

Lantean.QBTMud/Components/FilesTab.razor

@@ -2,7 +2,8 @@
     <MudMenuItem Icon="@Icons.Material.Filled.DriveFileRenameOutline" OnClick="RenameFileContextMenu">Rename</MudMenuItem>
 </MudMenu>
 
-<div style="overflow-x: auto; white-space: nowrap; width: 100%;">
+<div class="content-panel">
+    <div class="content-panel__toolbar content-panel__toolbar--scroll">
         <MudToolBar Gutters="false" Dense="true">
             <MudIconButton Icon="@Icons.Material.Filled.DriveFileRenameOutline" OnClick="RenameFileToolbar" title="Rename" />
             <MudDivider Vertical="true" />
@@ -24,7 +25,7 @@
             <MudTextField T="string" Value="SearchText" ValueChanged="SearchTextChanged" Immediate="true" DebounceInterval="500" Placeholder="Filter file list" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
         </MudToolBar>
     </div>
-
+    <div class="content-panel__body">
         <DynamicTable
             @ref="Table"
             T="ContentItem" 
@@ -38,8 +39,10 @@
             SortDirectionChanged="SortDirectionChanged"
             OnTableDataContextMenu="TableDataContextMenu"
             OnTableDataLongPress="TableDataLongPress"
-    Class="file-list"
+            Class="file-list content-panel__table"
         />
+    </div>
+</div>
 
 @code {
     private RenderFragment<RowContext<ContentItem>> NameColumn

Lantean.QBTMud/Components/PeersTab.razor

@@ -6,13 +6,17 @@
     }
 </MudMenu>
 
+<div class="content-panel">
+    <div class="content-panel__toolbar">
         <MudToolBar Gutters="false" Dense="true">
             <MudIconButton Icon="@Icons.Material.Filled.AddCircle" Color="Color.Info" OnClick="AddPeer">Add peer</MudIconButton>
             <MudIconButton Icon="@Icons.Material.Filled.DisabledByDefault" Color="Color.Error" OnClick="BanPeerToolbar" Disabled="@(SelectedItem is null)">Ban peer</MudIconButton>
             <MudDivider Vertical="true" />
             <MudIconButton Icon="@Icons.Material.Outlined.ViewColumn" Color="Color.Inherit" OnClick="ColumnOptions" title="Choose Columns" />
         </MudToolBar>
+    </div>
 
+    <div class="content-panel__body">
         <DynamicTable T="Peer"
                       ColumnDefinitions="Columns"
                       Items="Peers"
@@ -21,4 +25,6 @@
                       OnTableDataLongPress="TableDataLongPress"
                       OnTableDataContextMenu="TableDataContextMenu"
                       SelectedItemChanged="SelectedItemChanged"
-              Class="details-list" />
+                      Class="details-list content-panel__table" />
+    </div>
+</div>

Lantean.QBTMud/Components/TrackersTab.razor

@@ -8,6 +8,8 @@
     }
 </MudMenu>
 
+<div class="content-panel">
+    <div class="content-panel__toolbar">
         <MudToolBar Gutters="false" Dense="true">
             <MudIconButton Icon="@Icons.Material.Filled.AddCircle" Color="Color.Info" OnClick="AddTracker">Add trackers</MudIconButton>
             <MudIconButton Icon="@Icons.Material.Filled.Edit" Color="Color.Info" OnClick="EditTrackerToolbar" Disabled="@(SelectedItem is null)">Edit tracker URL</MudIconButton>
@@ -16,7 +18,9 @@
             <MudDivider Vertical="true" />
             <MudIconButton Icon="@Icons.Material.Outlined.ViewColumn" Color="Color.Inherit" OnClick="ColumnOptions" title="Choose Columns" />
         </MudToolBar>
+    </div>
 
+    <div class="content-panel__body">
         <DynamicTable @ref="Table"
                       T="Lantean.QBitTorrentClient.Models.TorrentTracker"
                       ColumnDefinitions="Columns"
@@ -29,4 +33,6 @@
                       OnTableDataLongPress="TableDataLongPress"
                       OnTableDataContextMenu="TableDataContextMenu"
                       SelectedItemChanged="SelectedItemChanged"
-              Class="file-list" />
+                      Class="file-list content-panel__table" />
+    </div>
+</div>

Lantean.QBTMud/Components/WebSeedsTab.razor

@@ -1,6 +1,10 @@
-<DynamicTable T="Lantean.QBitTorrentClient.Models.WebSeed"
+<div class="content-panel">
+    <div class="content-panel__body">
+        <DynamicTable T="Lantean.QBitTorrentClient.Models.WebSeed"
                       ColumnDefinitions="Columns"
                       Items="WebSeeds"
                       MultiSelection="false"
                       SelectOnRowClick="false"
-              Class="details-list" />
+                      Class="details-list content-panel__table" />
+    </div>
+</div>

Lantean.QBTMud/Layout/DetailsLayout.razor

@@ -1,9 +1,11 @@
 @inherits LayoutComponentBase
 @layout LoggedInLayout
 
-<MudDrawer Open="DrawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2" Overlay="false">
+<div class="app-shell__body">
+    <MudDrawer Open="DrawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2" Overlay="false" Class="app-shell__sidebar">
         <TorrentsListNav Torrents="Torrents" SelectedTorrent="@SelectedTorrent" SortDirection="SortDirection" SortColumn="@SortColumn" />
     </MudDrawer>
-<MudMainContent>
+    <MudMainContent Class="app-shell__main">
         @Body
     </MudMainContent>
+</div>

Lantean.QBTMud/Layout/ListLayout.razor

@@ -1,11 +1,13 @@
 @inherits LayoutComponentBase
 @layout LoggedInLayout
 
-<MudDrawer Open="DrawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2" Overlay="false">
+<div class="app-shell__body">
+    <MudDrawer Open="DrawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2" Overlay="false" Class="app-shell__sidebar">
         <FiltersNav CategoryChanged="CategoryChanged" StatusChanged="StatusChanged" TagChanged="TagChanged" TrackerChanged="TrackerChanged" />
     </MudDrawer>
-<MudMainContent>
+    <MudMainContent Class="app-shell__main">
         <CascadingValue Value="SearchTermChanged" Name="SearchTermChanged">
             @Body
         </CascadingValue>
     </MudMainContent>
+</div>

Lantean.QBTMud/Layout/LoggedInLayout.razor

@@ -24,20 +24,9 @@
                                                 <CascadingValue Value="SearchTermChanged" Name="SearchTermChanged">
                                                     <CascadingValue Value="@(MainData?.LostConnection ?? false)" Name="LostConnection">
                                                         <CascadingValue Value="Version" Name="Version">
+                                                            <div class="app-shell">
                                                                 @Body
-                                                    </CascadingValue>
+                                                                <MudAppBar Bottom="true" Elevation="0" Dense="true" Class="app-shell__status-bar">
-                                                </CascadingValue>
-                                            </CascadingValue>
-                                        </CascadingValue>
-                                    </CascadingValue>
-                                </CascadingValue>
-                            </CascadingValue>
-                        </CascadingValue>
-                    </CascadingValue>
-                </CascadingValue>
-            </CascadingValue>
-        </CascadingValue>
-        <MudAppBar Bottom="true" Fixed="true" Elevation="0" Dense="true" Style="background-color: var(--mud-palette-dark-lighten); z-index: 900">
                                                                     @if (MainData?.LostConnection == true)
                                                                     {
                                                                         <MudText Class="mx-2 mb-1 d-none d-sm-flex" Color="Color.Error">qBittorrent client is not reachable</MudText>
@@ -66,6 +55,19 @@
                                                                         @DisplayHelpers.Size(MainData?.ServerState.UploadInfoData, "(", ")")
                                                                     </MudText>
                                                                 </MudAppBar>
+                                                            </div>
+                                                        </CascadingValue>
+                                                    </CascadingValue>
+                                                </CascadingValue>
+                                            </CascadingValue>
+                                        </CascadingValue>
+                                    </CascadingValue>
+                                </CascadingValue>
+                            </CascadingValue>
+                        </CascadingValue>
+                    </CascadingValue>
+                </CascadingValue>
+            </CascadingValue>
         </CascadingValue>
     </CascadingValue>
 </CascadingValue>

Lantean.QBTMud/Layout/OtherLayout.razor

@@ -1,11 +1,13 @@
 @inherits LayoutComponentBase
 @layout LoggedInLayout
 
-<MudDrawer Open="DrawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2" Overlay="false">
+<div class="app-shell__body">
+    <MudDrawer Open="DrawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2" Overlay="false" Class="app-shell__sidebar">
         <MudNavMenu>
             <ApplicationActions IsMenu="false" Preferences="Preferences" />
         </MudNavMenu>
     </MudDrawer>
-<MudMainContent>
+    <MudMainContent Class="app-shell__main">
         @Body
     </MudMainContent>
+</div>

Lantean.QBTMud/Models/FileRow.cs

@@ -2,14 +2,14 @@
 {
     public class FileRow
     {
-        public string OriginalName { get; set; }
+        public required string OriginalName { get; set; }
         public string? NewName { get; set; }
         public bool IsFolder { get; set; }
-        public string Name { get; set; }
+        public required string Name { get; set; }
         public int Level { get; set; }
         public bool Renamed { get; set; }
         public string? ErrorMessage { get; set; }
-        public string Path { get; set; }
+        public required string Path { get; set; }
 
         public override bool Equals(object? obj)
         {

Lantean.QBTMud/Pages/About.razor

@@ -1,6 +1,8 @@
 @page "/about"
 @layout OtherLayout
 
+<div class="content-panel">
+    <div class="content-panel__toolbar">
         <MudToolBar Gutters="false" Dense="true">
             @if (!DrawerOpen)
             {
@@ -9,10 +11,12 @@
             }
             <MudText Class="px-5 no-wrap">About</MudText>
         </MudToolBar>
+    </div>
 
+    <div class="content-panel__body">
         <MudTabs Elevation="2" ApplyEffectsToContainer="true">
             <MudTabPanel Text="About">
-        <MudContainer MaxWidth="MaxWidth.ExtraExtraLarge" Class="mt-3">
+                <MudContainer MaxWidth="MaxWidth.ExtraExtraLarge" Class="mt-3 content-panel__container">
             <MudGrid Class="mt-0 mb-4">
                 <MudItem xs="12" sm="3" md="2" lg="2" xl="1" Class="d-flex justify-center">
                     <MudImage Src="images/mascot.png" Alt="Mascot" Class="ma-6"
@@ -1105,3 +1109,5 @@
         </MudContainer>
     </MudTabPanel>
 </MudTabs>
+    </div>
+</div>

Lantean.QBTMud/Pages/Blocks.razor

@@ -1,6 +1,8 @@
 @page "/blocks"
 @layout OtherLayout
 
+<div class="content-panel">
+    <div class="content-panel__toolbar">
         <MudToolBar Gutters="false" Dense="true">
             @if (!DrawerOpen)
             {
@@ -10,7 +12,8 @@
             <MudDivider Vertical="true" />
             <MudText Class="pl-5 no-wrap">Blocked IPs</MudText>
         </MudToolBar>
-
+    </div>
+    <div class="content-panel__body">
         <MudCard Elevation="1" Class="ml-4 mr-4 mb-4">
             <MudCardContent>
                 <EditForm Model="Model" OnSubmit="Submit">
@@ -33,4 +36,6 @@
                       MultiSelection="false"
                       SelectOnRowClick="false"
                       RowClassFunc="RowClass"
-              Class="search-list" />
+                      Class="search-list content-panel__table" />
+    </div>
+</div>

Lantean.QBTMud/Pages/CategoryManagement.razor

@@ -1,6 +1,8 @@
 @page "/categories"
 @layout OtherLayout
 
+<div class="content-panel">
+    <div class="content-panel__toolbar">
         <MudToolBar Gutters="false" Dense="true">
             @if (!DrawerOpen)
             {
@@ -11,14 +13,18 @@
             <MudDivider Vertical="true" />
             <MudIconButton Icon="@Icons.Material.Filled.PlaylistAdd" OnClick="AddCategory" title="Add Category" />
         </MudToolBar>
+    </div>
 
+    <div class="content-panel__body">
         <DynamicTable @ref="Table"
                       T="Category"
                       ColumnDefinitions="Columns"
                       Items="Results"
                       MultiSelection="false"
                       SelectOnRowClick="false"
-              Class="details-list" />
+                      Class="details-list content-panel__table" />
+    </div>
+</div>
 
 @code {
     private RenderFragment<RowContext<Category>> ActionsColumn

Lantean.QBTMud/Pages/Details.razor

@@ -1,7 +1,8 @@
 @page "/details/{hash}"
 @layout DetailsLayout
 
-<div style="overflow-x: auto; white-space: nowrap; width: 100%;">
+<div class="content-panel">
+    <div class="content-panel__toolbar content-panel__toolbar--scroll">
         <MudToolBar Gutters="false" Dense="true">
             @if (!DrawerOpen)
             {
@@ -17,6 +18,7 @@
         </MudToolBar>
     </div>
 
+    <div class="content-panel__body">
         @if (ShowTabs)
         {
             <CascadingValue Value="RefreshInterval" Name="RefreshInterval">
@@ -39,3 +41,5 @@
                 </MudTabs>
             </CascadingValue>
         }
+    </div>
+</div>

Lantean.QBTMud/Pages/Log.razor

@@ -1,6 +1,8 @@
 @page "/log"
 @layout OtherLayout
 
+<div class="content-panel">
+    <div class="content-panel__toolbar">
         <MudToolBar Gutters="false" Dense="true">
             @if (!DrawerOpen)
             {
@@ -10,7 +12,8 @@
             <MudDivider Vertical="true" />
             <MudText Class="pl-5 no-wrap">Execution Log</MudText>
         </MudToolBar>
-
+    </div>
+    <div class="content-panel__body">
         <MudCard Elevation="1" Class="ml-4 mr-4 mb-4">
             <MudCardContent>
                 <EditForm Model="Model" OnSubmit="Submit">
@@ -41,4 +44,6 @@
                       MultiSelection="false"
                       SelectOnRowClick="false"
                       RowClassFunc="RowClass"
-              Class="search-list" />
+                      Class="search-list content-panel__table" />
+    </div>
+</div>

Lantean.QBTMud/Pages/Options.razor

@@ -3,6 +3,8 @@
 
 <NavigationLock ConfirmExternalNavigation="@(UpdatePreferences is not null)" OnBeforeInternalNavigation="ValidateExit" />
 
+<div class="content-panel">
+    <div class="content-panel__toolbar">
         <MudToolBar Gutters="false" Dense="true">
             @if (!DrawerOpen)
             {
@@ -14,30 +16,50 @@
             <MudIconButton Icon="@Icons.Material.Outlined.Save" OnClick="Save" Disabled="@(LostConnection || UpdatePreferences is null)" />
             <MudIconButton Icon="@Icons.Material.Outlined.Undo" OnClick="Undo" Disabled="@(LostConnection || UpdatePreferences is null)" />
         </MudToolBar>
+    </div>
 
+    <div class="content-panel__body">
         <MudTabs Elevation="2" ApplyEffectsToContainer="true" @bind-ActivePanelIndex="ActiveTab" Border="true">
             <MudTabPanel Text="Behaviour">
+                <div class="options-tab-contents">
                     <BehaviourOptions @ref="BehaviourOptions" Preferences="Preferences" UpdatePreferences="@UpdatePreferences" PreferencesChanged="PreferencesChanged" />
+                </div>
             </MudTabPanel>
             <MudTabPanel Text="Downloads">
+                <div class="options-tab-contents">
                     <DownloadsOptions @ref="DownloadsOptions" Preferences="Preferences" UpdatePreferences="@UpdatePreferences" PreferencesChanged="PreferencesChanged" />
+                </div>
             </MudTabPanel>
             <MudTabPanel Text="Connection">
+                <div class="options-tab-contents">
                     <ConnectionOptions @ref="ConnectionOptions" Preferences="Preferences" UpdatePreferences="@UpdatePreferences" PreferencesChanged="PreferencesChanged" />
+                </div>
             </MudTabPanel>
             <MudTabPanel Text="Speed">
+                <div class="options-tab-contents">
                     <SpeedOptions @ref="SpeedOptions" Preferences="Preferences" UpdatePreferences="@UpdatePreferences" PreferencesChanged="PreferencesChanged" />
+                </div>
             </MudTabPanel>
             <MudTabPanel Text="BitTorrent">
+                <div class="options-tab-contents">
                     <BitTorrentOptions @ref="BitTorrentOptions" Preferences="Preferences" UpdatePreferences="@UpdatePreferences" PreferencesChanged="PreferencesChanged" />
+                </div>
             </MudTabPanel>
             <MudTabPanel Text="RSS">
+                <div class="options-tab-contents">
                     <RSSOptions @ref="RSSOptions" Preferences="Preferences" UpdatePreferences="@UpdatePreferences" PreferencesChanged="PreferencesChanged" />
+                </div>
             </MudTabPanel>
             <MudTabPanel Text="Web UI">
+                <div class="options-tab-contents">
                     <WebUIOptions @ref="WebUIOptions" Preferences="Preferences" UpdatePreferences="@UpdatePreferences" PreferencesChanged="PreferencesChanged" />
+                </div>
             </MudTabPanel>
             <MudTabPanel Text="Advanced">
+                <div class="options-tab-contents">
                     <AdvancedOptions @ref="AdvancedOptions" Preferences="Preferences" UpdatePreferences="@UpdatePreferences" PreferencesChanged="PreferencesChanged" />
+                </div>
             </MudTabPanel>
         </MudTabs>
+    </div>
+</div>

Lantean.QBTMud/Pages/Rss.razor

@@ -1,6 +1,8 @@
 @page "/rss"
 @layout OtherLayout
 
+<div class="content-panel">
+    <div class="content-panel__toolbar">
         <MudToolBar Gutters="false" Dense="true">
             @if (!DrawerOpen)
             {
@@ -15,8 +17,10 @@
             <MudDivider Vertical="true" />
             <MudIconButton Icon="@Icons.Material.Outlined.DownloadForOffline" OnClick="EditDownloadRules" title="Edit auto downloading rules" />
         </MudToolBar>
+    </div>
 
-<MudContainer MaxWidth="MaxWidth.ExtraExtraLarge">
+    <div class="content-panel__body">
+        <MudContainer MaxWidth="MaxWidth.ExtraExtraLarge" Class="content-panel__container">
             <MudGrid Class="rss-contents">
                 <MudItem xs="4" Style="height: 100%">
                     <MudList T="string" SelectionMode="SelectionMode.SingleSelection" SelectedValue="SelectedFeed" SelectedValueChanged="SelectedFeedChanged" Dense>
@@ -71,3 +75,5 @@
                 </MudItem>
             </MudGrid>
         </MudContainer>
+    </div>
+</div>

Lantean.QBTMud/Pages/Search.razor

@@ -1,6 +1,8 @@
 @page "/search"
 @layout OtherLayout
 
+<div class="content-panel">
+    <div class="content-panel__toolbar">
         <MudToolBar Gutters="false" Dense="true">
             @if (!DrawerOpen)
             {
@@ -10,7 +12,8 @@
             <MudDivider Vertical="true" />
             <MudText Class="pl-5 no-wrap">Search</MudText>
         </MudToolBar>
-
+    </div>
+    <div class="content-panel__body">
         <MudCard Elevation="1" Class="ml-4 mr-4 mb-4">
             <MudCardContent>
                 <EditForm Model="Model" OnValidSubmit="DoSearch">
@@ -59,4 +62,6 @@
                       Items="Results"
                       MultiSelection="false"
                       SelectOnRowClick="false"
-              Class="search-list" />
+                      Class="search-list content-panel__table" />
+    </div>
+</div>

Lantean.QBTMud/Pages/Statistics.razor

@@ -1,6 +1,8 @@
 @page "/statistics"
 @layout OtherLayout
 
+<div class="content-panel">
+    <div class="content-panel__toolbar">
         <MudToolBar Gutters="false" Dense="true">
             @if (!DrawerOpen)
             {
@@ -10,8 +12,10 @@
             <MudDivider Vertical="true" />
             <MudText Class="pl-5 no-wrap">Statistics</MudText>
         </MudToolBar>
+    </div>
 
-<MudContainer MaxWidth="MaxWidth.ExtraExtraLarge" Class="details-tab-contents">
+    <div class="content-panel__body">
+        <MudContainer MaxWidth="MaxWidth.ExtraExtraLarge" Class="details-tab-contents content-panel__container">
             <MudText Typo="Typo.subtitle2" Class="pt-6">User statistics</MudText>
             <MudGrid>
                 <MudItem xs="12">
@@ -60,3 +64,5 @@
                 </MudItem>
             </MudGrid>
         </MudContainer>
+    </div>
+</div>

Lantean.QBTMud/Pages/TagManagement.razor

@@ -1,6 +1,8 @@
 @page "/tags"
 @layout OtherLayout
 
+<div class="content-panel">
+    <div class="content-panel__toolbar">
         <MudToolBar Gutters="false" Dense="true">
             @if (!DrawerOpen)
             {
@@ -11,14 +13,18 @@
             <MudDivider Vertical="true" />
             <MudIconButton Icon="@Icons.Material.Filled.NewLabel" OnClick="AddTag" title="Add Tag" />
         </MudToolBar>
+    </div>
 
+    <div class="content-panel__body">
         <DynamicTable @ref="Table"
                       T="string"
                       ColumnDefinitions="Columns"
                       Items="Results"
                       MultiSelection="false"
                       SelectOnRowClick="false"
-              Class="details-list" />
+                      Class="details-list content-panel__table" />
+    </div>
+</div>
 
 @code {
     private RenderFragment<RowContext<string>> ActionsColumn

Lantean.QBTMud/Pages/TorrentList.razor

@@ -7,7 +7,8 @@
     <TorrentActions RenderType="RenderType.MenuItems" Hashes="GetContextMenuTargetHashes()" PrimaryHash="@(ContextMenuItem?.Hash)" Torrents="MainData.Torrents" Preferences="Preferences" />
 </MudMenu>
 
-<div style="overflow-x: auto; white-space: nowrap; width: 100%;">
+<div class="content-panel">
+    <div class="content-panel__toolbar content-panel__toolbar--scroll">
         <MudToolBar Gutters="false" Dense="true">
             <MudIconButton Icon="@Icons.Material.Outlined.AddLink" OnClick="AddTorrentLink" title="Add torrent link" />
             <MudIconButton Icon="@Icons.Material.Outlined.AddCircle" OnClick="AddTorrentFile" title="Add torrent file" />
@@ -20,12 +21,12 @@
             <MudTextField Value="SearchText" TextChanged="SearchTextChanged" Immediate="true" DebounceInterval="1000" Placeholder="Filter torrent list" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
         </MudToolBar>
     </div>
-
+    <div class="content-panel__body">
-<MudContainer MaxWidth="MaxWidth.ExtraExtraLarge" Class="ma-0 pa-0">
+        <MudContainer MaxWidth="MaxWidth.ExtraExtraLarge" Class="ma-0 pa-0 content-panel__container">
             <DynamicTable
                 @ref="Table"
                 T="Torrent" 
-        Class="torrent-list"
+                Class="torrent-list content-panel__table"
                 ColumnDefinitions="Columns" 
                 Items="Torrents" 
                 OnRowClick="RowClick" 
@@ -38,6 +39,8 @@
                 OnTableDataLongPress="TableDataLongPress"
             />
         </MudContainer>
+    </div>
+</div>
 
 @code {
     private static RenderFragment<RowContext<Torrent>> ProgressBarColumn

Lantean.QBTMud/wwwroot/css/app.css

@@ -1,4 +1,4 @@
-#blazor-error-ui {
+#blazor-error-ui {
     background: lightyellow;
     bottom: 0;
     box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
@@ -65,15 +65,16 @@ code {
 }
 
 .mud-appbar.mud-appbar-fixed-bottom {
-    height: 35px;
+    height: var(--app-status-bar-height);
 }
 
 .mud-main-content {
-    padding-bottom: 35px;
+    padding: var(--mud-appbar-height) 0 var(--app-status-bar-height);
+    box-sizing: border-box;
 }
 
 .mud-drawer-fixed.mud-drawer-mini.mud-drawer-clipped-always, .mud-drawer-fixed.mud-drawer-persistent:not(.mud-drawer-clipped-never), .mud-drawer-fixed.mud-drawer-responsive.mud-drawer-clipped-always, .mud-drawer-fixed.mud-drawer-temporary.mud-drawer-clipped-always {
-    height: calc(100% - var(--mud-appbar-height) - 35px);
+    height: calc(100% - var(--mud-appbar-height) - var(--app-status-bar-height));
 }
 
 .w-100 {
@@ -154,25 +155,68 @@ code {
     margin-right: 5px;
 }
 
-.torrent-list .mud-table-container {
+/*. Layout helpers */
-    height: calc(100vh - 160px);
+.content-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
 }
 
-.file-list .mud-table-container {
+.content-panel__toolbar {
-    height: calc(100vh - 245px);
+    flex: 0 0 auto;
 }
 
-.details-list .mud-table-container {
+.content-panel__toolbar--scroll {
-    height: calc(100vh - 200px);
+    overflow-x: auto;
+    white-space: nowrap;
 }
 
-.details-tab-contents {
+.content-panel__body {
-    height: calc(100vh - 200px);
+    flex: 1 1 auto;
-    overflow: auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
 
+.content-panel__container {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.content-panel__table {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.content-panel__table .mud-table-container {
+    flex: 1 1 auto;
+    height: 100%;
+}
+
+.content-panel__body > .mud-tabs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
+.content-panel__body > .mud-tabs .mud-tabs-panels { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
+.content-panel__body > .mud-tabs .mud-tab-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
+.content-panel__body > .mud-tabs .mud-tab-panel > .mud-tab-panel-content { flex: 1 1 auto; min-height: 0; overflow: auto; }
+
+.torrent-list .mud-table-container,
+.file-list .mud-table-container,
+.details-list .mud-table-container,
 .search-list .mud-table-container {
-    height: calc(100vh - 260px);
+    height: 100%;
+}
+
+.details-tab-contents,
+.options-tab-contents,
+.rss-contents {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
 }
 
 tr.log-normal td {
@@ -220,10 +264,6 @@ td .folder-button {
     padding: 6px 16px 6px 16px !important;
 }
 
-.rss-contents {
-    height: calc(100vh - 149px);
-}
-
 @keyframes spin {
     0% {
         transform: rotate(0deg);
@@ -256,3 +296,73 @@ td .folder-button {
 .mud-popover .mud-divider:last-child {
     display: none;
 }
+:root {
+    --app-viewport-height: 100vh;
+    --app-status-bar-height: 35px;
+}
+
+@supports (height: 100dvh) {
+    :root {
+        --app-viewport-height: 100dvh;
+    }
+}
+
+html,
+body {
+    height: var(--app-viewport-height);
+    min-height: var(--app-viewport-height);
+}
+
+body {
+    margin: 0;
+    overflow: hidden;
+    overscroll-behavior: none;
+}
+
+#app,
+.mud-layout {
+    height: 100%;
+    min-height: 100%;
+}
+
+.app-shell {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.app-shell__body {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.app-shell__sidebar {
+    flex: 0 0 auto;
+}
+
+.app-shell__main {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+    padding: var(--mud-appbar-height) 0 var(--app-status-bar-height);
+    box-sizing: border-box;
+}
+
+.app-shell__status-bar.mud-appbar {
+    flex: 0 0 var(--app-status-bar-height);
+    height: var(--app-status-bar-height);
+    width: 100%;
+    background-color: var(--mud-palette-dark-lighten);
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.app-shell__status-bar .mud-toolbar {
+    width: 100%;
+}