Merge pull request #22345 from abpframework/feature/#19370

Angular - UI Misalignment in Permissions Section

npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts

@@ -40,27 +40,34 @@ type PermissionWithGroupName = PermissionGrantInfoDto & {
   exportAs: 'abpPermissionManagement',
   styles: [
     `
-      .overflow-scroll {
-        max-height: 70vh;
-        overflow-y: scroll;
-      }
-
       .scroll-in-modal {
         overflow: auto;
-        max-height: calc(100vh - 15rem);
+        /*
-      }
+        To maintain a 28px top margin and 28px bottom margin when the modal reaches full height, the scrollable area needs to be 100vh - 23.1rem
-
+         */
-      fieldset legend {
+        max-height: calc(100vh - 23.1rem);
-        float: none;
-        width: auto;
       }
 
       .lpx-scroll-pills-container ul {
         display: block;
-        max-height: 500px;
         overflow-y: auto;
       }
 
+      /* Target mobile screens */
+      @media (max-width: 768px) {
+        .scroll-in-modal {
+          max-height: calc(100vh - 15rem);
+        }
+        .lpx-scroll-pills-container ul {
+          max-height: 500px;
+        }
+      }
+
+      fieldset legend {
+        float: none;
+        width: auto;
+      }
+
       .lpx-scroll-pills-container .tab-content {
         padding-top: 0 !important;
         padding-bottom: 0 !important;