chore: fix too big margin in tooltips (#2438)

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

@@ -31,6 +31,19 @@ describe('markets table', { tags: '@smoke' }, () => {
     cy.getByTestId('taker-fee').should('contain.text', '%');
     cy.getByTestId('market-volume').should('not.be.empty');
     cy.getByTestId('market-name').should('not.be.empty');
+
+    cy.getByTestId('trading-mode-col')
+      .contains('Monitoring auction - liquidity')
+      .eq(0)
+      .realHover();
+    cy.get('[data-testid="trading-mode-tooltip"] p').should('have.class', '');
+    cy.get(
+      '[data-testid="market-trading-mode"] [data-testid="item-value"]'
+    ).realHover();
+    cy.get('[data-testid="trading-mode-tooltip"] p').should(
+      'have.class',
+      'mb-4'
+    );
   });
 
   it('able to select market from dropdown', () => {

libs/deal-ticket/src/components/trading-mode-tooltip/trading-mode-tooltip.tsx

@@ -1,12 +1,12 @@
+import type { ReactNode } from 'react';
+import classNames from 'classnames';
+import { useEnvironment } from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/react-helpers';
 import * as Schema from '@vegaprotocol/types';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { createDocsLinks } from '@vegaprotocol/react-helpers';
 import { MarketDataGrid } from './market-data-grid';
 
-import type { ReactNode } from 'react';
-import { useEnvironment } from '@vegaprotocol/environment';
-
 type TradingModeTooltipProps = {
   tradingMode: Schema.MarketTradingMode | null;
   trigger: Schema.AuctionTrigger | null;
@@ -32,7 +32,7 @@ export const TradingModeTooltip = ({
     case Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION: {
       return (
         <section data-testid="trading-mode-tooltip">
-          <p className="mb-4">
+          <p className={classNames({ 'mb-4': Boolean(compiledGrid) })}>
             <span>
               {t(
                 'This new market is in an opening auction to determine a fair mid-price before starting continuous trading.'
@@ -55,7 +55,7 @@ export const TradingModeTooltip = ({
         case Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY: {
           return (
             <section data-testid="trading-mode-tooltip">
-              <p className="mb-4">
+              <p className={classNames({ 'mb-4': Boolean(compiledGrid) })}>
                 <span>
                   {t(
                     'This market is in auction until it reaches sufficient liquidity.'
@@ -79,7 +79,7 @@ export const TradingModeTooltip = ({
         case Schema.AuctionTrigger.AUCTION_TRIGGER_PRICE: {
           return (
             <section data-testid="trading-mode-tooltip">
-              <p className="mb-4">
+              <p className={classNames({ 'mb-4': Boolean(compiledGrid) })}>
                 <span>
                   {t('This market is in auction due to high price volatility.')}
                 </span>{' '}