fix: lock widths of market table cells - make it durable for long values (#2360)

apps/trading-e2e/src/integration/home.cy.ts

@@ -1,6 +1,7 @@
 import { aliasQuery } from '@vegaprotocol/cypress';
 import type { ProposalListFieldsFragment } from '@vegaprotocol/governance';
 import { Schema } from '@vegaprotocol/types';
+import { generateMarketsData } from '../support/mocks/generate-markets';
 
 const selectMarketOverlay = 'select-market-list';
 
@@ -52,7 +53,6 @@ describe('home', { tags: '@regression' }, () => {
   beforeEach(() => {
     cy.mockTradingPage();
     cy.mockGQLSubscription();
-    cy.visit('/');
   });
 
   describe('default market found', () => {
@@ -86,7 +86,6 @@ describe('home', { tags: '@regression' }, () => {
             });
           }
         });
-
       cy.getByTestId('dialog-close').click();
       cy.getByTestId(selectMarketOverlay).should('not.exist');
 
@@ -97,6 +96,36 @@ describe('home', { tags: '@regression' }, () => {
     });
   });
 
+  describe('market table should properly rendered', () => {
+    it('redirects to a default market with the landing dialog open', () => {
+      const override = {
+        marketsConnection: {
+          edges: [
+            {
+              node: {
+                data: {
+                  markPrice: '46126900581221212121212121212121212121212121212',
+                },
+              },
+            },
+          ],
+        },
+      };
+      const data = generateMarketsData(override);
+      cy.mockGQL((req) => {
+        aliasQuery(req, 'MarketsData', data);
+      });
+      cy.visit('/');
+      cy.wait('@Market');
+      cy.getByTestId(selectMarketOverlay)
+        .get('table')
+        .invoke('outerWidth')
+        .then((value) => {
+          expect(value).to.be.closeTo(554, 10);
+        });
+    });
+  });
+
   describe('no markets found', () => {
     it('redirects to a the empty market page and displays welcome notice', () => {
       cy.mockGQL((req) => {

apps/trading/components/select-market/select-market-columns.tsx

@@ -25,7 +25,8 @@ import { Last24hVolume } from '../last-24h-volume';
 
 type Market = MarketWithData & MarketWithCandles;
 
-export const cellClassNames = 'py-1 first:text-left text-right';
+const ellipsisClasses = 'whitespace-nowrap overflow-hidden text-ellipsis';
+export const cellClassNames = `py-1 first:text-left text-right ${ellipsisClasses}`;
 
 const FeesInfo = () => {
   return (
@@ -82,7 +83,7 @@ const headers: Column[] = [
   {
     kind: ColumnKind.ProductType,
     value: t('Type'),
-    className: `py-2 text-left hidden sm:table-cell`,
+    className: 'py-2 text-left hidden sm:table-cell',
     onlyOnDetailed: false,
   },
   {
@@ -204,13 +205,13 @@ export const columns = (
           <UILink>{market.tradableInstrument.instrument.code}</UILink>
         </Link>
       ),
-      className: cellClassNames,
+      className: `${cellClassNames} max-w-[110px]`,
       onlyOnDetailed: false,
     },
     {
       kind: ColumnKind.ProductType,
       value: market.tradableInstrument.instrument.product.__typename,
-      className: `py-2 text-left hidden sm:table-cell`,
+      className: `py-2 text-left hidden sm:table-cell max-w-[50px] ${ellipsisClasses}`,
       onlyOnDetailed: false,
     },
     {
@@ -223,7 +224,7 @@ export const columns = (
           noUpdate={noUpdate}
         />
       ),
-      className: cellClassNames,
+      className: `${cellClassNames} max-w-[100px]`,
       onlyOnDetailed: false,
     },
     {
@@ -236,7 +237,7 @@ export const columns = (
           initialValue={candlesClose}
         />
       ),
-      className: cellClassNames,
+      className: `${cellClassNames} max-w-[150px]`,
       onlyOnDetailed: false,
     },
     {
@@ -249,7 +250,7 @@ export const columns = (
           data={candlesClose?.map((c: string) => Number(c)) || []}
         />
       ),
-      className: `${cellClassNames} hidden lg:table-cell`,
+      className: `${cellClassNames} hidden lg:table-cell max-w-[80px]`,
       onlyOnDetailed: false && candlesClose,
     },
     {
@@ -271,7 +272,7 @@ export const columns = (
         </button>
       ),
       dataTestId: 'settlement-asset',
-      className: `${cellClassNames} hidden sm:table-cell`,
+      className: `${cellClassNames} hidden sm:table-cell max-w-[100px]`,
       onlyOnDetailed: false,
     },
     {

libs/ui-toolkit/src/components/price-change/price-change-cell.tsx

@@ -44,7 +44,7 @@ export const PriceCellChange = React.memo(
       <span
         className={`${signedNumberCssClass(
           change
-        )} flex items-center gap-2 font-mono text-ui-small`}
+        )} flex items-center gap-2 justify-end font-mono text-ui-small`}
       >
         <Arrow value={change} />
         <span data-testid="price-change-percentage">