adding dvh utilities for h-screen (#3163)

This PR closes #2865

Added new utility classes in tailwind config for `dvh` units which takes
account for dynamically changing mobile browser view port.

Co-authored-by: Your Name <you@example.com>

website/src/components/Layout/ChatLayout.tsx

@@ -9,7 +9,7 @@ import { SideMenuItem } from "../SideMenu";
 import { ToSWrapper } from "../ToSWrapper";
 
 export const ChatLayout = ({ children }: PropsWithChildren) => (
-  <div className="min-h-screen h-screen max-h-screen flex flex-col overflow-hidden">
+  <div className="min-h-screen-dvh h-screen-dvh max-h-screen-dvh flex flex-col overflow-hidden">
     <Header fixed={false} preLogoSlot={<ChatListMobile />}></Header>
     <ToSWrapper>
       <div className="flex min-h-0 h-full">

website/tailwind.config.js

@@ -1,4 +1,5 @@
 const defaultTheme = require("tailwindcss/defaultTheme");
+const plugin = require("tailwindcss/plugin");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -77,5 +78,21 @@ module.exports = {
       },
     },
   },
-  plugins: [require("@tailwindcss/forms")],
+  plugins: [
+    require("@tailwindcss/forms"),
+    plugin(function ({ addUtilities, }) {
+      addUtilities({
+        // keeping '100vh' as a fallback for non supporting browsers
+        '.h-screen-dvh': {
+          height: ['100vh', '100dvh'],
+        },
+        '.min-h-screen-dvh': {
+          height: ['100vh', '100dvh'],
+        },
+        '.max-h-screen-dvh': {
+          height: ['100vh', '100dvh'],
+        },
+      })
+    }),
+  ],
 };