[TOOL-3038] Replace h-screen with h-dvh - fix iOS safari height issues (#5932)

MananTank · MananTank · commit 3cb1ab9f98c7 · 2025-01-12T19:18:01.000Z
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ export default async function AccountLayout(props: {`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`return (`
`23`		`- <div className="flex min-h-screen flex-col bg-background">`
	`23`	`+ <div className="flex min-h-dvh flex-col bg-background">`
`24`	`24`	`<div className="flex grow flex-col">`
`25`	`25`	`<HeaderAndNav teams={teams} twAccount={account} />`
`26`	`26`	`{props.children}`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ export function ChatPageLayout(props: {`
`15`	`15`	`return (`
`16`	`16`	`<div`
`17`	`17`	`className={cn(`
`18`		`- "flex h-screen flex-col overflow-hidden bg-background lg:flex-row",`
	`18`	`+ "flex h-dvh flex-col overflow-hidden bg-background lg:flex-row",`
`19`	`19`	`props.className,`
`20`	`20`	`)}`
`21`	`21`	`>`