From 18c710d341e00ba8f2a1785d3527df50b5e52201 Mon Sep 17 00:00:00 2001
From: Duy Dao <daothanhduy305@gmail.com>
Date: Thu, 17 Jul 2025 21:43:58 +0700
Subject: [PATCH] refactor: enhance layout and structure of Caddyfile and
 Reverse Proxies pages for improved UI consistency

---
 .../Components/Layout/MainLayout.razor        |  6 ++--
 .../CaddyReverseProxiesPage.razor             | 10 +++---
 .../Pages/Caddy/CaddyfilePage.razor           | 34 ++++++++++---------
 3 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/CaddyManager/Components/Layout/MainLayout.razor b/CaddyManager/Components/Layout/MainLayout.razor
index af7efef..97262d0 100644
--- a/CaddyManager/Components/Layout/MainLayout.razor
+++ b/CaddyManager/Components/Layout/MainLayout.razor
@@ -30,10 +30,8 @@
             <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Href="https://github.com/daothanhduy305/CaddyManager" Target="_blank" />
         </MudAppBar>
         <NavigationDrawer @ref="_drawer"/>
-        <MudMainContent Class="pt-16 px-16 pb-10">
-            <MudContainer Class="mt-6">
-                @Body
-            </MudContainer>
+        <MudMainContent Class="pt-0" Style="height: calc(100vh - var(--mud-appbar-height) + var(--mud-appbar-height)/4); margin-top: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/4);">
+            @Body
         </MudMainContent>
     </MudLayout>
 }
\ No newline at end of file
diff --git a/CaddyManager/Components/Pages/Caddy/CaddyReverseProxies/CaddyReverseProxiesPage.razor b/CaddyManager/Components/Pages/Caddy/CaddyReverseProxies/CaddyReverseProxiesPage.razor
index 5b3682e..488ca94 100644
--- a/CaddyManager/Components/Pages/Caddy/CaddyReverseProxies/CaddyReverseProxiesPage.razor
+++ b/CaddyManager/Components/Pages/Caddy/CaddyReverseProxies/CaddyReverseProxiesPage.razor
@@ -4,7 +4,7 @@
 
 <PageTitle>Reverse proxy configurations</PageTitle>
 
-<MudContainer Class="d-flex flex-row flex-grow-1 gap-4 align-center">
+<MudStack Row Class="px-20 mud-background-body pt-8">
     <MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add"
                OnClick="NewReverseProxy">New...
     </MudButton>
@@ -24,8 +24,9 @@
                   OnDebounceIntervalElapsed="HandleIntervalElapsed" @bind-Value="_debouncedText"
                   AdornmentIcon="@(string.IsNullOrWhiteSpace(_debouncedText) ? Icons.Material.Filled.Search : Icons.Material.Filled.Close)"
                   OnAdornmentClick="HandleSearchBarAdornmentClick" />
-</MudContainer>
-<MudList T="CaddyConfigurationInfo" Class="pt-10" SelectionMode="SelectionMode.MultiSelection"
+</MudStack>
+<MudContainer Class="mt-8 overflow-y-auto" Style="height: calc(100vh - 3 * var(--mud-appbar-height) + 3 * var(--mud-appbar-height)/4 - 8px);">
+    <MudList T="CaddyConfigurationInfo" Class="py-4" SelectionMode="SelectionMode.MultiSelection"
          @bind-SelectedValues="_selectedCaddyConfigurations">
     @foreach (var (index, caddyConfig) in _availableCaddyConfigurations.Index())
     {
@@ -37,4 +38,5 @@
             <MudDivider/>
         }
     }
-</MudList>
\ No newline at end of file
+</MudList>
+</MudContainer>
\ No newline at end of file
diff --git a/CaddyManager/Components/Pages/Caddy/CaddyfilePage.razor b/CaddyManager/Components/Pages/Caddy/CaddyfilePage.razor
index 5f6501b..ca5742d 100644
--- a/CaddyManager/Components/Pages/Caddy/CaddyfilePage.razor
+++ b/CaddyManager/Components/Pages/Caddy/CaddyfilePage.razor
@@ -3,19 +3,21 @@
 
 <PageTitle>Global Caddyfile</PageTitle>
 
-<MudCard>
-    <MudCardHeader>
-        <MudText Typo="Typo.h6">
-            Global Caddyfile
-        </MudText>
-    </MudCardHeader>
-    <MudCardContent>
-        <MudText Typo="Typo.caption" Class="pl-4">File content</MudText>
-        <StandaloneCodeEditor @ref="_codeEditor" ConstructionOptions="@EditorConstructionOptions"
-                              CssClass="caddy-file-editor global-caddy mt-1"></StandaloneCodeEditor>
-    </MudCardContent>
-    <MudCardActions Class="pb-4 pr-4 d-flex flex-row-reverse gap-4">
-        <MudButton Color="Color.Primary" OnClick="Submit">Save</MudButton>
-        <MudButton OnClick="Cancel">Cancel</MudButton>
-    </MudCardActions>
-</MudCard>
\ No newline at end of file
+<MudContainer Class="pt-8">
+    <MudCard>
+        <MudCardHeader>
+            <MudText Typo="Typo.h6">
+                Global Caddyfile
+            </MudText>
+        </MudCardHeader>
+        <MudCardContent>
+            <MudText Typo="Typo.caption" Class="pl-4">File content</MudText>
+            <StandaloneCodeEditor @ref="_codeEditor" ConstructionOptions="@EditorConstructionOptions"
+                                CssClass="caddy-file-editor global-caddy mt-1"></StandaloneCodeEditor>
+        </MudCardContent>
+        <MudCardActions Class="pb-4 pr-4 d-flex flex-row-reverse gap-4">
+            <MudButton Color="Color.Primary" OnClick="Submit">Save</MudButton>
+            <MudButton OnClick="Cancel">Cancel</MudButton>
+        </MudCardActions>
+    </MudCard>
+</MudContainer>
\ No newline at end of file