Merge pull request #2483 from pyth-network/cprussin/fix-staking-header-2-this-time-its-personal

fix(staking): fix header on small screens 2: This Time It's Personal

Author: cprussin

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

@@ -74,7 +74,7 @@ export const AccountSummary = ({
     <Image
       src={background}
       alt=""
-      className="absolute -right-40 hidden h-full object-cover object-right [mask-image:linear-gradient(to_right,_transparent,_black_50%)] md:block"
+      className="absolute -right-40 hidden h-full object-cover object-right [mask-image:linear-gradient(to_right,_transparent,_black_50%)] sm:block"
     />
     <div className="relative flex flex-col items-start justify-between gap-8 sm:p-4 md:flex-row md:items-center md:gap-16 xl:px-8 xl:py-2">
       <div>

apps/staking/src/components/Header/current-stake-account.tsx

@@ -20,15 +20,15 @@ export const CurrentStakeAccount = ({
   return api.type === ApiStateType.Loaded && !isBlocked ? (
     <div
       className={clsx(
-        "hidden flex-col items-end justify-center text-xs xs:flex xl:flex-row xl:items-center xl:text-sm",
+        "hidden flex-col items-end justify-center text-xs xs:flex 2xl:flex-row 2xl:items-center 2xl:text-sm",
         className,
       )}
       {...props}
     >
       <div className="font-semibold">Stake account:</div>
       <CopyButton
         text={api.account.toBase58()}
-        className="text-pythpurple-400 xl:ml-2 xl:mr-0"
+        className="text-pythpurple-400 2xl:ml-2 2xl:mr-0"
       >
         <TruncatedKey>{api.account}</TruncatedKey>
       </CopyButton>

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-6 lg:gap-12">
+          <div className="flex flex-row items-center gap-6 xl: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 md:flex lg:gap-6" />
+            <Stats className="hidden gap-4 lg:flex xl:gap-6" />
           </div>
-          <div className="flex flex-none flex-row items-stretch gap-4 lg:gap-8">
+          <div className="flex flex-none flex-row items-stretch gap-4 xl:gap-8">
             <CurrentStakeAccount />
             <WalletButton className="flex-none" />
             <HelpMenu />
           </div>
         </MaxWidth>
       </div>
     </header>
-    <Stats className="border-b border-neutral-600/50 py-4 text-center md:hidden" />
+    <Stats className="border-b border-neutral-600/50 py-4 text-center lg: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 md:flex-none">
+      <div className="flex-1 lg: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 md:flex-none">
+      <div className="flex-1 lg: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 md:flex-none">
+      <div className="flex-1 lg:flex-none">
         {state.type === StateType.Loaded ? (
           <Tokens className="mb-1 text-xl font-semibold leading-none">
             {state.data.totalGovernance}

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

@@ -58,7 +58,7 @@ export const Root = ({ children }: Props) => (
       redHatMono.variable,
     )}
   >
-    <body className="grid min-h-dvh grid-rows-[auto_auto_1fr_auto] text-pythpurple-100 [background:radial-gradient(20rem_50rem_at_50rem_10rem,_rgba(119,_49,_234,_0.20)_0%,_rgba(17,_15,_35,_0.00)_100rem),_#0A0814] selection:bg-pythpurple-600/60">
+    <body className="grid min-h-dvh grid-rows-[auto_auto_auto_1fr_auto] text-pythpurple-100 [background:radial-gradient(20rem_50rem_at_50rem_10rem,_rgba(119,_49,_234,_0.20)_0%,_rgba(17,_15,_35,_0.00)_100rem),_#0A0814] selection:bg-pythpurple-600/60 lg:grid-rows-[auto_auto_1fr_auto]">
       <Header className="z-10" />
       <RestrictedRegionBanner />
       <MaxWidth className="z-0 min-h-[calc(100dvh_-_var(--header-height))] py-4 sm:min-h-0">

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

@@ -295,7 +295,7 @@ const ButtonComponent = ({
   ...props
 }: ButtonComponentProps) => (
   <Button
-    className={clsx("w-36 text-sm lg:w-52 lg:text-base", className)}
+    className={clsx("w-36 text-sm lg:text-base xl:w-52", className)}
     size="nopad"
     {...props}
   >