From 52eeef0ff6ac07bbf3eb14298a67550f32c67915 Mon Sep 17 00:00:00 2001
From: siddesh-privy <siddesh@privy.io>
Date: Tue, 4 Nov 2025 12:47:52 +0530
Subject: [PATCH] style fix

---
 .../src/app/page.tsx                          | 14 +++++---
 .../src/app/page.tsx                          | 12 ++++---
 .../src/app/page.tsx                          | 12 ++++---
 .../privy-next-farcaster/src/app/page.tsx     | 12 ++++---
 examples/privy-next-funding/src/app/page.tsx  | 10 +++---
 .../src/app/page.tsx                          |  2 +-
 .../privy-next-session-keys/src/app/page.tsx  | 12 ++++---
 .../privy-next-smart-wallets/src/app/page.tsx | 12 ++++---
 examples/privy-next-solana/src/app/page.tsx   | 12 ++++---
 examples/privy-next-wagmi/src/app/page.tsx    | 24 ++++++++-----
 .../privy-react-chrome-extension/src/App.tsx  | 10 +++---
 privy-next-starter/src/app/page.tsx           | 36 ++++++++++++-------
 privy-react-starter/src/App.tsx               | 10 +++---
 13 files changed, 109 insertions(+), 69 deletions(-)

diff --git a/examples/privy-next-cross-app-connect/src/app/page.tsx b/examples/privy-next-cross-app-connect/src/app/page.tsx
index 685fb9d..1f43f63 100644
--- a/examples/privy-next-cross-app-connect/src/app/page.tsx
+++ b/examples/privy-next-cross-app-connect/src/app/page.tsx
@@ -20,14 +20,14 @@ function Home() {
     <div
       className={`${
         !!address
-          ? "bg-[#E0E7FF66] md:max-h-[100vh] md:overflow-hidden"
+          ? "bg-[#E0E7FF66] md:max-h-screen md:overflow-hidden"
           : "bg-transparent h-screen overflow-hidden"
       }`}
     >
       <Header authenticated={!!address} />
       {!!address ? (
-        <section className="w-full flex flex-col md:flex-row h-screen pt-[60px]">
-          <div className="flex-grow overflow-y-auto h-full p-4 pl-8">
+        <section className="w-full flex flex-col md:flex-row md:h-screen pt-[60px]">
+          <div className="grow md:overflow-y-auto md:h-full p-4 pl-8 pb-4">
             <button className="button" onClick={() => disconnect()}>
               <ArrowLeftIcon className="h-4 w-4" strokeWidth={2} /> Disconnect
             </button>
@@ -52,7 +52,7 @@ function Home() {
           />
           <div className="z-10 flex flex-col items-center justify-center w-full h-full">
             <div className="flex h-10 items-center justify-center rounded-[20px] border border-white px-6 text-lg text-white font-abc-favorit">
-              Cross App Connect Demo
+                  Cross App Connect Demo
             </div>
             <div className="text-center mt-4 text-white text-7xl font-medium font-abc-favorit leading-[81.60px]">
               Starter repo
@@ -68,7 +68,11 @@ function Home() {
               onClick={() => {
                 login();
                 setTimeout(() => {
-                  (document.querySelector('input[type="email"]') as HTMLInputElement)?.focus();
+                  (
+                    document.querySelector(
+                      'input[type="email"]'
+                    ) as HTMLInputElement
+                  )?.focus();
                 }, 150);
               }}
             >
diff --git a/examples/privy-next-cross-app-provider/src/app/page.tsx b/examples/privy-next-cross-app-provider/src/app/page.tsx
index 034e08a..c1163a7 100644
--- a/examples/privy-next-cross-app-provider/src/app/page.tsx
+++ b/examples/privy-next-cross-app-provider/src/app/page.tsx
@@ -28,14 +28,14 @@ function Home() {
     <div
       className={`${
         authenticated
-          ? "bg-[#E0E7FF66] md:max-h-[100vh] md:overflow-hidden"
+          ? "bg-[#E0E7FF66] md:max-h-screen md:overflow-hidden"
           : "bg-transparent h-screen overflow-hidden"
       }`}
     >
       <Header authenticated={authenticated} />
       {authenticated ? (
-        <section className="w-full flex flex-col md:flex-row h-screen pt-[60px]">
-          <div className="flex-grow overflow-y-auto h-full p-4 pl-8">
+        <section className="w-full flex flex-col md:flex-row md:h-screen pt-[60px]">
+          <div className="grow md:overflow-y-auto md:h-full p-4 pl-8 pb-4">
             <button className="button" onClick={logout}>
               <ArrowLeftIcon className="h-4 w-4" strokeWidth={2} /> Logout
             </button>
@@ -44,7 +44,9 @@ function Home() {
               <ReadyForCrossAppRequests />
             </div>
           </div>
-          <UserObject />
+          <div className="md:shrink-0 md:overflow-y-auto md:h-full">
+            <UserObject />
+          </div>
         </section>
       ) : (
         <section className="w-full flex flex-row justify-center items-center h-screen relative">
@@ -57,7 +59,7 @@ function Home() {
           />
           <div className="z-10 flex flex-col items-center justify-center w-full h-full">
             <div className="flex h-10 items-center justify-center rounded-[20px] border border-white px-6 text-lg text-white font-abc-favorit">
-              Cross App Provider Demo
+                  Cross App Provider Demo
             </div>
             <div className="text-center mt-4 text-white text-7xl font-medium font-abc-favorit leading-[81.60px]">
               Starter repo
diff --git a/examples/privy-next-farcaster-mini-app/src/app/page.tsx b/examples/privy-next-farcaster-mini-app/src/app/page.tsx
index e313c3d..85910e8 100644
--- a/examples/privy-next-farcaster-mini-app/src/app/page.tsx
+++ b/examples/privy-next-farcaster-mini-app/src/app/page.tsx
@@ -63,14 +63,14 @@ function Home() {
     <div
       className={`${
         authenticated
-          ? "bg-[#E0E7FF66] md:max-h-[100vh] md:overflow-hidden"
+          ? "bg-[#E0E7FF66] md:max-h-screen md:overflow-hidden"
           : "bg-transparent h-screen overflow-hidden"
       }`}
     >
       <Header authenticated={authenticated} />
       {authenticated ? (
-        <section className="w-full flex flex-col md:flex-row h-screen pt-[60px]">
-          <div className="flex-grow overflow-y-auto h-full p-4 pl-8">
+        <section className="w-full flex flex-col md:flex-row md:h-screen pt-[60px]">
+          <div className="grow md:overflow-y-auto md:h-full p-4 pl-8 pb-4">
             <button className="button" onClick={logout}>
               <ArrowLeftIcon className="h-4 w-4" strokeWidth={2} /> Logout
             </button>
@@ -86,7 +86,9 @@ function Home() {
               <MFA />
             </div>
           </div>
-          <UserObject />
+          <div className="md:shrink-0 md:overflow-y-auto md:h-full">
+            <UserObject />
+          </div>
         </section>
       ) : (
         <section className="w-full flex flex-row justify-center items-center h-screen relative">
@@ -99,7 +101,7 @@ function Home() {
           />
           <div className="z-10 flex flex-col items-center justify-center w-full h-full">
             <div className="flex h-10 items-center justify-center rounded-[20px] border border-white px-6 text-lg text-white font-abc-favorit">
-              Farcaster Mini App Demo
+                  Farcaster Mini App Demo
             </div>
             <div className="text-center mt-4 text-white text-7xl font-medium font-abc-favorit leading-[81.60px]">
               Starter repo
diff --git a/examples/privy-next-farcaster/src/app/page.tsx b/examples/privy-next-farcaster/src/app/page.tsx
index 6adaaf2..9a14e87 100644
--- a/examples/privy-next-farcaster/src/app/page.tsx
+++ b/examples/privy-next-farcaster/src/app/page.tsx
@@ -28,14 +28,14 @@ function Home() {
     <div
       className={`${
         authenticated
-          ? "bg-[#E0E7FF66] md:max-h-[100vh] md:overflow-hidden"
+          ? "bg-[#E0E7FF66] md:max-h-screen md:overflow-hidden"
           : "bg-transparent h-screen overflow-hidden"
       }`}
     >
       <Header authenticated={authenticated} />
       {authenticated ? (
-        <section className="w-full flex flex-col md:flex-row h-screen pt-[60px]">
-          <div className="flex-grow overflow-y-auto h-full p-4 pl-8">
+        <section className="w-full flex flex-col md:flex-row md:h-screen pt-[60px]">
+          <div className="grow md:overflow-y-auto md:h-full p-4 pl-8 pb-4">
             <button className="button" onClick={logout}>
               <ArrowLeftIcon className="h-4 w-4" strokeWidth={2} /> Logout
             </button>
@@ -52,7 +52,9 @@ function Home() {
               <MFA />
             </div>
           </div>
-          <UserObject />
+          <div className="md:shrink-0 md:overflow-y-auto md:h-full">
+            <UserObject />
+          </div>
         </section>
       ) : (
         <section className="w-full flex flex-row justify-center items-center h-screen relative">
@@ -65,7 +67,7 @@ function Home() {
           />
           <div className="z-10 flex flex-col items-center justify-center w-full h-full">
             <div className="flex h-10 items-center justify-center rounded-[20px] border border-white px-6 text-lg text-white font-abc-favorit">
-              Farcaster Demo
+                  Farcaster Demo
             </div>
             <div className="text-center mt-4 text-white text-7xl font-medium font-abc-favorit leading-[81.60px]">
               Starter repo
diff --git a/examples/privy-next-funding/src/app/page.tsx b/examples/privy-next-funding/src/app/page.tsx
index 72dcdf8..a35ed81 100644
--- a/examples/privy-next-funding/src/app/page.tsx
+++ b/examples/privy-next-funding/src/app/page.tsx
@@ -24,11 +24,11 @@ function Home() {
   }
 
   return (
-    <div className="bg-[#E0E7FF66] md:max-h-[100vh] md:overflow-hidden">
+    <div className="bg-[#E0E7FF66] md:max-h-screen md:overflow-hidden">
       <Header />
       {authenticated ? (
         <section className="w-full flex flex-col md:flex-row md:h-[calc(100vh-60px)]">
-          <div className="flex-grow overflow-y-auto h-full p-4 pl-8">
+          <div className="grow md:overflow-y-auto md:h-full p-4 pl-8 pb-4">
             <button className="button" onClick={logout}>
               <ArrowLeftIcon className="h-4 w-4" strokeWidth={2} /> Logout
             </button>
@@ -44,7 +44,9 @@ function Home() {
               <MFA />*/}
             </div>
           </div>
-          <UserObject />
+          <div className="md:shrink-0 md:overflow-y-auto md:h-full">
+            <UserObject />
+          </div>
         </section>
       ) : (
         <section className="w-full flex flex-row justify-center items-center h-[calc(100vh-60px)] relative">
@@ -57,7 +59,7 @@ function Home() {
           />
           <div className="z-10 flex flex-col items-center justify-center w-full h-full">
             <div className="flex h-10 items-center justify-center rounded-[20px] border border-white px-6 text-lg text-white font-abc-favorit">
-              Funding Demo
+                  Funding Demo
             </div>
             <div className="text-center mt-4 text-white text-7xl font-medium font-abc-favorit leading-[81.60px]">
               Starter repo
diff --git a/examples/privy-next-permissionless/src/app/page.tsx b/examples/privy-next-permissionless/src/app/page.tsx
index 8fc2a4b..3ae8e14 100644
--- a/examples/privy-next-permissionless/src/app/page.tsx
+++ b/examples/privy-next-permissionless/src/app/page.tsx
@@ -30,7 +30,7 @@ export default function HomePage() {
           />
           <div className="z-10 flex flex-col items-center justify-center w-full h-full">
             <div className="flex h-10 items-center justify-center rounded-[20px] border border-white px-6 text-lg text-white font-abc-favorit">
-              Permissionless Demo
+                  Permissionless Demo
             </div>
             <div className="text-center mt-4 text-white text-7xl font-medium font-abc-favorit leading-[81.60px]">
               Smart Accounts
diff --git a/examples/privy-next-session-keys/src/app/page.tsx b/examples/privy-next-session-keys/src/app/page.tsx
index 45dd08e..60cc2f5 100644
--- a/examples/privy-next-session-keys/src/app/page.tsx
+++ b/examples/privy-next-session-keys/src/app/page.tsx
@@ -28,14 +28,14 @@ function Home() {
     <div
       className={`${
         authenticated
-          ? "bg-[#E0E7FF66] md:max-h-[100vh] md:overflow-hidden"
+          ? "bg-[#E0E7FF66] md:max-h-screen md:overflow-hidden"
           : "bg-transparent h-screen overflow-hidden"
       }`}
     >
       <Header authenticated={authenticated} />
       {authenticated ? (
-        <section className="w-full flex flex-col md:flex-row h-screen pt-[60px]">
-          <div className="flex-grow overflow-y-auto h-full p-4 pl-8">
+        <section className="w-full flex flex-col md:flex-row md:h-screen pt-[60px]">
+          <div className="grow md:overflow-y-auto md:h-full p-4 pl-8 pb-4">
             <button className="button" onClick={logout}>
               <ArrowLeftIcon className="h-4 w-4" strokeWidth={2} /> Logout
             </button>
@@ -52,7 +52,9 @@ function Home() {
               <MFA /> */}
             </div>
           </div>
-          <UserObject />
+          <div className="md:shrink-0 md:overflow-y-auto md:h-full">
+            <UserObject />
+          </div>
         </section>
       ) : (
         <section className="w-full flex flex-row justify-center items-center h-screen relative">
@@ -65,7 +67,7 @@ function Home() {
           />
           <div className="z-10 flex flex-col items-center justify-center w-full h-full">
             <div className="flex h-10 items-center justify-center rounded-[20px] border border-white px-6 text-lg text-white font-abc-favorit">
-              Session Keys Demo
+                  Session Keys Demo
             </div>
             <div className="text-center mt-4 text-white text-7xl font-medium font-abc-favorit leading-[81.60px]">
               Starter repo
diff --git a/examples/privy-next-smart-wallets/src/app/page.tsx b/examples/privy-next-smart-wallets/src/app/page.tsx
index 05e30b5..b175886 100644
--- a/examples/privy-next-smart-wallets/src/app/page.tsx
+++ b/examples/privy-next-smart-wallets/src/app/page.tsx
@@ -27,11 +27,11 @@ function Home() {
   }
 
   return (
-    <div className={`${authenticated ? 'bg-[#E0E7FF66] md:max-h-[100vh] md:overflow-hidden' : 'bg-transparent h-screen overflow-hidden'}`}>
+    <div className={`${authenticated ? 'bg-[#E0E7FF66] md:max-h-screen md:overflow-hidden' : 'bg-transparent h-screen overflow-hidden'}`}>
       <Header authenticated={authenticated} />
       {authenticated ? (
-        <section className="w-full flex flex-col md:flex-row h-screen pt-[60px]">
-          <div className="flex-grow overflow-y-auto h-full p-4 pl-8">
+        <section className="w-full flex flex-col md:flex-row md:h-screen pt-[60px]">
+          <div className="grow md:overflow-y-auto md:h-full p-4 pl-8 pb-4">
             <button className="button" onClick={logout}>
               <ArrowLeftIcon className="h-4 w-4" strokeWidth={2} /> Logout
             </button>
@@ -48,7 +48,9 @@ function Home() {
               <MFA />
             </div>
           </div>
-          <UserObject />
+          <div className="md:shrink-0 md:overflow-y-auto md:h-full">
+            <UserObject />
+          </div>
         </section>
       ) : (
         <section className="w-full flex flex-row justify-center items-center h-screen relative">
@@ -61,7 +63,7 @@ function Home() {
           />
           <div className="z-10 flex flex-col items-center justify-center w-full h-full">
             <div className="flex h-10 items-center justify-center rounded-[20px] border border-white px-6 text-lg text-white font-abc-favorit">
-              Smart Wallets Demo
+                  Smart Wallets Demo
             </div>
             <div className="text-center mt-4 text-white text-7xl font-medium font-abc-favorit leading-[81.60px]">
               Starter repo
diff --git a/examples/privy-next-solana/src/app/page.tsx b/examples/privy-next-solana/src/app/page.tsx
index ad95cdf..0e2e593 100644
--- a/examples/privy-next-solana/src/app/page.tsx
+++ b/examples/privy-next-solana/src/app/page.tsx
@@ -26,14 +26,14 @@ function Home() {
     <div
       className={`${
         authenticated
-          ? "bg-[#E0E7FF66] md:max-h-[100vh] md:overflow-hidden"
+          ? "bg-[#E0E7FF66] md:max-h-screen md:overflow-hidden"
           : "bg-transparent h-screen overflow-hidden"
       }`}
     >
       <Header authenticated={authenticated} />
       {authenticated ? (
-        <section className="w-full flex flex-col md:flex-row h-screen pt-[60px]">
-          <div className="flex-grow overflow-y-auto h-full p-4 pl-8">
+        <section className="w-full flex flex-col md:flex-row md:h-screen pt-[60px]">
+          <div className="grow md:overflow-y-auto md:h-full p-4 pl-8 pb-4">
             <button className="button" onClick={logout}>
               <ArrowLeftIcon className="h-4 w-4" strokeWidth={2} /> Logout
             </button>
@@ -48,7 +48,9 @@ function Home() {
               <MFA />
             </div>
           </div>
-          <UserObject />
+          <div className="md:shrink-0 md:overflow-y-auto md:h-full">
+            <UserObject />
+          </div>
         </section>
       ) : (
         <section className="w-full flex flex-row justify-center items-center h-screen relative">
@@ -61,7 +63,7 @@ function Home() {
           />
           <div className="z-10 flex flex-col items-center justify-center w-full h-full">
             <div className="flex h-10 items-center justify-center rounded-[20px] border border-white px-6 text-lg text-white font-abc-favorit">
-              Solana Demo
+                  Solana Demo
             </div>
             <div className="text-center mt-4 text-white text-7xl font-medium font-abc-favorit leading-[81.60px]">
               Starter repo
diff --git a/examples/privy-next-wagmi/src/app/page.tsx b/examples/privy-next-wagmi/src/app/page.tsx
index c75f7c4..176b74c 100644
--- a/examples/privy-next-wagmi/src/app/page.tsx
+++ b/examples/privy-next-wagmi/src/app/page.tsx
@@ -24,11 +24,11 @@ function Home() {
   }
 
   return (
-    <div className={`${authenticated ? 'bg-[#E0E7FF66] md:max-h-[100vh] md:overflow-hidden' : 'bg-transparent h-screen overflow-hidden'}`}>
+    <div className={`${authenticated ? 'bg-[#E0E7FF66] md:max-h-screen md:overflow-hidden' : 'bg-transparent h-screen overflow-hidden'}`}>
       <Header authenticated={authenticated} />
       {authenticated ? (
-        <section className="w-full flex flex-col md:flex-row h-screen pt-[60px]">
-          <div className="flex-grow overflow-y-auto h-full p-4 pl-8">
+        <section className="w-full flex flex-col md:flex-row md:h-screen pt-[60px]">
+          <div className="grow md:overflow-y-auto md:h-full p-4 pl-8 pb-4">
             <button className="button" onClick={logout}>
               <ArrowLeftIcon className="h-4 w-4" strokeWidth={2} /> Logout
             </button>
@@ -45,7 +45,9 @@ function Home() {
               <MFA />  */}
             </div>
           </div>
-          <UserObject />
+          <div className="md:shrink-0 md:overflow-y-auto md:h-full">
+            <UserObject />
+          </div>
         </section>
       ) : (
         <section className="w-full flex flex-row justify-center items-center h-screen relative">
@@ -57,10 +59,10 @@ function Home() {
             priority
           />
           <div className="z-10 flex flex-col items-center justify-center w-full h-full">
-          <div className="flex h-10 items-center justify-center rounded-[20px] border border-white px-6 text-lg text-white font-abc-favorit">
-            Wagmi demo
-          </div>
-        <div className="text-center mt-4 text-white text-7xl font-medium font-abc-favorit leading-[81.60px]">
+            <div className="flex h-10 items-center justify-center rounded-[20px] border border-white px-6 text-lg text-white font-abc-favorit">
+                Wagmi demo
+              </div>
+            <div className="text-center mt-4 text-white text-7xl font-medium font-abc-favorit leading-[81.60px]">
           Starter repo
         </div>
             <div className="text-center text-white text-xl font-normal leading-loose mt-8">
@@ -71,7 +73,11 @@ function Home() {
               onClick={() => {
                 login();
                 setTimeout(() => {
-                  (document.querySelector('input[type="email"]') as HTMLInputElement)?.focus();
+                  (
+                    document.querySelector(
+                      'input[type="email"]'
+                    ) as HTMLInputElement
+                  )?.focus();
                 }, 150);
               }}
             >
diff --git a/examples/privy-react-chrome-extension/src/App.tsx b/examples/privy-react-chrome-extension/src/App.tsx
index 40f3664..a4675f6 100644
--- a/examples/privy-react-chrome-extension/src/App.tsx
+++ b/examples/privy-react-chrome-extension/src/App.tsx
@@ -22,11 +22,11 @@ function App() {
   }
 
   return (
-    <div className="bg-[#E0E7FF66] md:max-h-[100vh] md:overflow-hidden">
+    <div className="bg-[#E0E7FF66] md:max-h-screen md:overflow-hidden">
       <Header />
       {authenticated ? (
-        <section className="w-full flex flex-col md:flex-row md:h-[calc(100vh-60px)]">
-          <div className="flex-grow overflow-y-auto h-full p-4 pl-8">
+        <section className="w-full flex flex-col md:flex-row md:h-screen pt-[60px]">
+          <div className="grow md:overflow-y-auto md:h-full p-4 pl-8 pb-4">
             <button className="button" onClick={logout}>
               <ArrowLeftIcon className="h-4 w-4" strokeWidth={2} /> Logout
             </button>
@@ -42,7 +42,9 @@ function App() {
               <MFA />
             </div>
           </div>
-          <UserObject />
+          <div className="md:shrink-0 md:overflow-y-auto md:h-full">
+            <UserObject />
+          </div>
         </section>
       ) : (
         <section className="w-full flex flex-row justify-center items-center h-[calc(100vh-60px)] relative">
diff --git a/privy-next-starter/src/app/page.tsx b/privy-next-starter/src/app/page.tsx
index bf4fac0..4f33c10 100644
--- a/privy-next-starter/src/app/page.tsx
+++ b/privy-next-starter/src/app/page.tsx
@@ -24,11 +24,17 @@ function Home() {
   }
 
   return (
-    <div className={`${authenticated ? 'bg-[#E0E7FF66] md:max-h-[100vh] md:overflow-hidden' : 'bg-transparent h-screen overflow-hidden'}`}>
+    <div
+      className={`${
+        authenticated
+          ? "bg-[#E0E7FF66] md:max-h-screen md:overflow-hidden"
+          : "bg-transparent h-screen overflow-hidden"
+      }`}
+    >
       <Header authenticated={authenticated} />
       {authenticated ? (
-        <section className="w-full flex flex-col md:flex-row h-screen pt-[60px]">
-          <div className="flex-grow overflow-y-auto h-full p-4 pl-8">
+        <section className="w-full flex flex-col md:flex-row md:h-screen pt-[60px]">
+          <div className="grow md:overflow-y-auto md:h-full p-4 pl-8 pb-4">
             <button className="button" onClick={logout}>
               <ArrowLeftIcon className="h-4 w-4" strokeWidth={2} /> Logout
             </button>
@@ -44,7 +50,9 @@ function Home() {
               <MFA />
             </div>
           </div>
-          <UserObject />
+          <div className="md:shrink-0 md:overflow-y-auto md:h-full">
+            <UserObject />
+          </div>
         </section>
       ) : (
         <section className="w-full flex flex-row justify-center items-center h-screen relative">
@@ -56,12 +64,12 @@ function Home() {
             priority
           />
           <div className="z-10 flex flex-col items-center justify-center w-full h-full">
-          <div className="flex h-10 items-center justify-center rounded-[20px] border border-white px-6 text-lg text-white font-abc-favorit">
-            Next.js Demo
-          </div>
-        <div className="text-center mt-4 text-white text-7xl font-medium font-abc-favorit leading-[81.60px]">
-          Starter repo
-        </div>
+            <div className="flex h-10 items-center justify-center rounded-[20px] border border-white px-6 text-lg text-white font-abc-favorit">
+              Next.js Demo
+            </div>
+            <div className="text-center mt-4 text-white text-7xl font-medium font-abc-favorit leading-[81.60px]">
+              Starter repo
+            </div>
             <div className="text-center text-white text-xl font-normal leading-loose mt-8">
               Get started developing with Privy using our Next.js starter repo
             </div>
@@ -70,7 +78,11 @@ function Home() {
               onClick={() => {
                 login();
                 setTimeout(() => {
-                  (document.querySelector('input[type="email"]') as HTMLInputElement)?.focus();
+                  (
+                    document.querySelector(
+                      'input[type="email"]'
+                    ) as HTMLInputElement
+                  )?.focus();
                 }, 150);
               }}
             >
@@ -79,7 +91,7 @@ function Home() {
           </div>
         </section>
       )}
-  
+
       <ToastContainer
         position="top-center"
         autoClose={5000}
diff --git a/privy-react-starter/src/App.tsx b/privy-react-starter/src/App.tsx
index 8689040..e3c713c 100644
--- a/privy-react-starter/src/App.tsx
+++ b/privy-react-starter/src/App.tsx
@@ -21,11 +21,11 @@ function App() {
   }
 
   return (
-    <div className="bg-[#E0E7FF66] md:max-h-[100vh] md:overflow-hidden">
+    <div className="bg-[#E0E7FF66] md:max-h-screen md:overflow-hidden">
       <Header />
       {authenticated ? (
-        <section className="w-full flex flex-col md:flex-row md:h-[calc(100vh-60px)]">
-          <div className="flex-grow overflow-y-auto h-full p-4 pl-8">
+        <section className="w-full flex flex-col md:flex-row md:h-screen pt-[60px]">
+          <div className="grow md:overflow-y-auto md:h-full p-4 pl-8 pb-4">
             <button className="button" onClick={logout}>
               <ArrowLeftIcon className="h-4 w-4" strokeWidth={2} /> Logout
             </button>
@@ -41,7 +41,9 @@ function App() {
               <MFA />
             </div>
           </div>
-          <UserObject />
+          <div className="md:shrink-0 md:overflow-y-auto md:h-full">
+            <UserObject />
+          </div>
         </section>
       ) : (
         <section className="w-full flex flex-row justify-center items-center h-[calc(100vh-60px)] relative">