fix: token selector spacing (#4314)

* fixed issue
* updated snapshot

src/components/SearchModal/CurrencyList/__snapshots__/index.test.tsx.snap

@@ -26,6 +26,11 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
   justify-content: flex-start;
 }
 
+.c5 {
+  display: grid;
+  grid-auto-rows: auto;
+}
+
 .c1 {
   width: 100%;
   display: -webkit-box;
@@ -50,6 +55,12 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
   justify-content: space-between;
 }
 
+.c8 {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .c3 {
   padding: 4px 20px;
   height: 56px;
@@ -65,24 +76,12 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
 }
 
 .c6 {
-  max-width: 90%;
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 <div
     style="position: relative; height: 10px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
   >
@@ -94,12 +93,16 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
         style="position: absolute; left: 0px; top: 0px; height: 56px; width: 100%;"
         tabindex="0"
       >
-        CurrencyLogo currency=DAI
         <div
           class="c4"
+        >
+          CurrencyLogo currency=DAI
+        </div>
+        <div
+          class="c5"
         >
           <div
-            class="c5"
+            class="c0 c1"
           >
             <div
               class="c6 css-vurnku"
@@ -114,19 +117,30 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             DAI
           </div>
         </div>
-        <span />
+        <div
+          class="c4"
+        >
+          <div
+            class="c0 c1 c8"
+            style="justify-self: flex-end;"
+          />
+        </div>
       </div>
       <div
         class="c0 c1 c2 c3 token-item-0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
         style="position: absolute; left: 0px; top: 56px; height: 56px; width: 100%;"
         tabindex="0"
       >
-        CurrencyLogo currency=USDC
         <div
           class="c4"
+        >
+          CurrencyLogo currency=USDC
+        </div>
+        <div
+          class="c5"
         >
           <div
-            class="c5"
+            class="c0 c1"
           >
             <div
               class="c6 css-vurnku"
@@ -141,19 +155,30 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             USDC
           </div>
         </div>
-        <span />
+        <div
+          class="c4"
+        >
+          <div
+            class="c0 c1 c8"
+            style="justify-self: flex-end;"
+          />
+        </div>
       </div>
       <div
         class="c0 c1 c2 c3 token-item-0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599"
         style="position: absolute; left: 0px; top: 112px; height: 56px; width: 100%;"
         tabindex="0"
       >
-        CurrencyLogo currency=WBTC
         <div
           class="c4"
+        >
+          CurrencyLogo currency=WBTC
+        </div>
+        <div
+          class="c5"
         >
           <div
-            class="c5"
+            class="c0 c1"
           >
             <div
               class="c6 css-vurnku"
@@ -168,7 +193,14 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             WBTC
           </div>
         </div>
-        <span />
+        <div
+          class="c4"
+        >
+          <div
+            class="c0 c1 c8"
+            style="justify-self: flex-end;"
+          />
+        </div>
       </div>
     </div>
   </div>

src/components/SearchModal/CurrencyList/index.tsx

@@ -21,10 +21,10 @@ import { useCombinedActiveList } from '../../../state/lists/hooks'
 import { WrappedTokenInfo } from '../../../state/lists/wrappedTokenInfo'
 import { ThemedText } from '../../../theme'
 import { isTokenOnList } from '../../../utils'
-import Column from '../../Column'
+import Column, { AutoColumn } from '../../Column'
 import CurrencyLogo from '../../CurrencyLogo'
 import Loader from '../../Loader'
-import { RowBetween, RowFixed } from '../../Row'
+import Row, { RowBetween, RowFixed } from '../../Row'
 import { MouseoverTooltip } from '../../Tooltip'
 import ImportRow from '../ImportRow'
 import { LoadingRows, MenuItem } from '../styleds'
@@ -41,7 +41,6 @@ const StyledBalanceText = styled(Text)`
 `
 
 const CurrencyName = styled(Text)`
-  max-width: 90%;
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
@@ -82,14 +81,9 @@ const TokenListLogoWrapper = styled.img`
   height: 20px;
 `
 
-const NameContainer = styled.div`
-  display: flex;
-  align-items: center;
-`
-
 function TokenTags({ currency }: { currency: Currency }) {
   if (!(currency instanceof WrappedTokenInfo)) {
-    return <span />
+    return null
   }
 
   const tags = currency.tags
@@ -159,12 +153,15 @@ function CurrencyRow({
         disabled={isSelected}
         selected={otherSelected}
       >
-        <CurrencyLogo currency={currency} size={'24px'} />
         <Column>
-          <NameContainer>
+          <CurrencyLogo currency={currency} size={'24px'} />
+        </Column>
+        <AutoColumn>
+          <Row>
             <CurrencyName title={currency.name}>{currency.name}</CurrencyName>
+
             {phase0Flag === Phase0Variant.Enabled && <TokenSafetyIcon warning={warning} />}
-          </NameContainer>
+          </Row>
           <ThemedText.DeprecatedDarkGray ml="0px" fontSize={'12px'} fontWeight={300}>
             {!currency.isNative && !isOnSelectedList && customAdded ? (
               <Trans>{currency.symbol} • Added by user</Trans>
@@ -172,8 +169,12 @@ function CurrencyRow({
               currency.symbol
             )}
           </ThemedText.DeprecatedDarkGray>
+        </AutoColumn>
+        <Column>
+          <RowFixed style={{ justifySelf: 'flex-end' }}>
+            <TokenTags currency={currency} />
+          </RowFixed>
         </Column>
-        <TokenTags currency={currency} />
         {showCurrencyAmount && (
           <RowFixed style={{ justifySelf: 'flex-end' }}>
             {balance ? <Balance balance={balance} /> : account ? <Loader /> : null}