From 9654654a2e7615ae7c8ff470ff94b35bfb8a398b Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Thu, 12 Oct 2023 11:35:35 -0700
Subject: [PATCH] chore: make spacing consistent for header stats on different
 pages

---
 apps/trading/client-pages/market/market-header-stats.tsx | 4 ++--
 apps/trading/components/header/header.tsx                | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/trading/client-pages/market/market-header-stats.tsx b/apps/trading/client-pages/market/market-header-stats.tsx
index 152ec003d..ed9c29ce1 100644
--- a/apps/trading/client-pages/market/market-header-stats.tsx
+++ b/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>
+    </>
   );
 };
 
diff --git a/apps/trading/components/header/header.tsx b/apps/trading/components/header/header.tsx
index 6ff4d50ee..98739f0ea 100644
--- a/apps/trading/components/header/header.tsx
+++ b/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>