diff --git a/components/brave_wallet_ui/components/asset-name-and-icon/index.tsx b/components/brave_wallet_ui/components/asset-name-and-icon/index.tsx index be3deaf7079b..5e6b8cc8b4da 100644 --- a/components/brave_wallet_ui/components/asset-name-and-icon/index.tsx +++ b/components/brave_wallet_ui/components/asset-name-and-icon/index.tsx @@ -5,7 +5,13 @@ import * as React from 'react' -import { StyledWrapper, NameAndSymbolWrapper, AssetName, AssetSymbol, AssetIcon } from './style' +import { + StyledWrapper, + NameAndSymbolWrapper, + AssetName, + AssetSymbol, + AssetIcon +} from './style' export interface Props { symbol: string @@ -14,15 +20,11 @@ export interface Props { } export const AssetNameAndIcon = (props: Props) => { - const { - assetLogo, - assetName, - symbol - } = props + const { assetLogo, assetName, symbol } = props return ( - + {assetName} {symbol} diff --git a/components/brave_wallet_ui/components/asset-name-and-icon/style.ts b/components/brave_wallet_ui/components/asset-name-and-icon/style.ts index d0c65333e14c..034df608aaa3 100644 --- a/components/brave_wallet_ui/components/asset-name-and-icon/style.ts +++ b/components/brave_wallet_ui/components/asset-name-and-icon/style.ts @@ -23,6 +23,7 @@ export const NameAndSymbolWrapper = styled.div` display: flex; flex-direction: column; justify-content: space-between; + align-items: flex-start; height: 100%; padding: 1px 0; ` @@ -34,6 +35,11 @@ export const AssetName = styled.span` font-style: normal; font-weight: 600; line-height: 24px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 160px; + text-align: left; ` export const AssetSymbol = styled.span` @@ -44,4 +50,5 @@ export const AssetSymbol = styled.span` font-weight: 500; line-height: 18px; text-transform: uppercase; + text-align: left; `