feat(component): modify CSS classes for improved layout
Updated the classes in the Header component to enhance layout presentation. Particularly, added padding at the bottom and updated the alignment for better responsiveness. This will enhance user interface on multiple device dimensions.
This commit is contained in:
parent
b3907697a0
commit
efb6eaf274
@ -10,7 +10,7 @@ export function Header({
|
|||||||
return (
|
return (
|
||||||
<header
|
<header
|
||||||
className={
|
className={
|
||||||
"flex flex-col md:flex-row justify-between items-center w-full p-1 md:px-3 md:py-2 border-b-2"
|
"flex flex-col md:flex-row justify-between items-center w-full p-1 md:px-3 md:py-2 pb-2 border-b-2"
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
@ -24,7 +24,9 @@ export function Header({
|
|||||||
</h1>
|
</h1>
|
||||||
</div>
|
</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 items-center"}>{children}</div>
|
||||||
<div className={"w-1/3 flex flex-row justify-end gap-2 items-center"}>
|
<div
|
||||||
|
className={"w-1/3 flex flex-row justify-center md:justify-end gap-2 items-center"}
|
||||||
|
>
|
||||||
<AccountDialog />
|
<AccountDialog />
|
||||||
<ThemeBtnSelector />
|
<ThemeBtnSelector />
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user