From 135cdcf53814d3b65f4341ca2a1ee710eca21024 Mon Sep 17 00:00:00 2001
From: Elizabeth <me@checksum.space>
Date: Sun, 17 Aug 2025 00:32:54 -0500
Subject: [PATCH] style: make MainPageHeader more mobile friendly

---
 .../components/elements/MainPageHeader.tsx    | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/resources/scripts/components/elements/MainPageHeader.tsx b/resources/scripts/components/elements/MainPageHeader.tsx
index 6483893e6..df866cf91 100644
--- a/resources/scripts/components/elements/MainPageHeader.tsx
+++ b/resources/scripts/components/elements/MainPageHeader.tsx
@@ -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>
     );
 };