From 3cb1ab9f98c7639abf6b5e95719e180a8e9f99de Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Sun, 12 Jan 2025 19:18:01 +0000
Subject: [PATCH] [TOOL-3038] Replace h-screen with h-dvh - fix iOS safari
 height issues (#5932)

---
 apps/dashboard/src/@/components/blocks/SettingsCard.stories.tsx | 2 +-
 apps/dashboard/src/@/components/ui/button.stories.tsx           | 2 +-
 apps/dashboard/src/@/components/ui/select.stories.tsx           | 2 +-
 apps/dashboard/src/app/(dashboard)/layout.tsx                   | 2 +-
 .../src/app/account/components/AccountHeaderUI.stories.tsx      | 2 +-
 apps/dashboard/src/app/account/layout.tsx                       | 2 +-
 apps/dashboard/src/app/drops/[slug]/layout.tsx                  | 2 +-
 apps/dashboard/src/app/login/LoginPage.tsx                      | 2 +-
 .../src/app/nebula-app/(app)/components/ChatPageLayout.tsx      | 2 +-
 apps/dashboard/src/app/nebula-app/(app)/layout.tsx              | 2 +-
 apps/dashboard/src/app/nebula-app/[...not-found]/page.tsx       | 2 +-
 apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx     | 2 +-
 apps/dashboard/src/app/project-showcase/page.tsx                | 2 +-
 .../[team_slug]/(team)/~/settings/general/Sidebar.stories.tsx   | 2 +-
 apps/dashboard/src/app/team/[team_slug]/layout.tsx              | 2 +-
 .../team/components/TeamHeader/TeamHeaderLoggedOut.stories.tsx  | 2 +-
 .../src/app/team/components/TeamHeader/TeamHeaderUI.stories.tsx | 2 +-
 apps/dashboard/src/components/dashboard/StepsCard.stories.tsx   | 2 +-
 apps/dashboard/src/components/not-found-page.tsx                | 2 +-
 .../components/settings/Account/Billing/GatedSwitch.stories.tsx | 2 +-
 apps/playground-web/src/app/AppSidebar.tsx                      | 2 +-
 21 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/apps/dashboard/src/@/components/blocks/SettingsCard.stories.tsx b/apps/dashboard/src/@/components/blocks/SettingsCard.stories.tsx
index 2871dd92311..169410edadb 100644
--- a/apps/dashboard/src/@/components/blocks/SettingsCard.stories.tsx
+++ b/apps/dashboard/src/@/components/blocks/SettingsCard.stories.tsx
@@ -28,7 +28,7 @@ export const Mobile: Story = {
 
 function Story() {
   return (
-    <div className="min-h-screen bg-background py-6 text-foreground">
+    <div className="min-h-dvh bg-background py-6 text-foreground">
       <div className="container flex max-w-[1100px] flex-col gap-10 lg:p-10">
         <BadgeContainer label="No Header">
           <SettingsCard
diff --git a/apps/dashboard/src/@/components/ui/button.stories.tsx b/apps/dashboard/src/@/components/ui/button.stories.tsx
index 6b23ebffa6d..a2995711442 100644
--- a/apps/dashboard/src/@/components/ui/button.stories.tsx
+++ b/apps/dashboard/src/@/components/ui/button.stories.tsx
@@ -20,7 +20,7 @@ export const AllVariants: Story = {
 
 function Component() {
   return (
-    <div className="flex min-h-screen flex-col gap-6 bg-background p-6 text-foreground">
+    <div className="flex min-h-dvh flex-col gap-6 bg-background p-6 text-foreground">
       <Variants size="default" />
       <Variants size="sm" />
       <Variants size="icon" />
diff --git a/apps/dashboard/src/@/components/ui/select.stories.tsx b/apps/dashboard/src/@/components/ui/select.stories.tsx
index 957c3586df9..b57c407e01a 100644
--- a/apps/dashboard/src/@/components/ui/select.stories.tsx
+++ b/apps/dashboard/src/@/components/ui/select.stories.tsx
@@ -31,7 +31,7 @@ function randomName() {
 
 function Component() {
   return (
-    <div className="flex min-h-screen flex-col gap-10 bg-background p-6 text-foreground">
+    <div className="flex min-h-dvh flex-col gap-10 bg-background p-6 text-foreground">
       <BadgeContainer label="5 items, no placeholder, no label, value filled">
         <SelectDemo listItems={5} selectFirst />
       </BadgeContainer>
diff --git a/apps/dashboard/src/app/(dashboard)/layout.tsx b/apps/dashboard/src/app/(dashboard)/layout.tsx
index 694c18dbc38..6c67ae4b29b 100644
--- a/apps/dashboard/src/app/(dashboard)/layout.tsx
+++ b/apps/dashboard/src/app/(dashboard)/layout.tsx
@@ -7,7 +7,7 @@ export default function DashboardLayout(props: {
 }) {
   return (
     <ErrorProvider>
-      <div className="flex min-h-screen flex-col bg-background">
+      <div className="flex min-h-dvh flex-col bg-background">
         <div className="border-border border-b bg-muted/50">
           <TeamHeader />
         </div>
diff --git a/apps/dashboard/src/app/account/components/AccountHeaderUI.stories.tsx b/apps/dashboard/src/app/account/components/AccountHeaderUI.stories.tsx
index e070a92b3c1..1c7f22950f4 100644
--- a/apps/dashboard/src/app/account/components/AccountHeaderUI.stories.tsx
+++ b/apps/dashboard/src/app/account/components/AccountHeaderUI.stories.tsx
@@ -47,7 +47,7 @@ function Variants(props: {
 
   return (
     <ThirdwebProvider>
-      <div className="flex min-h-screen flex-col gap-6 bg-gray-700 px-4 py-10">
+      <div className="flex min-h-dvh flex-col gap-6 bg-gray-700 px-4 py-10">
         <BadgeContainer label="Account Loaded">
           <Comp
             teamsAndProjects={teamsAndProjectsStub}
diff --git a/apps/dashboard/src/app/account/layout.tsx b/apps/dashboard/src/app/account/layout.tsx
index eae8f81f88f..749b0745f51 100644
--- a/apps/dashboard/src/app/account/layout.tsx
+++ b/apps/dashboard/src/app/account/layout.tsx
@@ -20,7 +20,7 @@ export default async function AccountLayout(props: {
   }
 
   return (
-    <div className="flex min-h-screen flex-col bg-background">
+    <div className="flex min-h-dvh flex-col bg-background">
       <div className="flex grow flex-col">
         <HeaderAndNav teams={teams} twAccount={account} />
         {props.children}
diff --git a/apps/dashboard/src/app/drops/[slug]/layout.tsx b/apps/dashboard/src/app/drops/[slug]/layout.tsx
index 99f46049b02..79ba14e87d0 100644
--- a/apps/dashboard/src/app/drops/[slug]/layout.tsx
+++ b/apps/dashboard/src/app/drops/[slug]/layout.tsx
@@ -4,7 +4,7 @@ import { ErrorProvider } from "contexts/error-handler";
 export default function DashboardLayout(props: { children: React.ReactNode }) {
   return (
     <ErrorProvider>
-      <div className="flex min-h-screen flex-col bg-background">
+      <div className="flex min-h-dvh flex-col bg-background">
         {/* <DashboardHeader /> */}
         <div className="flex grow flex-col">{props.children}</div>
         <AppFooter />
diff --git a/apps/dashboard/src/app/login/LoginPage.tsx b/apps/dashboard/src/app/login/LoginPage.tsx
index d13d044cafd..9e424dfbfcc 100644
--- a/apps/dashboard/src/app/login/LoginPage.tsx
+++ b/apps/dashboard/src/app/login/LoginPage.tsx
@@ -48,7 +48,7 @@ export function LoginAndOnboardingPage(props: {
   redirectPath: string;
 }) {
   return (
-    <div className="relative flex min-h-screen flex-col overflow-hidden bg-background">
+    <div className="relative flex min-h-dvh flex-col overflow-hidden bg-background">
       <div className="border-b bg-background">
         <header className="container flex w-full flex-row items-center justify-between px-6 py-4">
           <div className="flex shrink-0 items-center gap-3">
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.tsx
index 26114cf3d5a..c5fb197c654 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.tsx
@@ -15,7 +15,7 @@ export function ChatPageLayout(props: {
   return (
     <div
       className={cn(
-        "flex h-screen flex-col overflow-hidden bg-background lg:flex-row",
+        "flex h-dvh flex-col overflow-hidden bg-background lg:flex-row",
         props.className,
       )}
     >
diff --git a/apps/dashboard/src/app/nebula-app/(app)/layout.tsx b/apps/dashboard/src/app/nebula-app/(app)/layout.tsx
index bc7ac6dd3e8..0af841ceff0 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/layout.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/layout.tsx
@@ -67,7 +67,7 @@ function NebulaWaitlistPage(props: {
   team: Team;
 }) {
   return (
-    <div className="flex min-h-screen flex-col overflow-hidden">
+    <div className="flex min-h-dvh flex-col overflow-hidden">
       <header className="border-b">
         <div className="container flex items-center justify-between px-4 py-3">
           <div className="flex items-center gap-2 font-medium text-xl tracking-tight">
diff --git a/apps/dashboard/src/app/nebula-app/[...not-found]/page.tsx b/apps/dashboard/src/app/nebula-app/[...not-found]/page.tsx
index ff297366998..c4ddf35ee9f 100644
--- a/apps/dashboard/src/app/nebula-app/[...not-found]/page.tsx
+++ b/apps/dashboard/src/app/nebula-app/[...not-found]/page.tsx
@@ -3,7 +3,7 @@ import { TrackedLinkTW } from "@/components/ui/tracked-link";
 export default function NebulaNotFound() {
   return (
     <div className="overflow-hidden">
-      <div className="container flex h-full min-h-screen flex-col justify-center">
+      <div className="container flex h-full min-h-dvh flex-col justify-center">
         <div className="flex flex-col items-center">
           <div className="z-10 flex size-[90px] items-center justify-center rounded-3xl border bg-background font-semibold text-2xl text-muted-foreground tracking-tight shadow-lg md:size-[100px] md:text-3xl">
             404
diff --git a/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx b/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx
index 6fd0f32d42c..fc22dab3eba 100644
--- a/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx
+++ b/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx
@@ -16,7 +16,7 @@ export function NebulaLoginPage(props: {
     props.account ? "connect" : "welcome",
   );
   return (
-    <div className="relative flex min-h-screen flex-col overflow-hidden bg-background">
+    <div className="relative flex min-h-dvh flex-col overflow-hidden bg-background">
       {/* nav */}
       <header className="border-b">
         <div className="container flex items-center justify-between p-4">
diff --git a/apps/dashboard/src/app/project-showcase/page.tsx b/apps/dashboard/src/app/project-showcase/page.tsx
index 8271ee3c7a1..63a31dbbb5c 100644
--- a/apps/dashboard/src/app/project-showcase/page.tsx
+++ b/apps/dashboard/src/app/project-showcase/page.tsx
@@ -67,7 +67,7 @@ export default async function ProjectShowcasePage(props: {
   );
 
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-dvh bg-background">
       <section className="w-full">
         <div className="container px-4 md:px-6">
           <div className="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/Sidebar.stories.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/Sidebar.stories.tsx
index 2b93cd9e4d2..09069c91cc2 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/Sidebar.stories.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/Sidebar.stories.tsx
@@ -42,7 +42,7 @@ function Story(props: {
   type: "mobile" | "desktop";
 }) {
   return (
-    <div className="container min-h-screen py-6 text-foreground">
+    <div className="container min-h-dvh py-6 text-foreground">
       {props.type === "desktop" && (
         <div className="flex flex-col gap-10">
           <BadgeContainer label="account loaded">
diff --git a/apps/dashboard/src/app/team/[team_slug]/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/layout.tsx
index 7d73f4535f5..f8500cb6410 100644
--- a/apps/dashboard/src/app/team/[team_slug]/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/layout.tsx
@@ -15,7 +15,7 @@ export default async function RootTeamLayout(props: {
   }
 
   return (
-    <div className="flex min-h-screen flex-col">
+    <div className="flex min-h-dvh flex-col">
       <div className="flex grow flex-col">{props.children}</div>
       <TWAutoConnect />
       <AppFooter />
diff --git a/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderLoggedOut.stories.tsx b/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderLoggedOut.stories.tsx
index 243a470e388..30195c2cf09 100644
--- a/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderLoggedOut.stories.tsx
+++ b/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderLoggedOut.stories.tsx
@@ -42,7 +42,7 @@ function Variants(props: {
       : TeamHeaderLoggedOutDesktopUI;
 
   return (
-    <div className="container min-h-screen bg-zinc-900 py-10">
+    <div className="container min-h-dvh bg-zinc-900 py-10">
       <div className="bg-background">
         <Comp />
       </div>
diff --git a/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderUI.stories.tsx b/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderUI.stories.tsx
index 9425a7ceeba..b5943d8cc8b 100644
--- a/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderUI.stories.tsx
+++ b/apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderUI.stories.tsx
@@ -52,7 +52,7 @@ function Variants(props: {
   }
   return (
     <ThirdwebProvider>
-      <div className="flex min-h-screen flex-col gap-6 bg-gray-700 px-4 py-10">
+      <div className="flex min-h-dvh flex-col gap-6 bg-gray-700 px-4 py-10">
         <BadgeContainer label="Team Free, Account Loaded">
           <Comp
             teamsAndProjects={teamsAndProjectsStub}
diff --git a/apps/dashboard/src/components/dashboard/StepsCard.stories.tsx b/apps/dashboard/src/components/dashboard/StepsCard.stories.tsx
index 1671e766825..2fcb9026700 100644
--- a/apps/dashboard/src/components/dashboard/StepsCard.stories.tsx
+++ b/apps/dashboard/src/components/dashboard/StepsCard.stories.tsx
@@ -56,7 +56,7 @@ function Component(props: {
 }) {
   const { cardTitle, cardDescription } = props;
   return (
-    <div className="min-h-screen bg-background p-4 text-foreground">
+    <div className="min-h-dvh bg-background p-4 text-foreground">
       <div className="mx-auto flex max-w-[1000px] flex-col gap-12">
         <BadgeContainer label="2 steps, 0 Completed">
           <StepsCard
diff --git a/apps/dashboard/src/components/not-found-page.tsx b/apps/dashboard/src/components/not-found-page.tsx
index 04274b92d84..a35ed1f41b9 100644
--- a/apps/dashboard/src/components/not-found-page.tsx
+++ b/apps/dashboard/src/components/not-found-page.tsx
@@ -3,7 +3,7 @@ import { TrackedLinkTW } from "@/components/ui/tracked-link";
 export function NotFoundPage() {
   return (
     <div className="overflow-hidden">
-      <div className="container flex h-full min-h-screen flex-col justify-center">
+      <div className="container flex h-full min-h-dvh flex-col justify-center">
         <div className="flex flex-col items-center">
           <div className="z-10 flex size-[90px] items-center justify-center rounded-3xl border bg-background font-semibold text-2xl text-muted-foreground tracking-tight shadow-lg md:size-[100px] md:text-3xl">
             404
diff --git a/apps/dashboard/src/components/settings/Account/Billing/GatedSwitch.stories.tsx b/apps/dashboard/src/components/settings/Account/Billing/GatedSwitch.stories.tsx
index 4465aeb89cf..43dd56bd703 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/GatedSwitch.stories.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/GatedSwitch.stories.tsx
@@ -22,7 +22,7 @@ export const AllVariants: Story = {
 
 function Variants() {
   return (
-    <div className="min-h-screen bg-background p-7 text-foreground">
+    <div className="min-h-dvh bg-background p-7 text-foreground">
       <div className="mx-auto flex max-w-[500px] flex-col gap-8">
         <BadgeContainer label="upgradeRequired">
           <GatedSwitch upgradeRequired />
diff --git a/apps/playground-web/src/app/AppSidebar.tsx b/apps/playground-web/src/app/AppSidebar.tsx
index ca4b72283a8..f826e2879c6 100644
--- a/apps/playground-web/src/app/AppSidebar.tsx
+++ b/apps/playground-web/src/app/AppSidebar.tsx
@@ -7,7 +7,7 @@ import { otherLinks } from "./otherLinks";
 
 export function AppSidebar() {
   return (
-    <div className="sticky top-0 z-10 hidden h-screen w-[300px] flex-col border-border/50 border-r-2 xl:flex">
+    <div className="sticky top-0 z-10 hidden h-dvh w-[300px] flex-col border-border/50 border-r-2 xl:flex">
       <div className="px-6 pt-6">
         <Link
           className="flex items-center gap-2"