fix: horizontal scroll in views (#1830)

juspay · Dec 4, 2024 · b017689 · b017689
1 parent 64c8647
commit b017689
Show file tree

Hide file tree

Showing 11 changed files with 36 additions and 16 deletions.
diff --git a/src/components/FilterSelectBox.res b/src/components/FilterSelectBox.res
@@ -1919,7 +1919,7 @@ module BaseDropdown = {
                       selectButton
                     }}
                     <div
-                      className="p-1 hover:bg-gray-200 cursor-pointer border-l-2 pl-2.5 "
+                      className="p-1 hover:bg-gray-200 cursor-pointer border-l-2 "
                       onClick={_ => newInputSelect.name->onDeleteClick}>
                       <Icon size={13} name="cross-outline" />
                     </div>

diff --git a/src/components/LoadedTable.res b/src/components/LoadedTable.res
@@ -230,6 +230,7 @@ let make = (
   ~nonFrozenTableParentClass="",
   ~loadedTableParentClass="",
   ~remoteSortEnabled=false,
+  ~showAutoScroll=false,
 ) => {
   open LogicUtils
   let showPopUp = PopUpState.useShowPopUp()
@@ -828,6 +829,7 @@ let make = (
                 ?showborderColor
                 tableHeadingTextClass
                 nonFrozenTableParentClass
+                showAutoScroll
               />
             switch tableLocalFilter {
             | true =>

diff --git a/src/components/LoadedTable.resi b/src/components/LoadedTable.resi
@@ -116,4 +116,5 @@ let make: (
   ~nonFrozenTableParentClass: string=?,
   ~loadedTableParentClass: string=?,
   ~remoteSortEnabled: bool=?,
+  ~showAutoScroll: bool=?,
 ) => React.element
diff --git a/src/components/LoadedTableWithCustomColumns.res b/src/components/LoadedTableWithCustomColumns.res
@@ -64,6 +64,7 @@ let make = (
   ~noScrollbar=false,
   ~previewOnly=false,
   ~remoteSortEnabled=false,
+  ~showAutoScroll=false,
 ) => {
   let (showColumnSelector, setShowColumnSelector) = React.useState(() => false)
   let activeColumnsAtom = customColumnMapper->Some
@@ -151,5 +152,6 @@ let make = (
     ?setExtFilteredDataLength
     noScrollbar
     remoteSortEnabled
+    showAutoScroll
   />
 }
diff --git a/src/components/Table.res b/src/components/Table.res
@@ -656,6 +656,7 @@ let make = (
   ~showborderColor=true,
   ~tableHeadingTextClass="",
   ~nonFrozenTableParentClass="",
+  ~showAutoScroll=false,
 ) => {
   let isMobileView = MatchMedia.useMobileChecker()
   let rowInfo: array<array<cell>> = rows
@@ -888,22 +889,30 @@ let make = (
       ? ""
       : "overflow-scroll"
   let parentBorderRadius = !isHighchartLegend ? "rounded-lg" : ""
-  let sidebarScrollbarCss = `
-      @supports (-webkit-appearance: none) {
-        .sidebar-scrollbar {
-          scrollbar-color: #8a8c8f;
-        }
+  let tableScrollbarCss = `
+  @supports (-webkit-appearance: none) {
+    .table-scrollbar {
+      scrollbar-width: auto;
+      scrollbar-color: #8a8c8f; 
+    }
 
-        .sidebar-scrollbar::-webkit-scrollbar-thumb {
-          background-color: #8a8c8f;
-          border-radius: 3px;
-        }
+    .table-scrollbar::-webkit-scrollbar {
+      display: block;
+      height: 4px;
+      width: 5px;
+    }
 
-        .sidebar-scrollbar::-webkit-scrollbar-track {
-          display: none;
-        }
-      }
+    .table-scrollbar::-webkit-scrollbar-thumb {
+      background-color: #8a8c8f; 
+      border-radius: 3px;
+    }
+
+    .table-scrollbar::-webkit-scrollbar-track {
+      display:none;
+    }
+  }
     `
+  let autoscrollcss = showAutoScroll ? "table-scrollbar" : ""
   <div
     className={`flex flex-row items-stretch ${scrollBarClass} loadedTable ${parentMinWidthClass} ${customBorderClass->Option.getOr(
         parentBorderRadius,
@@ -920,9 +929,9 @@ let make = (
     } //replaced "overflow-auto" -> to be tested with master
   >
     <RenderIf condition={frozenUpto > 0}> {frozenTable} </RenderIf>
-    <style> {React.string(sidebarScrollbarCss)} </style>
+    <style> {React.string(tableScrollbarCss)} </style>
     <div
-      className={`flex-1 ${overflowClass} no-scrollbar ${childMinWidthClass} ${nonFrozenTableParentClass} sidebar-scrollbar`}>
+      className={`flex-1 ${overflowClass} no-scrollbar ${childMinWidthClass} ${nonFrozenTableParentClass} ${autoscrollcss} `}>
       nonFrozenTable
     </div>
     {switch customizeColumnNewTheme {

diff --git a/src/components/Table.resi b/src/components/Table.resi
@@ -305,4 +305,5 @@ let make: (
   ~showborderColor: bool=?,
   ~tableHeadingTextClass: string=?,
   ~nonFrozenTableParentClass: string=?,
+  ~showAutoScroll: bool=?,
 ) => React.element
diff --git a/src/screens/Customers/Customers.res b/src/screens/Customers/Customers.res
@@ -44,6 +44,7 @@ let make = () => {
       customColumnMapper={TableAtoms.customersMapDefaultCols}
       showSerialNumberInCustomizeColumns=false
       sortingBasedOnDisabled=false
+      showAutoScroll=true
     />
   </PageLoaderWrapper>
 }
diff --git a/src/screens/Disputes/Disputes.res b/src/screens/Disputes/Disputes.res
@@ -130,6 +130,7 @@ let make = () => {
           customColumnMapper={TableAtoms.disputesMapDefaultCols}
           showSerialNumberInCustomizeColumns=false
           sortingBasedOnDisabled=false
+          showAutoScroll=true
         />
       </div>
     </PageLoaderWrapper>

diff --git a/src/screens/Order/Orders.res b/src/screens/Order/Orders.res
@@ -193,6 +193,7 @@ let make = (~previewOnly=false) => {
           hideTitle=true
           previewOnly
           remoteSortEnabled=true
+          showAutoScroll=true
         />
       </PageLoaderWrapper>
     </div>

diff --git a/src/screens/Payouts/PayoutsList.res b/src/screens/Payouts/PayoutsList.res
@@ -102,6 +102,7 @@ let make = () => {
           customColumnMapper=TableAtoms.payoutsMapDefaultCols
           showSerialNumberInCustomizeColumns=false
           sortingBasedOnDisabled=false
+          showAutoScroll=true
         />
       </PageLoaderWrapper>
     </div>

diff --git a/src/screens/Refunds/Refund.res b/src/screens/Refunds/Refund.res
@@ -120,6 +120,7 @@ let make = () => {
           customColumnMapper=TableAtoms.refundsMapDefaultCols
           showSerialNumberInCustomizeColumns=false
           sortingBasedOnDisabled=false
+          showAutoScroll=true
         />
       </PageLoaderWrapper>
     </div>