From f59af10a34bc562a14c74337a8ec438322932af3 Mon Sep 17 00:00:00 2001
From: liangshiwei <deawback@hotmail.com>
Date: Thu, 6 Mar 2025 14:25:36 +0800
Subject: [PATCH] Enhance Permission Management Modal with scrollable tabs and
 improved styling

---
 .../PermissionManagementModal.razor           | 107 +++++++++---------
 .../PermissionManagementModal.razor.css       |  10 +-
 2 files changed, 60 insertions(+), 57 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 fc9884bf4ef..87c2c0db91a 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
@@ -5,7 +5,7 @@
             <ModalTitle>@L["Permissions"] - @_entityDisplayName</ModalTitle>
             <CloseButton Clicked="CloseModal" />
         </ModalHeader>
-        <ModalBody MaxHeight="50">
+        <ModalBody Overflow="Overflow.Hidden">
 
             <Row Class="row d-flex align-items-center mb-2">
                 <Column>
@@ -36,62 +36,65 @@
                 
                     @if (_groups != null && _groups.Any())
                     {
-                        <Tabs @key="_groups" TabPosition="TabPosition.Start" Pills="true" SelectedTab="@_selectedTabName" SelectedTabChanged="@OnSelectedTabChangedAsync">
-                            <Items>
-                                @foreach (var group in _groups)
-                                {
-                                    <Tab Name="@GetNormalizedGroupName(group.Name)">
-                                        @if (group.Permissions.Any(x => x.IsGranted))
-                                        {
-                                            <span>
+                        <div class="lpx-scroll-pills-container" >
+                            <Tabs @key="_groups" TabPosition="TabPosition.Start" Pills="true" SelectedTab="@_selectedTabName" SelectedTabChanged="@OnSelectedTabChangedAsync">
+                                <Items>
+                                    @foreach (var group in _groups)
+                                    {
+                                        <Tab Name="@GetNormalizedGroupName(group.Name)">
+                                            @if (group.Permissions.Any(x => x.IsGranted))
+                                            {
+                                                <span>
                                                 <b>@group.DisplayName ( @(group.Permissions.Count(x => x.IsGranted)) )</b>
                                             </span>
-                                        }
-                                        else
-                                        {
-                                            <span>
+                                            }
+                                            else
+                                            {
+                                                <span>
                                                 @group.DisplayName ( @(group.Permissions.Count(x => x.IsGranted)) )
                                             </span>
-                                        }
-                                    </Tab>
-                                }
-                            </Items>
-                            <Content>
-                                @foreach (var group in _groups)
-                                {
-                                    <TabPanel Name="@GetNormalizedGroupName(group.Name)">
-                                        
-                                        <Field>
-                                            <Check
-                                                Disabled="@(IsPermissionGroupDisabled(group))"
-                                                Checked="@(group.Permissions.All(x => x.IsGranted))"
-                                                Cursor="Cursor.Pointer"
-                                                CheckedChanged="@(b => GroupGrantAllChanged(b, group))"
-                                                TValue="bool">
-                                                @L["SelectAllInThisTab"]
-                                            </Check>
-                                        </Field>
+                                            }
+                                        </Tab>
+                                    }
+                                </Items>
+                                <Content>
+                                    @foreach (var group in _groups)
+                                    {
+                                        <TabPanel Name="@GetNormalizedGroupName(group.Name)">
+                                            <div class="w-100" style="height: 500px;overflow-y: auto">
+                                                <Field>
+                                                    <Check
+                                                        Disabled="@(IsPermissionGroupDisabled(group))"
+                                                        Checked="@(group.Permissions.All(x => x.IsGranted))"
+                                                        Cursor="Cursor.Pointer"
+                                                        CheckedChanged="@(b => GroupGrantAllChanged(b, group))"
+                                                        TValue="bool">
+                                                        @L["SelectAllInThisTab"]
+                                                    </Check>
+                                                </Field>
 
-                                        <Divider />
-                                        
-                                        @foreach (var permission in group.Permissions)
-                                        {
-                                            <Field Style="@($"margin-inline-start: {GetPermissionDepthOrDefault(permission.Name) * 20}px")">
-                                                <Check
-                                                    Disabled="@(IsDisabledPermission(permission))"
-                                                    Cursor="Cursor.Pointer"
-                                                    Checked="@permission.IsGranted"
-                                                    CheckedChanged="@(b => PermissionChanged(b, group, permission))"
-                                                    TValue="bool">
-                                                    @GetShownName(permission)
-                                                </Check>
-                                            </Field>
-                                        }
-                                        
-                                    </TabPanel>
-                                }
-                            </Content>
-                        </Tabs>
+                                                <Divider />
+
+                                                @foreach (var permission in group.Permissions)
+                                                {
+                                                    <Field Style="@($"margin-inline-start: {GetPermissionDepthOrDefault(permission.Name) * 20}px")">
+                                                        <Check
+                                                            Disabled="@(IsDisabledPermission(permission))"
+                                                            Cursor="Cursor.Pointer"
+                                                            Checked="@permission.IsGranted"
+                                                            CheckedChanged="@(b => PermissionChanged(b, group, permission))"
+                                                            TValue="bool">
+                                                            @GetShownName(permission)
+                                                        </Check>
+                                                    </Field>
+                                                }
+                                            </div>
+                                        </TabPanel>
+                                    }
+                                </Content>
+                            </Tabs>
+                        </div>
+                       
                     }
                 
             </fieldset>
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 6c827bec4a4..f6870a7a16a 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
@@ -3,29 +3,29 @@ fieldset legend {
     width: auto;
 }
 
-.lpx-scroll-pills-container ul {
+::deep .lpx-scroll-pills-container ul {
     display: block;
     max-height: 500px;
     overflow-y: auto;
 }
 
-.lpx-scroll-pills-container .tab-content {
+::deep .lpx-scroll-pills-container .tab-content {
     padding-top: 0 !important;
     padding-bottom: 0 !important;
 }
 
-.lpx-scroll-pills-container ul li {
+::deep .lpx-scroll-pills-container ul li {
     border: 1px solid #e8eef3;
     margin-bottom: 10px;
     border-radius: 10px;
 }
 
-.lpx-scroll-pills-container ul li a.active {
+::deep .lpx-scroll-pills-container ul li a.active {
     color: #fff !important;
     border-color: #6c5dd3 !important;
     background-color: #6c5dd3 !important;
 }
 
-.lpx-theme-dark .lpx-scroll-pills-container ul li {
+::deep .lpx-theme-dark .lpx-scroll-pills-container ul li {
     border: 1px solid #23262a;
 }
\ No newline at end of file