From a6acbabea6c92a71e1a70013f469d05f04fc2428 Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Wed, 15 Jan 2025 17:17:53 +0000
Subject: [PATCH] feat: fix mobile viewport layout

---
 .../pure/FavoriteTokensList/styled.ts         | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/FavoriteTokensList/styled.ts b/apps/cowswap-frontend/src/modules/tokensList/pure/FavoriteTokensList/styled.ts
index d15fe98760..ee278a509a 100644
--- a/apps/cowswap-frontend/src/modules/tokensList/pure/FavoriteTokensList/styled.ts
+++ b/apps/cowswap-frontend/src/modules/tokensList/pure/FavoriteTokensList/styled.ts
@@ -22,10 +22,25 @@ export const List = styled.div`
   padding-top: 10px;
 
   ${Media.upToSmall()} {
+    width: 0;
+    min-width: 100%;
     flex-wrap: nowrap;
     overflow-x: scroll;
-    padding-bottom: 10px;
-    ${({ theme }) => theme.colorScrollbar};
+    overflow-y: hidden;
+
+    padding: 10px 0;
+    -webkit-overflow-scrolling: touch;
+
+    @media (hover: hover) {
+      ${({ theme }) => theme.colorScrollbar};
+    }
+
+    @media (hover: none) {
+      scrollbar-width: none;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
   }
 `
 
@@ -47,6 +62,11 @@ export const TokensItem = styled.button`
   background: ${({ disabled }) => disabled && `var(${UI.COLOR_PAPER_DARKER})`};
   opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
   transition: border var(${UI.ANIMATION_DURATION}) ease-in-out;
+  white-space: nowrap;
+
+  ${Media.upToSmall()} {
+    flex: 0 0 auto;
+  }
 
   :hover {
     border: 1px solid ${({ disabled }) => (disabled ? `var(${UI.COLOR_PAPER_DARKER})` : `var(${UI.COLOR_PRIMARY})`)};