fix: fallback state for 24hr price change

apps/trading/components/market-header/mobile-market-header.tsx

@@ -40,7 +40,7 @@ export const MobileMarketHeader = () => {
             data-testid="popover-trigger"
             className="min-w-0 flex gap-1 items-center"
           >
-            <h1 className="flex-grow whitespace-nowrap overflow-hidden text-ellipsis items-center">
+            <h1 className="whitespace-nowrap overflow-hidden text-ellipsis items-center">
               <span className="">
                 {data
                   ? data.tradableInstrument.instrument.code
@@ -88,6 +88,7 @@ export const MobileMarketHeader = () => {
                     <Last24hPriceChange
                       marketId={data.id}
                       decimalPlaces={data.decimalPlaces}
+                      fallback={<span />} // dont render anything so price is vertically centered
                     />
                   </span>
                 </span>

libs/markets/src/lib/components/last-24h-price-change/last-24h-price-change.tsx

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react';
 import {
   addDecimalsFormatNumber,
   formatNumberPercentage,
@@ -14,20 +15,27 @@ import { useT } from '../../use-t';
 interface Props {
   marketId?: string;
   decimalPlaces: number;
-  isHeader?: boolean;
-  noUpdate?: boolean;
+  fallback: ReactNode;
 }
 
-export const Last24hPriceChange = ({ marketId, decimalPlaces }: Props) => {
+export const Last24hPriceChange = ({
+  marketId,
+  decimalPlaces,
+  fallback,
+}: Props) => {
   const t = useT();
   const { oneDayCandles, error, fiveDaysCandles } = useCandles({
     marketId,
   });
 
-  const fallback = <span>{'-'}</span>;
+  const nonIdeal = fallback || <span>{'-'}</span>;
 
   if (error || !oneDayCandles || !fiveDaysCandles) {
-    return fallback;
+    return nonIdeal;
+  }
+
+  if (fiveDaysCandles.length < 24) {
+    return nonIdeal;
   }
 
   if (oneDayCandles.length < 24) {
@@ -45,7 +53,7 @@ export const Last24hPriceChange = ({ marketId, decimalPlaces }: Props) => {
           </span>
         }
       >
-        {fallback}
+        <span>{nonIdeal}</span>
       </Tooltip>
     );
   }