From c45924a6fb8dc297708776ce4511a0c9daf94ae6 Mon Sep 17 00:00:00 2001
From: yuli-ferna <35125931+yuli-ferna@users.noreply.github.com>
Date: Fri, 20 Sep 2024 13:48:42 -0400
Subject: [PATCH] Fix responsive in Chain list (#2684)

---
 .../views/v2/Bridge/AssetPicker/ChainList.tsx | 25 ++++++++++++++++---
 .../views/v2/Bridge/AssetPicker/TokenList.tsx |  2 +-
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/ChainList.tsx b/wormhole-connect/src/views/v2/Bridge/AssetPicker/ChainList.tsx
index 46883efe4..bc3019579 100644
--- a/wormhole-connect/src/views/v2/Bridge/AssetPicker/ChainList.tsx
+++ b/wormhole-connect/src/views/v2/Bridge/AssetPicker/ChainList.tsx
@@ -16,13 +16,27 @@ import type { WalletData } from 'store/wallet';
 import SearchableList from 'views/v2/Bridge/AssetPicker/SearchableList';
 
 import { Chain } from '@wormhole-foundation/sdk';
+import { useMediaQuery, useTheme } from '@mui/material';
 
 const useStyles = makeStyles()((theme) => ({
   card: {
     width: '420px',
+    [theme.breakpoints.down('sm')]: {
+      maxWidth: '420px',
+      width: '360px',
+    },
+    '@media (max-width: 366px)': {
+      width: '330px',
+    },
   },
   cardContent: {
     paddingBottom: 0,
+    [theme.breakpoints.down('sm')]: {
+      padding: '16px 10px',
+      ':last-child': {
+        padding: '16px 10px',
+      },
+    },
   },
   title: {
     fontSize: 14,
@@ -60,9 +74,12 @@ type Props = {
 };
 
 const SHORT_LIST_SIZE = 5;
+const SHORT_LIST_SIZE_MOBILE = 4;
 
 const ChainList = (props: Props) => {
   const { classes } = useStyles();
+  const theme = useTheme();
+  const mobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   const topChains = useMemo(() => {
     const allChains = props.chainList ?? [];
@@ -72,18 +89,18 @@ const ChainList = (props: Props) => {
     const selectedChainIndex = allChains.findIndex((chain) => {
       return chain.key === selectedChain?.key;
     });
-
+    const shortListSize = mobile ? SHORT_LIST_SIZE_MOBILE : SHORT_LIST_SIZE;
     // If the selected chain is outside the top list, we add it to the top;
     // otherwise we do not change its index in the top list
     if (
       selectedChain &&
       selectedChainIndex &&
-      selectedChainIndex >= SHORT_LIST_SIZE
+      selectedChainIndex >= shortListSize
     ) {
-      return [selectedChain, ...allChains.slice(0, SHORT_LIST_SIZE - 1)];
+      return [selectedChain, ...allChains.slice(0, shortListSize - 1)];
     }
 
-    return allChains.slice(0, SHORT_LIST_SIZE);
+    return allChains.slice(0, shortListSize);
   }, [props.chainList, props.selectedChainConfig]);
 
   const shortList = useMemo(() => {
diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx b/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx
index d1f6493de..770e183f2 100644
--- a/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx
+++ b/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx
@@ -18,7 +18,7 @@ import { getTokenBridgeWrappedTokenAddressSync } from 'utils/sdkv2';
 
 const useStyles = makeStyles()((theme) => ({
   card: {
-    width: '420px',
+    maxWidth: '420px',
   },
   cardContent: {
     paddingTop: 0,