chore: make spacing consistent for header stats on different pages

apps/trading/client-pages/market/market-header-stats.tsx

@@ -43,7 +43,7 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
   const asset = getAsset(market);
 
   return (
-    <div className="flex gap-8">
+    <>
       <HeaderStat heading={t('Mark Price')} testId="market-price">
         <MarketMarkPrice
           marketId={market.id}
@@ -144,7 +144,7 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
         </HeaderStat>
       )}
       <MarketProposalNotification marketId={market.id} />
-    </div>
+    </>
   );
 };
 

apps/trading/components/header/header.tsx

@@ -17,11 +17,11 @@ export const Header = ({ title, children }: TradeMarketHeaderProps) => {
   );
   return (
     <header className={headerClasses}>
-      <div className="hidden lg:flex flex-col justify-center items-start pl-3 lg:pl-4 pt-2 xl:pb-2 pb-0">
+      <div className="flex-col items-start justify-center hidden pt-2 pb-0 pl-3 lg:flex lg:pl-4 xl:pb-2">
         {title}
       </div>
       <div data-testid="header-summary" className="min-w-0">
-        <div className="px-3 lg:px-4 py-2 flex flex-nowrap gap-4 items-center text-xs overflow-x-auto">
+        <div className="flex items-center px-3 py-2 overflow-x-auto text-xs lg:px-4 flex-nowrap gap-6">
           {children}
         </div>
       </div>
@@ -70,7 +70,7 @@ export const HeaderTitle = ({ children }: { children: ReactNode }) => {
   return (
     <h1
       data-testid="header-title"
-      className="flex gap-4 items-center text-lg whitespace-nowrap xl:pr-4 xl:border-r border-default"
+      className="flex items-center text-lg gap-4 whitespace-nowrap xl:pr-4 xl:border-r border-default"
     >
       {children}
     </h1>