fix: overflow hidden for long symbols

src/components/transactions/AssetInput.tsx

@@ -195,13 +195,24 @@ export const AssetInput = <T extends Asset = Asset>({
             </IconButton>
           )}
           {!onSelect || assets.length === 1 ? (
-            <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
+            <Box sx={{ display: 'inline-flex', alignItems: 'center', minWidth: 0 }}>
               <TokenIcon
                 aToken={asset.aToken}
                 symbol={asset.iconSymbol || asset.symbol}
                 sx={{ mr: 2, ml: 4 }}
               />
-              <Typography variant="h3" sx={{ lineHeight: '28px' }} data-cy={'inputAsset'}>
+              <Typography
+                variant="h3"
+                data-cy="inputAsset"
+                title={symbol}
+                sx={{
+                  lineHeight: '28px',
+                  maxWidth: '9ch',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+              >
                 {symbol}
               </Typography>
             </Box>

src/components/transactions/Withdraw/WithdrawModalContent.tsx

@@ -167,6 +167,15 @@ export const WithdrawModalContent = ({
               ? currentNetworkConfig.baseAssetSymbol
               : poolReserve.symbol
           }
+          sx={{
+            maxWidth: { xs: '140px', sm: '180px' },
+            '& > span:last-of-type': {
+              minWidth: 0,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            },
+          }}
         />
         <DetailsHFLine
           visibleHfChange={!!_amount}