Merge pull request #2482 from pyth-network/cprussin/fix-staking-header

fix(staking): fix header to not overlap on small screen sizes

Author: cprussin

apps/staking/src/components/Header/help-menu.tsx

@@ -47,9 +47,9 @@ export const HelpMenu = () => {
   return (
     <>
       <MenuTrigger>
-        <Button className="group -mx-2 flex flex-row items-center gap-2 rounded-sm p-2 transition hover:bg-white/10 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400 pressed:bg-white/10 md:-mx-4 md:px-4">
+        <Button className="group -mx-2 flex flex-row items-center gap-2 rounded-sm p-2 transition hover:bg-white/10 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400 pressed:bg-white/10 xl:-mx-4 xl:px-4">
           <QuestionMarkCircleIcon className="size-6 flex-none" />
-          <span className="sr-only md:not-sr-only">Help</span>
+          <span className="sr-only xl:not-sr-only">Help</span>
           <ChevronDownIcon className="size-4 flex-none opacity-60 transition duration-300 group-data-[pressed]:-rotate-180" />
         </Button>
         <Menu placement="bottom end">

apps/staking/src/components/Header/index.tsx

@@ -21,7 +21,7 @@ export const Header = ({
     >
       <div className="border-b border-neutral-600/50 bg-pythpurple-800 lg:border-x">
         <MaxWidth className="flex h-header items-center justify-between gap-2 lg:-mx-4">
-          <div className="flex flex-row items-center gap-8 lg:gap-12">
+          <div className="flex flex-row items-center gap-6 lg:gap-12">
             <Link
               href="/"
               className="-mx-2 h-[calc(var(--header-height)_-_0.5rem)] rounded-sm p-2 text-pythpurple-100 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400"
@@ -30,16 +30,16 @@ export const Header = ({
               <Logomark className="h-full lg:hidden" />
               <span className="sr-only">Pyth Staking</span>
             </Link>
-            <Stats className="hidden gap-4 sm:flex lg:gap-6" />
+            <Stats className="hidden gap-4 md:flex lg:gap-6" />
           </div>
-          <div className="flex flex-none flex-row items-stretch gap-4 md:gap-8">
+          <div className="flex flex-none flex-row items-stretch gap-4 lg:gap-8">
             <CurrentStakeAccount />
             <WalletButton className="flex-none" />
             <HelpMenu />
           </div>
         </MaxWidth>
       </div>
     </header>
-    <Stats className="border-b border-neutral-600/50 py-4 text-center sm:hidden" />
+    <Stats className="border-b border-neutral-600/50 py-4 text-center md:hidden" />
   </>
 );

apps/staking/src/components/Header/stats.tsx

@@ -22,7 +22,7 @@ export const Stats = ({ className, ...props }: HTMLProps<HTMLDivElement>) => {
 
   return (
     <div className={clsx("flex flex-row items-stretch", className)} {...props}>
-      <div className="flex-1 sm:flex-none">
+      <div className="flex-1 md:flex-none">
         {state.type === StateType.Loaded ? (
           <Tokens className="mb-1 text-xl font-semibold leading-none">
             {state.data.totalStaked}
@@ -35,7 +35,7 @@ export const Stats = ({ className, ...props }: HTMLProps<HTMLDivElement>) => {
         </div>
       </div>
       <div className="border-l border-neutral-600/50" />
-      <div className="flex-1 sm:flex-none">
+      <div className="flex-1 md:flex-none">
         {state.type === StateType.Loaded ? (
           <Tokens className="mb-1 text-xl font-semibold leading-none">
             {state.data.rewardsDistributed}
@@ -48,7 +48,7 @@ export const Stats = ({ className, ...props }: HTMLProps<HTMLDivElement>) => {
         </div>
       </div>
       <div className="border-l border-neutral-600/50" />
-      <div className="flex-1 sm:flex-none">
+      <div className="flex-1 md:flex-none">
         {state.type === StateType.Loaded ? (
           <Tokens className="mb-1 text-xl font-semibold leading-none">
             {state.data.totalGovernance}
@@ -57,7 +57,7 @@ export const Stats = ({ className, ...props }: HTMLProps<HTMLDivElement>) => {
           <Loading />
         )}
         <div className="text-xs leading-none text-pythpurple-400">
-          Pyth Governance Total Staked
+          Governance Total Staked
         </div>
       </div>
     </div>