From 022873f85917212f47e7697f28efe4300a9f1fa2 Mon Sep 17 00:00:00 2001
From: liangshiwei <deawback@hotmail.com>
Date: Sat, 12 Apr 2025 14:34:14 +0800
Subject: [PATCH 1/2] Enhance permission modal to align all UI

---
 .../Components/PermissionManagementModal.razor             | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor b/modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor
index 87c2c0db91..49dfdb24c6 100644
--- a/modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor
+++ b/modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor
@@ -37,7 +37,12 @@
                     @if (_groups != null && _groups.Any())
                     {
                         <div class="lpx-scroll-pills-container" >
-                            <Tabs @key="_groups" TabPosition="TabPosition.Start" Pills="true" SelectedTab="@_selectedTabName" SelectedTabChanged="@OnSelectedTabChangedAsync">
+                            <Tabs @key="_groups"
+                                  VerticalItemsColumnSize="ColumnSize.Is4.OnDesktop"
+                                  TabPosition="TabPosition.Start"
+                                  Pills="true"
+                                  SelectedTab="@_selectedTabName"
+                                  SelectedTabChanged="@OnSelectedTabChangedAsync">
                                 <Items>
                                     @foreach (var group in _groups)
                                     {

From f794ff4543b12eb8d9bfef4137bf95e672b7c974 Mon Sep 17 00:00:00 2001
From: liangshiwei <deawback@hotmail.com>
Date: Tue, 15 Apr 2025 00:46:58 +0800
Subject: [PATCH 2/2] Enhance css styles

---
 .../Components/PermissionManagementModal.razor  | 10 ++++------
 .../PermissionManagementModal.razor.cs          |  2 +-
 .../PermissionManagementModal.razor.css         | 17 +++++++++++++----
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor b/modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor
index 49dfdb24c6..7992764c00 100644
--- a/modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor
+++ b/modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor
@@ -49,15 +49,13 @@
                                         <Tab Name="@GetNormalizedGroupName(group.Name)">
                                             @if (group.Permissions.Any(x => x.IsGranted))
                                             {
-                                                <span>
-                                                <b>@group.DisplayName ( @(group.Permissions.Count(x => x.IsGranted)) )</b>
-                                            </span>
+                                                <b>@group.DisplayName (@(group.Permissions.Count(x => x.IsGranted)))</b>
                                             }
                                             else
                                             {
-                                                <span>
-                                                @group.DisplayName ( @(group.Permissions.Count(x => x.IsGranted)) )
-                                            </span>
+                                                <small>
+                                                    @group.DisplayName (@(group.Permissions.Count(x => x.IsGranted)))
+                                                </small>
                                             }
                                         </Tab>
                                     }
diff --git a/modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor.cs b/modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor.cs
index d2c2e092d5..cd3be870a1 100644
--- a/modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor.cs
+++ b/modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor.cs
@@ -58,7 +58,7 @@ public partial class PermissionManagementModal
             var result = await PermissionAppService.GetAsync(_providerName, _providerKey);
 
             _entityDisplayName = entityDisplayName ?? result.EntityDisplayName;
-            _allGroups = result.Groups;
+            _allGroups = result.Groups.OrderBy(x => x.DisplayName).ToList();
             _groups = _allGroups.ToList();
 
             NormalizePermissionGroup();
diff --git a/modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor.css b/modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor.css
index f6870a7a16..a0b6579faf 100644
--- a/modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor.css
+++ b/modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor.css
@@ -15,7 +15,7 @@ fieldset legend {
 }
 
 ::deep .lpx-scroll-pills-container ul li {
-    border: 1px solid #e8eef3;
+    border: 1px solid var(--lpx-border-color);
     margin-bottom: 10px;
     border-radius: 10px;
 }
@@ -26,6 +26,15 @@ fieldset legend {
     background-color: #6c5dd3 !important;
 }
 
-::deep .lpx-theme-dark .lpx-scroll-pills-container ul li {
-    border: 1px solid #23262a;
-}
\ No newline at end of file
+::deep .nav-pills .nav-link {
+    background: none;
+    border: 0;
+    border-radius: var(--bs-nav-pills-border-radius);
+}
+
+::deep .nav-pills .nav-link:disabled {
+    color: var(--bs-nav-link-disabled-color);
+    background-color: transparent;
+    border-color: transparent;
+}
+