Merge pull request 'Scrollbar Behavior in "Choose Organization" (Projects → Organization Tab)' (#436) from Kartik_Task#1374 into Organization_Management

Reviewed-on: #436
Merged

src/components/Organization/OrgPicker.css

@@ -0,0 +1,24 @@
+/* Default: hide scrollbar */
+.scrollable-tbody {
+  max-height: 350px;
+  overflow-y: auto;
+  scrollbar-width: none; /* Firefox */
+}
+.scrollable-tbody::-webkit-scrollbar {
+  width: 0; /* Chrome, Safari */
+}
+
+/* On hover: show scrollbar */
+.scrollable-tbody:hover {
+  scrollbar-width: thin; /* Firefox */
+}
+.scrollable-tbody:hover::-webkit-scrollbar {
+  width: 6px; /* Adjust width */
+}
+.scrollable-tbody:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+}
+.scrollable-tbody:hover::-webkit-scrollbar-track {
+  background: transparent;
+}

src/components/Organization/OrgPickerfromTenant.jsx

@@ -6,6 +6,7 @@ import {
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 import Label from "../common/Label";
 import Pagination from "../common/Pagination";
+import "./OrgPicker.css"
 
 const OrgPickerfromTenant = ({ title }) => {
   const [searchText, setSearchText] = useState("");
@@ -104,7 +105,7 @@ const OrgPickerfromTenant = ({ title }) => {
 
           <div
             className="scrollable-tbody overflow-y-auto"
-            style={{ maxHeight: "350px", overflowY: "auto" }}
+            style={{ maxHeight: "350px" }}
           >
             <table className="table dataTable text-nowrap mb-0">
               <tbody>