Merge pull request #4194 from CrocSwap/portfolio-changes

refactor explore layout and fix scrollbar issues
CrocSwap · Oct 8, 2024 · 9609054 · 9609054
2 parents 04032ac + fefaabc
commit 9609054
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 325 deletions.
diff --git a/src/App/App.css b/src/App/App.css
@@ -231,40 +231,7 @@ input[type='number'] {
     appearance: textfield;
     -moz-appearance: textfield;
 }
-.custom_scroll_ambient {
-    overflow-y: auto !important;
-
-}
-.custom_scroll_ambient::-webkit-scrollbar,
-.content-container::-webkit-scrollbar {
-    width: 8px !important; /* Adjust the width as needed */
-}
-.custom_scroll_ambient::-webkit-scrollbar-thumb,
-.content-container::-webkit-scrollbar-thumb {
-    border: 2px solid transparent !important; /* Space for the border */
-    background-clip: padding-box !important; /* Create space for the border */
-    border-radius: 8px !important; /* Adjust the border radius as needed */
-    background-image: linear-gradient(#06060c, #06060c),
-        linear-gradient(
-            0deg,
-            var(--accent1) 0%,
-            var(--accent5) 49.48%,
-            var(--accent1) 100%
-        ) !important;
-    background-origin: border-box !important;
-    background-clip: content-box, border-box !important; /* Clip the border to show gradient */
-    min-height: 50px !important; /* Set the minimum height for the scrollbar thumb */;
-
-
-
-}
-.custom_scroll_ambient::-webkit-scrollbar-track,
-.content-container::-webkit-scrollbar-track {
-    background: #06060c !important; /* Background color of the scrollbar track */
-    border-radius: 8px !important; /* Adjust the border radius as needed */
-    padding: 2px !important; /* Add padding to the track */;
-
-}
+
 /* -----------------------FUTA------------ */
 
 .futa_main {
@@ -356,6 +323,29 @@ input[type='number'] {
         pointer-events: none;
         /* display: none; */
     }
+
+    .custom_scroll_ambient::-webkit-scrollbar {
+        width: 5px !important;
+      }
+
+
+      /* Handle */
+      .custom_scroll_ambient::-webkit-scrollbar-thumb {
+        background: 
+        linear-gradient(
+            0deg,
+            var(--accent1) 0%,
+            var(--accent5) 49.48%,
+            var(--accent1) 100%
+        ) !important;
+      }
+
+      /* .custom_scroll_ambient{
+        scrollbar-width: thin;
+scrollbar-color: transparent;
+      } */
+
+
 }
 
 @media only screen and (min-width: 1280px) {

diff --git a/src/components/Global/Explore/DexTokens/DexTokens.module.css b/src/components/Global/Explore/DexTokens/DexTokens.module.css
@@ -62,16 +62,18 @@
     overflow-y: auto; /* Make only the content scrollable */
     scrollbar-gutter: stable; /* This will keep the layout stable when the scrollbar appears */
 
-    padding-right: 1rem;
+    overflow-x: hidden;
+
+    padding-right: 4px;
     padding-bottom: 1rem;
 }
 
 .borderRight {
     height: 100%;
-    width: 2px;
+    width: 1px;
     position: absolute;
     background-color: var(--dark3);
-    right: 18px;
+    right: 6px;
 }
 
 .tokens {
@@ -136,6 +138,20 @@
     align-items: center;
 }
 
+@media only screen and (min-width: 600px) {
+    .contentContainer{
+        padding-right: 1rem;
+        overflow-x: auto;
+    }
+
+    .borderRight {
+        width: 2px;
+        right: 18px;
+    }
+
+
+}
+
 @media only screen and (min-width: 768px) {
     .mainContainer {
         border: none;

diff --git a/src/components/Global/Explore/PoolRow/PoolRow.module.css b/src/components/Global/Explore/PoolRow/PoolRow.module.css
@@ -104,3 +104,4 @@
 
 
 }
+
diff --git a/src/components/Global/Explore/TopPools/TopPools.module.css b/src/components/Global/Explore/TopPools/TopPools.module.css
@@ -66,17 +66,18 @@
     ); /* Adjust this value based on your header's height */
     overflow-y: auto; /* Make only the content scrollable */
     scrollbar-gutter: stable; /* This will keep the layout stable when the scrollbar appears */
+    overflow-x: hidden;
 
-    padding-right: 1rem;
+    padding-right: 4px;
     padding-bottom: 1rem;
 }
 
 .borderRight {
     height: 100%;
-    width: 2px;
+    width: 1px;
     position: absolute;
     background-color: var(--dark3);
-    right: 18px;
+    right: 6px;
 }
 
 .tokens {
@@ -142,11 +143,26 @@
 .no_results button:hover {
     color: var(--text2);
 }
+@media only screen and (min-width: 600px) {
+    .contentContainer{
+        padding-right: 1rem;
+        overflow-x: auto;
+    }
+
+    .borderRight {
+        width: 2px;
+        right: 18px;
+    }
+
+
+}
 
 @media only screen and (min-width: 768px) {
     .mainContainer {
         border: none;
     }
+
+
     .no_results {
         height: 70%;
     }