Fix overflowing asset name in the market grid

brave · Sep 19, 2023 · 842a39d · 842a39d
1 parent cc69cb1
commit 842a39d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
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
@@ -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 (
     <StyledWrapper>
-      <AssetIcon src={assetLogo} loading="lazy" />
+      <AssetIcon src={assetLogo} loading='lazy' />
       <NameAndSymbolWrapper>
         <AssetName>{assetName}</AssetName>
         <AssetSymbol>{symbol}</AssetSymbol>

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
@@ -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;
 `