From cf41c5dd9cfeb6a1085281d09dfd8862ecbb243f Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 12 Sep 2022 12:37:52 +0300
Subject: [PATCH] fix: header image alignment

---
 .../TournamentDetailsPage/Header/Header.tsx      | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/features/Tournaments/pages/TournamentDetailsPage/Header/Header.tsx b/src/features/Tournaments/pages/TournamentDetailsPage/Header/Header.tsx
index ce486e3..ace5b32 100644
--- a/src/features/Tournaments/pages/TournamentDetailsPage/Header/Header.tsx
+++ b/src/features/Tournaments/pages/TournamentDetailsPage/Header/Header.tsx
@@ -18,14 +18,16 @@ export default function Header() {
             <div className="w-full p-16 md:p-24 flex flex-col min-h-[240px] md:min-h-[280px] relative mb-[-1px]">
                 <img src={tournamentDetails.cover_image} className='absolute inset-0 h-full w-full object-cover object-top' alt="" />
                 <div className='absolute inset-0 h-full w-full bg-black bg-opacity-50 ' />
-                <div className="content-container text-white flex flex-col md:flex-row gap-16 md:gap-32 relative" style={{ marginTop: 'auto' }}>
-                    <img src={tournamentDetails.thumbnail_image} className={'w-64 md:w-[128px] aspect-square rounded-16 md:rounded-24 border-2 border-gray-100'} alt="" />
-                    <div className='flex flex-col gap-4'>
-                        <p className="text-body6">TOURNAMENT 🏆</p>
-                        <p className="text-body1 md:text-h2 font-bold">{tournamentDetails.title}</p>
-                        <p className="text-body3"> {`${dayjs(tournamentDetails.start_date).format('Do')} - ${dayjs(tournamentDetails.end_date).format('Do MMMM, YYYY')}`}</p>
+                <div className="content-container mt-auto">
+                    <div className=" text-white flex flex-col md:flex-row gap-16 md:gap-32 relative" style={{ marginTop: 'auto' }}>
+                        <img src={tournamentDetails.thumbnail_image} className={'w-64 md:w-[128px] aspect-square rounded-16 md:rounded-24 border-2 border-gray-100'} alt="" />
+                        <div className='flex flex-col gap-4'>
+                            <p className="text-body6">TOURNAMENT 🏆</p>
+                            <p className="text-body1 md:text-h2 font-bold">{tournamentDetails.title}</p>
+                            <p className="text-body3"> {`${dayjs(tournamentDetails.start_date).format('Do')} - ${dayjs(tournamentDetails.end_date).format('Do MMMM, YYYY')}`}</p>
 
-                        <p className='text-body5'><IoLocationOutline className="mr-8" /> {tournamentDetails.location}</p>
+                            <p className='text-body5'><IoLocationOutline className="mr-8" /> {tournamentDetails.location}</p>
+                        </div>
                     </div>
                 </div>
             </div>