Add scrollable for the user groups (#10754)

* Add scrollable for the user groups, users and data sources

* Kept Scrollable only in User Groups

* Created new css class for scrollable and added to tab-content pane

---------

Co-authored-by: Pochana Srikar Reddy <pochasri@amazon.com>

frontend/src/ManageGroupPermissionResources/ManageGroupPermissionResources.jsx

@@ -411,7 +411,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
               </nav>
 
               <div className="manage-groups-body">
-                <div className="tab-content">
+                <div className="tab-content user-group-scrollable">
                   {/* Apps Tab */}
 
                   <div className={`tab-pane ${currentTab === 'apps' ? 'active show' : ''}`}>

frontend/src/_styles/mixins.scss

@@ -35,3 +35,28 @@
       }
     }
 }
+
+@mixin scrollable($max-height: 50vh) {
+  display: block;
+  max-height: $max-height;
+  overflow-y: scroll;
+  scrollbar-width: thin;
+  scrollbar-color: #888 #f1f1f1;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #888;
+    border-radius: 4px;
+    &:hover {
+      background-color: #555;
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+}

frontend/src/_styles/tabler.scss

@@ -7,6 +7,7 @@
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
 @charset "UTF-8";
+@import "./mixins.scss";
 
 @font-face {
     font-display: swap;
@@ -3817,6 +3818,10 @@ fieldset:disabled .btn {
     display: none
 }
 
+.user-group-scrollable {
+    @include scrollable(60vh); /* Adjust the max-height if necessary */
+}
+  
 .tab-content>.active {
     display: block
 }