fix(trading): asset option on mobile got overflown (#2782)

libs/assets/src/lib/asset-option.tsx

@@ -0,0 +1,15 @@
+import { Option } from '@vegaprotocol/ui-toolkit';
+import type { AssetFieldsFragment } from './__generated__/Asset';
+
+export const AssetOption = ({ asset }: { asset: AssetFieldsFragment }) => {
+  return (
+    <Option key={asset.id} value={asset.id}>
+      <div className="flex flex-col items-start">
+        <span>{asset.name}</span>
+        <div className="text-[10px] font-mono w-full text-left break-all">
+          <span className="text-gray-500">{asset.id} -</span> {asset.symbol}
+        </div>
+      </div>
+    </Option>
+  );
+};

libs/assets/src/lib/index.ts

@@ -4,3 +4,4 @@ export * from './asset-data-provider';
 export * from './assets-data-provider';
 export * from './asset-details-dialog';
 export * from './asset-details-table';
+export * from './asset-option';

libs/deposits/src/lib/deposit-form.tsx

@@ -1,4 +1,5 @@
 import type { Asset } from '@vegaprotocol/assets';
+import { AssetOption } from '@vegaprotocol/assets';
 import {
   ethereumAddress,
   t,
@@ -17,7 +18,6 @@ import {
   Input,
   InputError,
   RichSelect,
-  Option,
 } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useWeb3React } from '@web3-react/core';
@@ -185,14 +185,7 @@ export const DepositForm = ({
               hasError={Boolean(errors.asset?.message)}
             >
               {assets.filter(isAssetTypeERC20).map((a) => (
-                <Option key={a.id} value={a.id}>
+                <AssetOption asset={a} />
-                  <div className="flex flex-col items-start">
-                    <span>{a.name}</span>
-                    <span className="text-[10px] font-mono">
-                      <span className="text-gray-500">{a.id} -</span> {a.symbol}
-                    </span>
-                  </div>
-                </Option>
               ))}
             </RichSelect>
           )}

libs/ui-toolkit/src/components/dialog/dialog.tsx

@@ -79,7 +79,7 @@ export function Dialog({
             )}
             <div className="flex gap-4 max-w-full">
               {icon && <div className="fill-current">{icon}</div>}
-              <div data-testid="dialog-content" className="flex-1">
+              <div data-testid="dialog-content" className="flex-1 max-w-full">
                 {title && (
                   <h1
                     className="text-xl uppercase mb-4 pr-2"

libs/ui-toolkit/src/components/select/select.tsx

@@ -69,7 +69,8 @@ export const RichSelect = forwardRef<
           data-testid={props['data-testid'] || 'rich-select-trigger'}
           className={classNames(
             defaultSelectElement(hasError),
-            'rounded-md pl-2 pr-11'
+            'rounded-md pl-2 pr-11',
+            'max-w-full overflow-hidden break-all'
           )}
           id={id}
           ref={forwardedRef}

libs/withdraws/src/lib/withdraw-form.tsx

@@ -1,4 +1,5 @@
 import type { Asset } from '@vegaprotocol/assets';
+import { AssetOption } from '@vegaprotocol/assets';
 import {
   ethereumAddress,
   minSafe,
@@ -14,7 +15,6 @@ import {
   Input,
   InputError,
   RichSelect,
-  Option,
 } from '@vegaprotocol/ui-toolkit';
 import { useWeb3React } from '@web3-react/core';
 import BigNumber from 'bignumber.js';
@@ -110,14 +110,7 @@ export const WithdrawForm = ({
         hasError={Boolean(errors.asset?.message)}
       >
         {assets.filter(isAssetTypeERC20).map((a) => (
-          <Option key={a.id} value={a.id}>
+          <AssetOption asset={a} />
-            <div className="flex flex-col items-start">
-              <span>{a.name}</span>
-              <span className="text-[10px] font-mono">
-                <span className="text-gray-500">{a.id} -</span> {a.symbol}
-              </span>
-            </div>
-          </Option>
         ))}
       </RichSelect>
     );