CORE-4966: scroable table (#1199) (#1200)

oacore · Aug 16, 2024 · c70e11b · c70e11b
1 parent e4701ef
commit c70e11b
Showing 1 changed file with 27 additions and 4 deletions.
diff --git a/design-v2/components/membership-table/styles.module.scss b/design-v2/components/membership-table/styles.module.scss
@@ -18,6 +18,32 @@ $card-header-color: #fef5ef;
   }
 }
 
+.table {
+  &::-webkit-scrollbar {
+    height: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 20px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 20px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+  }
+  @media (max-width: 576px) {
+    overflow-x: auto;
+    overflow-y: hidden;
+    display: block;
+    white-space: nowrap;
+  }
+}
+
 .table-caption {
   min-height: 1rem;
   text-align: center;
@@ -97,9 +123,6 @@ $card-header-color: #fef5ef;
   font-weight: 400;
   text-align: center;
   background-color: #fae2d2;
-  @media (max-width: $breakpoint-sm) {
-    padding: 2px;
-  }
   &-active {
     background-color: #fae2d2;
   }
@@ -139,7 +162,7 @@ $card-header-color: #fef5ef;
     font-size: 21px;
     font-weight: 500;
     @media (max-width: $breakpoint-sm) {
-      font-size: 10px;
+      font-size: 15px;
     }
     a {
       color: var(--black);