From 9328f181185a539932a288a7145a61ccf9c0ea9a Mon Sep 17 00:00:00 2001
From: Connor Prussin <connor@prussin.net>
Date: Tue, 17 Sep 2024 19:04:00 -0700
Subject: [PATCH] feat(staking): more mobile improvements

---
 .../src/components/Dashboard/index.tsx        | 24 +++++++++----------
 apps/staking/src/components/Footer/index.tsx  |  4 ++--
 apps/staking/src/components/Guide/index.tsx   |  4 ++--
 apps/staking/src/components/Header/index.tsx  |  5 +---
 .../src/components/ModalDialog/index.tsx      |  6 +++--
 .../src/components/NoWalletHome/index.tsx     |  2 +-
 .../src/components/ProgramSection/index.tsx   |  6 +++--
 apps/staking/src/components/Root/index.tsx    |  4 +++-
 8 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/apps/staking/src/components/Dashboard/index.tsx b/apps/staking/src/components/Dashboard/index.tsx
index 3d61e1306..3f58ea4fb 100644
--- a/apps/staking/src/components/Dashboard/index.tsx
+++ b/apps/staking/src/components/Dashboard/index.tsx
@@ -141,13 +141,13 @@ export const Dashboard = ({
       <Tabs
         selectedKey={tab}
         onSelectionChange={setTab}
-        className="group border-neutral-600/50 data-[empty]:mb-20 data-[empty]:mt-6 data-[empty]:border data-[empty]:bg-white/10 data-[empty]:p-4 sm:p-4 data-[empty]:md:border-0 data-[empty]:md:bg-transparent data-[empty]:md:p-0"
+        className="group border-neutral-600/50 data-[empty]:my-[5dvh] data-[empty]:border data-[empty]:bg-white/10 data-[empty]:p-4 sm:p-4 data-[empty]:sm:my-0 data-[empty]:sm:border-0 data-[empty]:sm:bg-transparent data-[empty]:sm:p-0"
         {...(tab === TabIds.Empty && { "data-empty": true })}
       >
-        <h1 className="my-4 hidden text-center text-3xl/tight font-light group-data-[empty]:block md:mb-14 md:mt-8 md:text-5xl">
+        <h1 className="my-4 hidden text-center text-xl/tight font-light group-data-[empty]:block sm:mb-6 sm:text-3xl lg:my-14 lg:text-5xl">
           Choose Your Journey
         </h1>
-        <TabList className="sticky top-header-height z-10 flex flex-row items-stretch justify-center group-data-[empty]:mx-auto group-data-[empty]:max-w-7xl group-data-[empty]:flex-col group-data-[empty]:gap-2 group-data-[empty]:md:flex-row">
+        <TabList className="sticky top-header-height z-10 flex flex-row items-stretch justify-center group-data-[empty]:mx-auto group-data-[empty]:max-w-7xl group-data-[empty]:flex-col group-data-[empty]:gap-2 group-data-[empty]:sm:flex-row">
           <Tab id={TabIds.Empty} className="hidden" />
           <Journey
             longText="Oracle Integrity Staking (OIS)"
@@ -236,24 +236,24 @@ const Journey = ({
 }: JourneyProps) => (
   <Tab
     className={clsx(
-      "group/tab flex flex-1 cursor-pointer flex-col items-center bg-pythpurple-800 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400 selected:cursor-default group-data-[empty]:md:bg-transparent",
+      "group/tab flex flex-1 cursor-pointer flex-col items-center bg-pythpurple-800 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400 selected:cursor-default group-data-[empty]:sm:bg-transparent",
       className,
     )}
     {...props}
   >
-    <div className="relative hidden w-4/5 opacity-30 transition group-hover/tab:opacity-100 group-data-[empty]:md:block">
-      <div className="absolute inset-0 bg-[#E6DAFE] mix-blend-color" />
-      <Image src={image} alt="" className="size-full" />
-      <div className="absolute inset-0 top-16 text-center text-2xl text-pythpurple-800 lg:text-3xl">
-        {children}
-      </div>
-    </div>
-    <div className="grid size-full place-content-center border border-neutral-600/50 bg-pythpurple-800 p-2 text-center font-semibold transition group-hover/tab:bg-pythpurple-600/30 group-selected/tab:border-pythpurple-400/60 group-selected/tab:bg-pythpurple-600/60 group-hover/tab:group-selected/tab:bg-pythpurple-600/60 md:p-4 md:text-lg">
+    <div className="grid size-full flex-none basis-0 place-content-center border border-neutral-600/50 bg-pythpurple-800 p-2 text-center font-semibold transition group-hover/tab:bg-pythpurple-600/30 group-selected/tab:border-pythpurple-400/60 group-selected/tab:bg-pythpurple-600/60 group-hover/tab:group-selected/tab:bg-pythpurple-600/60 sm:p-4 sm:text-lg">
       <span className="hidden group-data-[empty]:inline sm:inline">
         {longText}
       </span>
       <span className="group-data-[empty]:hidden sm:hidden">{shortText}</span>
     </div>
+    <div className="relative hidden max-h-[40dvh] w-4/5 flex-none overflow-hidden opacity-30 transition group-hover/tab:opacity-100 group-data-[empty]:sm:block">
+      <div className="absolute inset-0 bg-[#E6DAFE] mix-blend-color" />
+      <Image src={image} alt="" className="size-full object-cover object-top" />
+      <div className="absolute inset-0 top-16 text-center text-xl text-pythpurple-800 md:text-2xl lg:text-3xl">
+        {children}
+      </div>
+    </div>
   </Tab>
 );
 
diff --git a/apps/staking/src/components/Footer/index.tsx b/apps/staking/src/components/Footer/index.tsx
index 9dc135114..1fa69deaf 100644
--- a/apps/staking/src/components/Footer/index.tsx
+++ b/apps/staking/src/components/Footer/index.tsx
@@ -38,13 +38,13 @@ export const Footer = ({
 }: Omit<HTMLAttributes<HTMLElement>, "children">) => (
   <footer
     className={clsx(
-      "mt-4 text-xs font-light sm:sticky sm:bottom-0 lg:px-4",
+      "text-xs font-light sm:sticky sm:bottom-0 lg:px-4",
       className,
     )}
     {...props}
   >
     <div className="border-t border-neutral-600/50 bg-pythpurple-800 lg:border-x">
-      <MaxWidth className="flex flex-col items-center gap-10 py-8 sm:h-16 sm:flex-row sm:justify-between lg:-mx-4">
+      <MaxWidth className="flex h-48 flex-col items-center justify-between overflow-hidden py-8 sm:h-16 sm:flex-row sm:gap-10 lg:-mx-4">
         <div className="flex flex-col items-center gap-2 sm:flex-row sm:gap-4 md:gap-8">
           <Link href="https://www.pyth.network" target="_blank">
             <Logo className="h-10 sm:h-8" />
diff --git a/apps/staking/src/components/Guide/index.tsx b/apps/staking/src/components/Guide/index.tsx
index 3be84de15..2ec7f0180 100644
--- a/apps/staking/src/components/Guide/index.tsx
+++ b/apps/staking/src/components/Guide/index.tsx
@@ -51,12 +51,12 @@ export const Guide = ({ title, description, steps, ...props }: Props) => {
 
   return (
     <ModalDialog title={title} {...props}>
-      <div className="my-12 max-w-prose opacity-60">{description}</div>
+      <div className="mb-6 max-w-prose opacity-60 md:mb-12">{description}</div>
       <Tabs className="lg:bg-black/40">
         <div ref={scrollTarget} />
         <TabList
           items={stepsWithIndices}
-          className="top-[calc(-1_*_(2rem_+_1px))] z-10 flex flex-col bg-[#100E21] sm:top-[calc(-1_*_(4rem_+_1px))] md:sticky md:flex-row lg:flex-row"
+          className="top-[calc(-1_*_(2rem_+_1px))] z-10 flex flex-col bg-[#100E21] xs:top-[calc(-1_*_(4rem_+_1px))] sm:top-[calc(-1_*_(8rem_+_1px))] md:sticky md:flex-row lg:flex-row"
         >
           {({ title, icon: Icon, index }) => (
             <Tab
diff --git a/apps/staking/src/components/Header/index.tsx b/apps/staking/src/components/Header/index.tsx
index e43437821..50cdc7197 100644
--- a/apps/staking/src/components/Header/index.tsx
+++ b/apps/staking/src/components/Header/index.tsx
@@ -12,10 +12,7 @@ export const Header = ({
   className,
   ...props
 }: Omit<HTMLAttributes<HTMLElement>, "children">) => (
-  <header
-    className={clsx("sticky top-0 mb-4 w-full lg:px-4", className)}
-    {...props}
-  >
+  <header className={clsx("sticky top-0 w-full lg:px-4", className)} {...props}>
     <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">
         <Logo className="hidden max-h-full py-4 text-pythpurple-100 sm:block" />
diff --git a/apps/staking/src/components/ModalDialog/index.tsx b/apps/staking/src/components/ModalDialog/index.tsx
index 132987177..ca57fc5f9 100644
--- a/apps/staking/src/components/ModalDialog/index.tsx
+++ b/apps/staking/src/components/ModalDialog/index.tsx
@@ -53,14 +53,16 @@ export const ModalDialog = ({
             </Button>
             <Heading
               className={clsx("mr-10 text-3xl font-light", {
-                "mb-10": description === undefined,
+                "mb-4 md:mb-10": description === undefined,
               })}
               slot="title"
             >
               {title}
             </Heading>
             {description && (
-              <p className="mb-10 mt-2 max-w-96 opacity-60">{description}</p>
+              <p className="mb-4 mt-2 max-w-96 opacity-60 md:mb-10">
+                {description}
+              </p>
             )}
             {typeof children === "function" ? children(options) : children}
             {closeButtonText !== undefined && (
diff --git a/apps/staking/src/components/NoWalletHome/index.tsx b/apps/staking/src/components/NoWalletHome/index.tsx
index 4e28a596b..e723590d4 100644
--- a/apps/staking/src/components/NoWalletHome/index.tsx
+++ b/apps/staking/src/components/NoWalletHome/index.tsx
@@ -45,7 +45,7 @@ export const NoWalletHome = () => {
 
   return (
     <main className="flex flex-col items-center">
-      <div className="mb-20 mt-12 flex flex-col gap-12 text-center">
+      <div className="mb-10 mt-6 flex flex-col gap-6 text-center md:mb-20 md:mt-12 md:gap-12">
         <div className="text-sm/normal tracking-[0.5rem]">
           WELCOME
           <br />
diff --git a/apps/staking/src/components/ProgramSection/index.tsx b/apps/staking/src/components/ProgramSection/index.tsx
index 496814f03..41a8061bc 100644
--- a/apps/staking/src/components/ProgramSection/index.tsx
+++ b/apps/staking/src/components/ProgramSection/index.tsx
@@ -40,7 +40,9 @@ export const ProgramSection = ({
     <div className="mx-auto flex max-w-4xl flex-col gap-2 px-2 pb-6 sm:px-6 sm:py-10">
       <div className="flex flex-row items-start gap-8">
         <div className="grow">
-          <h1 className="text-xl font-light sm:mb-2 sm:text-3xl">{name}</h1>
+          <h1 className="text-lg font-light xs:text-xl sm:mb-2 sm:text-2xl md:text-3xl">
+            {name}
+          </h1>
           <div className="text-sm opacity-60 sm:text-lg md:font-semibold md:opacity-100">
             {tagline}
           </div>
@@ -244,7 +246,7 @@ const Position = ({
 }: PositionProps) => (
   <div
     className={clsx(
-      "flex w-full flex-col overflow-hidden border border-neutral-600/50 bg-white/5 p-4 lg:max-w-64 lg:bg-pythpurple-800 lg:p-6",
+      "mx-auto flex w-full max-w-64 flex-col overflow-hidden border border-neutral-600/50 bg-white/5 p-4 md:mx-0 lg:bg-pythpurple-800 lg:p-6",
       className,
     )}
   >
diff --git a/apps/staking/src/components/Root/index.tsx b/apps/staking/src/components/Root/index.tsx
index 0447f77a3..29cd68a83 100644
--- a/apps/staking/src/components/Root/index.tsx
+++ b/apps/staking/src/components/Root/index.tsx
@@ -66,7 +66,9 @@ export const Root = ({ children }: Props) => (
           >
             <body className="grid min-h-dvh grid-rows-[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">
               <Header className="z-10" />
-              <MaxWidth className="z-0 my-4">{children}</MaxWidth>
+              <MaxWidth className="z-0 min-h-[calc(100dvh_-_var(--header-height))] py-8 sm:min-h-0">
+                {children}
+              </MaxWidth>
               <Footer className="z-10" />
             </body>
             {GOOGLE_ANALYTICS_ID && (