refactored: CSS files in src/screens/OrganizationDashboard(fixes: Pal…

…isadoesFoundation#2513)
devender18 · Dec 8, 2024 · b6c7566 · b6c7566
1 parent 9ac9e46
commit b6c7566
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx
@@ -435,7 +435,10 @@ function OrganizationDashboard(): JSX.Element {
                   {t('viewAll')}
                 </Button>
               </div>
-              <Card.Body className={styles.containerBody} style={{ padding: '0px' }}>
+              <Card.Body
+                className={styles.containerBody}
+                style={{ padding: '0px' }}
+              >
                 {rankingsLoading ? (
                   [...Array(3)].map((_, index) => {
                     return <CardItemLoading key={`rankingLoading_${index}`} />;

diff --git a/src/style/app.module.css b/src/style/app.module.css
@@ -588,20 +588,32 @@ hr {
   font-weight: 600;
 }
 
-.containerBody{
+.containerBody {
   min-height: 180px;
   padding-top: 0;
   max-height: 570px;
-  overflow-y: scroll;
+  overflow-y: auto;
   width: 100%;
   max-width: 400px;
   scrollbar-width: thin;
   scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
+
+  &::-webkit-scrollbar {
+    width: thin;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
 }
 
 .containerBody .emptyContainer {
   display: flex;
-  height: 180px;
+  min-height: 180px;
   justify-content: center;
   align-items: center;
 }
@@ -610,12 +622,10 @@ hr {
   aspect-ratio: 1;
   border-radius: 50%;
   width: 35px;
-
 }
 
 .cardBody {
   min-height: 180px;
-
 }
 
 .cardBody .textBox {