From 72bbe08de0934d33d3f2b9910ef8316ad46ca897 Mon Sep 17 00:00:00 2001
From: Mathis <avnyr@yidhra.fr>
Date: Fri, 14 Jun 2024 12:48:03 +0200
Subject: [PATCH] feat(components): update layout for responsiveness

This commit enhances the layout in header.tsx for better mobile responsiveness. It adjusts flex properties and classes for optimal rendering across various device sizes. It also rearranges elements within the header component for a better mobile appearance.
---
 src/components/header.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index c2251b9..3893f5f 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -23,9 +23,15 @@ export function Header({
 					{title || "YeloBit"}
 				</h1>
 			</div>
-			<div className={"w-1/3 flex flex-row justify-center items-center"}>{children}</div>
 			<div
-				className={"w-1/3 flex flex-row justify-center md:justify-end gap-2 items-center"}
+				className={"w-1/3 flex flex-col md:flex-row w-full justify-center items-center"}
+			>
+				{children}
+			</div>
+			<div
+				className={
+					"w-1/3 flex flex-row justify-center md:justify-end w-full md:w-fit gap-2 items-center"
+				}
 			>
 				<AccountDialog />
 				<ThemeBtnSelector />