fix: use page-height class for screen min-height

agrattan0820 · Jul 26, 2024 · 0b7c548 · 0b7c548
1 parent eabdb66
commit 0b7c548
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 7 deletions.
diff --git a/apps/client/src/app/account/page.tsx b/apps/client/src/app/account/page.tsx
@@ -15,7 +15,7 @@ export default async function Account() {
   return (
     <>
       <Header session={session} />
-      <main className="relative flex min-h-[100dvh] flex-col justify-center">
+      <main className="page-height relative flex flex-col justify-center">
         <AccountContent session={session} />
       </main>
       <Footer />

diff --git a/apps/client/src/app/create-account/[nickname]/page.tsx b/apps/client/src/app/create-account/[nickname]/page.tsx
@@ -32,7 +32,7 @@ export default async function CreateAccountPage({
   return (
     <>
       <Header session={session} />
-      <main className="container mx-auto flex items-center justify-center px-4 pb-16 pt-48 lg:min-h-[100dvh] lg:pb-0 lg:pt-0">
+      <main className="page-height-lg container mx-auto flex items-center justify-center px-4 pb-16 pt-48 lg:pb-0 lg:pt-0">
         <section>
           <div className="mx-auto grid w-full max-w-xl grid-cols-1 gap-x-8 gap-y-4 rounded-2xl p-8 ring ring-slate-600 md:grid-cols-[8rem_1fr]">
             <Friend className="w-32" type="SMILING" />

diff --git a/apps/client/src/app/globals.css b/apps/client/src/app/globals.css
@@ -2,6 +2,29 @@
 @tailwind components;
 @tailwind utilities;
 
+.page-height {
+  min-height: 100vh;
+}
+
+@supports(min-height: 100dvh) {
+  .page-height {
+    min-height: 100dvh;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .page-height-lg {
+    min-height: 100vh;
+  }
+
+  @supports(min-height: 100dvh) {
+    .page-height-lg {
+      min-height: 100dvh;
+    }
+  }
+}
+
+
 .loading-ellipsis:after {
   font-family: var(--font-space);
   overflow: hidden;

diff --git a/apps/client/src/app/room/[code]/game/[gameId]/game.tsx b/apps/client/src/app/room/[code]/game/[gameId]/game.tsx
@@ -167,7 +167,7 @@ export default function Game({ gameInfo, session }: GameProps) {
     <main
       className={cn(
         !state.matches("leaderboard") &&
-          "flex min-h-[100dvh] flex-col justify-center",
+          "page-height flex flex-col justify-center",
       )}
     >
       <section className="container mx-auto px-4 py-24 md:py-16">

diff --git a/apps/client/src/app/room/[code]/lobby.tsx b/apps/client/src/app/room/[code]/lobby.tsx
@@ -70,7 +70,7 @@ export default function Lobby({
   return (
     <>
       <Header session={session} />
-      <main className="flex min-h-[100dvh] flex-col justify-center">
+      <main className="page-height flex flex-col justify-center">
         <motion.section layout="position" className="container mx-auto px-4">
           {!roomIsFull && (
             <p className="mb-2 hidden text-center text-xl sm:block">

diff --git a/apps/client/src/app/sign-in/[nickname]/page.tsx b/apps/client/src/app/sign-in/[nickname]/page.tsx
@@ -32,7 +32,7 @@ export default async function SignInPage({
   return (
     <>
       <Header session={session} />
-      <main className="container mx-auto flex items-center justify-center px-4 pb-16 pt-48 lg:min-h-[100dvh] lg:pb-0 lg:pt-0">
+      <main className="page-height-lg container mx-auto flex items-center justify-center px-4 pb-16 pt-48 lg:pb-0 lg:pt-0">
         <section>
           <div className="mx-auto grid w-full max-w-xl grid-cols-1 gap-x-8 gap-y-4 rounded-2xl p-8 ring ring-slate-600 md:grid-cols-[8rem_1fr]">
             <Friend className="w-32" type="KAWAII" />

diff --git a/apps/client/src/components/error-screen.tsx b/apps/client/src/components/error-screen.tsx
@@ -2,7 +2,7 @@ import { LinkButton } from "./button";
 
 export default function ErrorScreen({ details }: { details: string }) {
   return (
-    <main className="flex min-h-[100dvh] flex-col justify-center">
+    <main className="page-height flex flex-col justify-center">
       <section className="container mx-auto px-4">
         <h1 className="mb-8 text-4xl md:text-6xl">
           artif<span className="">i</span>cial <br /> unintelligence

diff --git a/apps/client/src/components/homepage-template.tsx b/apps/client/src/components/homepage-template.tsx
@@ -26,7 +26,7 @@ export default function HomepageTemplate({
     <>
       <Header session={session} />
       <main className="relative">
-        <section className="container mx-auto flex flex-col-reverse items-start justify-center gap-8 px-4 pb-16 pt-32 sm:items-center lg:min-h-[100dvh] lg:flex-row lg:gap-24 lg:pb-0 lg:pt-0">
+        <section className="page-height-lg container mx-auto flex flex-col-reverse items-start justify-center gap-8 px-4 pb-16 pt-32 sm:items-center lg:flex-row lg:gap-24 lg:pb-0 lg:pt-0">
           {runningGame && (
             <div className="absolute left-1/2 top-16 w-full -translate-x-1/2 sm:top-8">
               <LinkSecondaryButton