fix: top token charts on mobile (#6967)

* fix: top token charts on mobile

* Update TokenRow.test.tsx.snap

* Update src/components/Tokens/TokenTable/TokenRow.tsx

Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

* Update src/components/Tokens/TokenTable/__snapshots__/TokenRow.test.tsx.snap

Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

* update

* Update TokenRow.test.tsx.snap

* Update TokenRow.test.tsx.snap

---------

Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>
This commit is contained in:
Brendan Wong 2023-07-28 17:50:02 -04:00 committed by GitHub
parent b4bb3d72d5
commit 136e68201f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 1 deletions

@ -14,7 +14,7 @@ import { CSSProperties, ReactNode } from 'react'
import { ArrowDown, ArrowUp, Info } from 'react-feather'
import { Link, useParams } from 'react-router-dom'
import styled, { css, useTheme } from 'styled-components/macro'
import { ClickableStyle } from 'theme'
import { BREAKPOINTS, ClickableStyle } from 'theme'
import {
LARGE_MEDIA_BREAKPOINT,
@ -163,6 +163,10 @@ const NameCell = styled(Cell)`
padding: 0px 8px;
min-width: 240px;
gap: 8px;
@media only screen and (max-width: ${BREAKPOINTS.xs}px) {
min-width: 200px;
}
`
const PriceCell = styled(DataCell)`
padding-right: 8px;

@ -257,6 +257,12 @@ exports[`LoadedRow.tsx renders a row 1`] = `
}
}
@media only screen and (max-width:396px) {
.c4 {
min-width: 200px;
}
}
@media only screen and (max-width:540px) {
.c21 {
display: none;