github/pyrodactyl
1
1
Fork 0
mirror of https://github.com/pyrohost/pyrodactyl.git synced 2026-04-06 04:01:58 +02:00
Code Issues 44 Packages Projects Releases Wiki Activity

style: make MainPageHeader more mobile friendly

Browse Source
This commit is contained in:
Elizabeth
2025-08-17 00:32:54 -05:00
parent c120e4f5b4
commit 135cdcf538
1 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
resources/scripts/components/elements/MainPageHeader.tsx
View File

@@ -18,21 +18,27 @@ export const MainPageHeader: React.FC<MainPageHeaderProps> = ({
direction = 'row',
}) => {
return (
<HeaderWrapper className={clsx('flex flex-col', 'mb-4 gap-8 mt-8 md:mt-0 select-none')}>
<HeaderWrapper className={clsx('flex flex-col', 'mb-4 gap-4 md:gap-8 mt-8 md:mt-0 select-none')}>
<div
className={clsx(
'flex items-center',
direction === 'row' ? 'flex-col md:flex-row' : 'flex-row',
'flex',
direction === 'row' ? 'flex-col sm:flex-row sm:items-center' : 'flex-col sm:flex-row sm:items-start',
'justify-between',
'gap-4',
)}
>
<div className='flex items-center gap-4 flex-wrap'>
<h1 className='text-[52px] font-extrabold leading-[98%] tracking-[-0.14rem]'>{title}</h1>
<div className='flex items-center gap-4 flex-wrap min-w-0 flex-1'>
<h1 className='text-2xl sm:text-3xl md:text-4xl lg:text-[52px] font-extrabold leading-[98%] tracking-[-0.02em] sm:tracking-[-0.06em] md:tracking-[-0.14rem] break-words'>
{title}
</h1>
</div>
{titleChildren}
{titleChildren && (
<div className='flex-shrink-0 w-full sm:w-auto'>
{titleChildren}
</div>
)}
</div>
{direction === 'column' && children && <div className='-mt-4'>{children}</div>}
{direction === 'column' && children && <div className='-mt-2 md:-mt-4'>{children}</div>}
</HeaderWrapper>
);
};