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

@@ -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 />