chore: handle overlapping text in price cell (#1988)

* feat: filter assets to withdraw - add logic for filtering out zero balanced accounts

* chore: handle overlapping text in price cell - add title with value

* chore: handle overlapping text in price cell - add title with value

Co-authored-by: maciek <maciek@vegaprotocol.io>

libs/market-depth/src/lib/orderbook.tsx

@@ -595,7 +595,9 @@ export const Orderbook = ({
         <div>{t('Bid vol')}</div>
         <div>{t('Ask vol')}</div>
         <div>{t('Price')}</div>
-        <div className="pr-[2px]">{t('Cumulative vol')}</div>
+        <div className="pr-[2px] whitespace-nowrap overflow-hidden text-ellipsis">
+          {t('Cumulative vol')}
+        </div>
       </div>
       <div
         className={`h-full overflow-auto relative ${styles['scroll']} pt-[26px] pb-[17px]`}
@@ -637,7 +639,7 @@ export const Orderbook = ({
         ref={footerElement}
       >
         <div className="col-span-2">
-          <label className="flex items-center">
+          <label className="flex items-center whitespace-nowrap overflow-hidden text-ellipsis">
             <input
               className="mr-1"
               type="checkbox"
@@ -661,7 +663,7 @@ export const Orderbook = ({
             ))}
           </select>
         </div>
-        <div className="col-start-4">
+        <div className="col-start-4 whitespace-nowrap overflow-hidden text-ellipsis">
           <button
             type="button"
             onClick={scrollToMidPrice}

libs/react-helpers/src/lib/grid/price-cell.spec.tsx

@@ -2,20 +2,21 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import * as React from 'react';
 
-import { PriceFlashCell } from './price-flash-cell';
+import { PriceCell } from './price-cell';
 
-describe('<PriceFlashCell />', () => {
+describe('<PriceCell />', () => {
   it('Displays formatted value', () => {
-    render(<PriceFlashCell value={100} valueFormatted="100.00" />);
+    render(<PriceCell value={100} valueFormatted="100.00" />);
     expect(screen.getByTestId('price')).toHaveTextContent('100.00');
+    expect(screen.getByTestId('price')).toHaveAttribute('title', '100.00');
   });
   it('Displays 0', () => {
-    render(<PriceFlashCell value={0} valueFormatted="0.00" />);
+    render(<PriceCell value={0} valueFormatted="0.00" />);
     expect(screen.getByTestId('price')).toHaveTextContent('0.00');
   });
 
   it('Displays - if value is not a number', () => {
-    render(<PriceFlashCell value={null} valueFormatted="" />);
+    render(<PriceCell value={null} valueFormatted="" />);
     expect(screen.getByTestId('price')).toHaveTextContent('-');
   });
 });

libs/react-helpers/src/lib/grid/price-cell.tsx

@@ -20,8 +20,9 @@ export const PriceCell = React.memo(
       : [`${value}`];
     return (
       <span
-        className="font-mono relative text-black dark:text-white"
+        className="font-mono relative text-black dark:text-white whitespace-nowrap overflow-hidden text-ellipsis text-right rtl-dir"
         data-testid={testId || 'price'}
+        title={valueFormatted}
       >
         {valueSplit[0]}
         {valueSplit[1] ? decimalSeparator : null}

libs/tailwindcss-config/src/vega-custom-classes.js

@@ -40,6 +40,9 @@ const vegaCustomClasses = plugin(function ({ addUtilities }) {
     '.color-scheme-dark': {
       colorScheme: 'dark',
     },
+    '.rtl-dir': {
+      direction: 'rtl',
+    },
   });
 });