Merge pull request #4 from justforworkandstuff/fix/bug_support_dvh

fix: mobile view add `dvh` support

Author: justforworkandstuff

my-app/src/modules/contact/contactPage.tsx

@@ -21,7 +21,7 @@ const ContactPage = () => {
 
   return (
     <div
-      className={`min-h-screen w-full flex flex-col items-center md:justify-center py-2 ${
+      className={`min-h-dvh w-full flex flex-col items-center md:justify-center py-2 ${
         isThemeLight ? "bg-white text-black" : "bg-black text-white"
       }`}
     >

my-app/src/modules/error/defaultErrorPage.tsx

@@ -16,14 +16,14 @@ function DefaultErrorPage() {
 
   return (
     <div
-      className={`min-h-screen w-screen flex flex-col items-center justify-center ${
+      className={`min-h-dvh w-full flex flex-col items-center md:justify-center py-2 ${
         isThemeLight ? "bg-white text-black" : "bg-black text-white"
       }`}
     >
       <ThemeSection />
 
       <div
-        className={`w-[95%] h-[90vh] border relative p-12 flex items-center justify-center ${
+        className={`w-[95%] h-full flex-1 border relative p-8 flex items-center justify-center ${
           isThemeLight ? "border-black" : "border-gray-500"
         }`}
       >

my-app/src/modules/home/homePage.tsx

@@ -33,7 +33,7 @@ const HomePage = () => {
 
   return (
     <div
-      className={`min-h-screen w-full flex flex-col items-center md:justify-center py-2 ${
+      className={`min-h-dvh w-full flex flex-col items-center md:justify-center py-2 ${
         isThemeLight ? "bg-white text-black" : "bg-black text-white"
       }`}
     >

my-app/src/modules/journey/journeyPage.tsx

@@ -34,7 +34,7 @@ const JourneyPage = () => {
 
   return (
     <div
-      className={`min-h-screen w-full flex flex-col items-center md:justify-center py-2 ${
+      className={`min-h-dvh w-full flex flex-col items-center md:justify-center py-2 ${
         isThemeLight ? "bg-white text-black" : "bg-black text-white"
       }`}
     >

my-app/src/modules/projects/projectDetailPage.tsx

@@ -36,7 +36,7 @@ const ProjectDetailPage = () => {
 
   return (
     <div
-      className={`min-h-screen w-full flex flex-col items-center md:justify-center py-2 ${
+      className={`min-h-dvh w-full flex flex-col items-center md:justify-center py-2 ${
         isThemeLight ? "bg-white text-black" : "bg-black text-white"
       }`}
     >

my-app/src/modules/projects/projectsPage.tsx

@@ -39,7 +39,7 @@ const ProjectsPage = () => {
 
   return (
     <div
-      className={`min-h-screen w-full flex flex-col items-center md:justify-center py-2 ${
+      className={`min-h-dvh w-full flex flex-col items-center md:justify-center py-2 ${
         isThemeLight ? "bg-white text-black" : "bg-black text-white"
       }`}
     >

my-app/src/tailwind.css

@@ -674,10 +674,6 @@ video {
   height: 2px;
 }
 
-.h-\[90vh\] {
-  height: 90vh;
-}
-
 .h-full {
   height: 100%;
 }
@@ -690,12 +686,12 @@ video {
   min-height: 3rem;
 }
 
-.min-h-full {
-  min-height: 100%;
+.min-h-dvh {
+  min-height: 100dvh;
 }
 
-.min-h-screen {
-  min-height: 100vh;
+.min-h-full {
+  min-height: 100%;
 }
 
 .w-1\/2 {
@@ -730,10 +726,6 @@ video {
   width: 100%;
 }
 
-.w-screen {
-  width: 100vw;
-}
-
 .min-w-full {
   min-width: 100%;
 }
@@ -957,10 +949,6 @@ video {
   padding: 0.25rem;
 }
 
-.p-12 {
-  padding: 3rem;
-}
-
 .p-4 {
   padding: 1rem;
 }
@@ -1004,10 +992,6 @@ video {
   padding-right: 1rem;
 }
 
-.pt-4 {
-  padding-top: 1rem;
-}
-
 .pt-6 {
   padding-top: 1.5rem;
 }
@@ -1263,10 +1247,6 @@ code {
     justify-content: center;
   }
 
-  .md\:pt-0 {
-    padding-top: 0px;
-  }
-
   .md\:pt-20 {
     padding-top: 5rem;
   }

my-app/tailwind.config.js

@@ -4,7 +4,14 @@ const plugin = require("tailwindcss/plugin");
 module.exports = {
   content: ["./src/**/**/*.{html,js,jsx,ts,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      height: {
+        'dvh': '100dvh',
+      },
+      minHeight: {
+        'dvh': '100dvh',
+      }
+    },
   },
   plugins: [
     require('tailwindcss-debug-screens'),