From b3a82e45ab35c9225d0b9d23768113809bd1f111 Mon Sep 17 00:00:00 2001
From: Pochana Srikar Reddy
 <59635392+SRIKARREDDY-dotorg@users.noreply.github.com>
Date: Thu, 12 Dec 2024 10:59:12 +0530
Subject: [PATCH] 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>
---
 .../ManageGroupPermissionResources.jsx        |  2 +-
 frontend/src/_styles/mixins.scss              | 25 +++++++++++++++++++
 frontend/src/_styles/tabler.scss              |  5 ++++
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ManageGroupPermissionResources/ManageGroupPermissionResources.jsx b/frontend/src/ManageGroupPermissionResources/ManageGroupPermissionResources.jsx
index 906517fe1f..e14486fe18 100644
--- a/frontend/src/ManageGroupPermissionResources/ManageGroupPermissionResources.jsx
+++ b/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' : ''}`}>
diff --git a/frontend/src/_styles/mixins.scss b/frontend/src/_styles/mixins.scss
index 2e34ce0a3f..295597fa99 100644
--- a/frontend/src/_styles/mixins.scss
+++ b/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;
+  }
+}
diff --git a/frontend/src/_styles/tabler.scss b/frontend/src/_styles/tabler.scss
index bf5d3f0ce3..393376db5d 100644
--- a/frontend/src/_styles/tabler.scss
+++ b/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
 }