fix: clip long token names (#7066)

* Clip token name with ellipsis style

* Use built-in ellipsis style

src/components/AccountDrawer/MiniPortfolio/Tokens/index.tsx

@@ -82,6 +82,9 @@ export default function Tokens({ account }: { account: string }) {
 const TokenBalanceText = styled(ThemedText.BodySecondary)`
   ${EllipsisStyle}
 `
+const TokenNameText = styled(ThemedText.SubHeader)`
+  ${EllipsisStyle}
+`
 
 type TokenBalance = NonNullable<
   NonNullable<NonNullable<PortfolioBalancesQuery['portfolios']>[number]>['tokenBalances']
@@ -116,7 +119,7 @@ function TokenRow({ token, quantity, denominatedValue, tokenProjectMarket }: Tok
     >
       <PortfolioRow
         left={<PortfolioLogo chainId={currency.chainId} currencies={[currency]} size="40px" />}
-        title={<ThemedText.SubHeader>{token?.name}</ThemedText.SubHeader>}
+        title={<TokenNameText>{token?.name}</TokenNameText>}
         descriptor={
           <TokenBalanceText>
             {formatNumber(quantity, NumberType.TokenNonTx)} {token?.symbol}