Fix height isses at large screen sizes

lovephimu · Jan 24, 2024 · b6bd375 · b6bd375
1 parent 890a682
commit b6bd375
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -5,3 +5,12 @@
 .dynamic-full-height {
   height: 100dvh;
 }
+
+@media (min-height: 2000px) {
+  .wide-screen-height {
+    height: 35dvh !important;
+  }
+  .wide-screen-height-logo {
+    height: 10dvh !important;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -21,10 +21,12 @@ export default function RootLayout({
         className={`bg-primaryBlue ${inter.className} dynamic-full-height flex flex-col w-full items-center sm:p-10`}
       >
         <main className="h-[100dvh] max-h-[100dvh] w-full flex flex-col justify-center items-center">
-          <section className="flex h-[20dvh] justify-center w-full sm:justify-start sm:max-w-2xl sm:border-primaryPink sm:border-t sm:border-x sm:rounded-t-2xl">
+          <section className="flex h-[20dvh] justify-center w-full sm:justify-start sm:max-w-2xl sm:border-primaryPink sm:border-t sm:border-x sm:rounded-t-2xl wide-screen-height-logo">
             <ChatLogo />
           </section>
-          <section className="w-full flex justify-center">{children}</section>
+          <section className="w-full flex justify-center h-[80dvh] sm:h-[70dvh] wide-screen-height">
+            {children}
+          </section>
         </main>
       </body>
     </html>

diff --git a/app/page.tsx b/app/page.tsx
@@ -2,7 +2,7 @@ import Chat from './components/Chat';
 
 export default function Home() {
   return (
-    <section className="text-primaryPink  h-full w-full flex justify-center sm:max-w-2xl sm:border-b-4 sm:border-x sm:rounded-b-2xl sm:border-primaryPink">
+    <section className="text-primaryPink h-full w-full flex justify-center sm:max-w-2xl sm:border-b-8 sm:border-x sm:rounded-b-2xl sm:border-primaryPink">
       <Chat />
     </section>
   );