fix: broken CurrencyInputDropdown for mobile devices

[Jdecristi]

Description

Fixes #7286

Screen capture

Before	After

Test plan

1. Go to https://app.uniswap.org/#/pools
2. Click on "+ New Position"

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
interface	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 4, 2023 9:54pm

[codecov[bot]]

Codecov Report

Merging #7287 (d39df8f) into main (b9db195) will increase coverage by 40.27%. The diff coverage is n/a.

Flag	Coverage Δ
cloud-tests	82.75% <ø> (ø)
unit-tests	?

Flags with carried forward coverage won't be shown. Click here to find out more.

[Jdecristi]

@JFrankfurt @natew is this an issue? What is the fix for code coverage decreases?

[JFrankfurt]

Since it's a single character copy change you don't need to worry about it. Technically you could probably address that with a unit test that asserts text content or does a snapshot test on the component fragment.

[Jdecristi]

@JFrankfurt @natew I wrote a test checking for Select Token. This should satisfy code coverage requirements.

[linxuanweb]

I suggest you use media queries to reduce the font-size for mobile devices; otherwise, the current font-size will still appear broken text on smaller screen devices like the iPhone SE.

you can change the StyledTokenName code like this：

const StyledTokenName = styled.span<{ active?: boolean }>`
  ${({ active }) => (active ? '  margin: 0 0.25rem 0 0.25rem;' : '  margin: 0 0.25rem 0 0.25rem;')}
  font-size: 20px;

  @media only screen and (max-width: ${BREAKPOINTS.md}px)
    font-size: 16px;
  }
`