fixed layout issues with dynamic height

src/components/DownloadPage/DownloadPage.tsx

@@ -40,7 +40,7 @@ const PublicDownloadPage = () => {
 
   if (!file) {
     return (
-      <div className="w-screen h-screen flex justify-center items-center">
+      <div className="w-screen dynamic-height flex justify-center items-center">
         <Spinner />
         <ToastContainer position="bottom-left" />
       </div>
@@ -57,7 +57,7 @@ const PublicDownloadPage = () => {
 
   return (
     <div>
-      <div className="flex justify-center items-center w-screen h-screen bg-black bg-opacity-90">
+      <div className="flex justify-center items-center w-screen dynamic-height bg-black bg-opacity-90">
         <div
           className="absolute top-5 flex justify-between w-full"
           id="actions-wrapper"

src/components/FileInfoPopup/FileInfoPopup.tsx

@@ -56,7 +56,7 @@ const FileInfoPopup = memo(() => {
 
   return (
     <div
-      className="w-screen h-screen bg-black bg-opacity-80 absolute top-0 left-0 right-0 bottom-0 z-50 flex justify-center items-center flex-col"
+      className="w-screen dynamic-height bg-black bg-opacity-80 absolute top-0 left-0 right-0 bottom-0 z-50 flex justify-center items-center flex-col"
       id="outer-wrapper"
       onClick={outterWrapperClick}
     >

src/components/LoginPage/LoginPage.tsx

@@ -172,7 +172,7 @@ const LoginPage = () => {
   if (attemptingLogin) {
     return (
       <div>
-        <div className="w-screen h-screen flex justify-center items-center">
+        <div className="w-screen dynamic-height flex justify-center items-center">
           <div>
             <Spinner />
           </div>
@@ -183,7 +183,7 @@ const LoginPage = () => {
 
   return (
     <div>
-      <div className="bg-[#F4F4F6] w-screen h-screen flex justify-center items-center">
+      <div className="bg-[#F4F4F6] w-screen dynamic-height flex justify-center items-center">
         <div className="rounded-md shadow-lg bg-white p-10 relative w-[90%] sm:w-[500px] animate-height">
           <div className="absolute -top-10 left-0 right-0 flex justify-center items-center">
             <div className="flex items-center justify-center rounded-full bg-white p-3 shadow-md">

src/components/MoverPopup/MoverPopup.tsx

@@ -174,7 +174,7 @@ const MoverPopup = () => {
 
   return (
     <div
-      className="w-screen h-screen bg-black bg-opacity-80 absolute top-0 left-0 right-0 bottom-0 z-50 flex justify-center items-center flex-col"
+      className="w-screen dynamic-height bg-black bg-opacity-80 absolute top-0 left-0 right-0 bottom-0 z-50 flex justify-center items-center flex-col"
       id="outer-wrapper"
       onClick={closeMoverModal}
     >

src/components/PhotoViewerPopup/PhotoViewerPopup.tsx

@@ -229,7 +229,7 @@ const PhotoViewerPopup: React.FC<PhotoViewerPopupProps> = memo((props) => {
   }, [file.metadata.isVideo, getVideo, cleanUpVideo]);
 
   return (
-    <div className="w-screen h-screen bg-black bg-opacity-80 absolute top-0 left-0 right-0 bottom-0 z-50 flex justify-center items-center flex-col">
+    <div className="w-screen dynamic-height bg-black bg-opacity-80 absolute top-0 left-0 right-0 bottom-0 z-50 flex justify-center items-center flex-col">
       {contextMenuState.selected && (
         <div onClick={clickStopPropagation}>
           <ContextMenu

src/components/ResetPasswordPage/ResetPasswordPage.tsx

@@ -36,7 +36,7 @@ const ResetPasswordPage = () => {
 
   return (
     <div>
-      <div className="bg-[#F4F4F6] w-screen h-screen flex justify-center items-center">
+      <div className="bg-[#F4F4F6] w-screen dynamic-height flex justify-center items-center">
         <div className="rounded-md shadow-lg bg-white p-10 relative w-[90%] sm:w-[500px] animate-height">
           <div className="absolute -top-10 left-0 right-0 flex justify-center items-center">
             <div className="flex items-center justify-center rounded-full bg-white p-3 shadow-md">

src/components/SettingsPage/SettingsChangePasswordPopup.tsx

@@ -78,7 +78,7 @@ const SettingsChangePasswordPopup: React.FC<
   return (
     <div
       id="outer-wrapper"
-      className="w-screen h-screen bg-black bg-opacity-80 absolute top-0 left-0 right-0 bottom-0 z-50 flex justify-center items-center flex-col"
+      className="w-screen dynamic-height bg-black bg-opacity-80 absolute top-0 left-0 right-0 bottom-0 z-50 flex justify-center items-center flex-col"
       onClick={outterWrapperClick}
     >
       <div className="w-[300px] sm:w-[440px] bg-white rounded-md animate">

src/components/SettingsPage/SettingsPage.tsx

@@ -72,7 +72,7 @@ const SettingsPage = () => {
         <div
           ref={wrapperRef}
           className={classNames(
-            "fixed sm:relative px-4 border-r border-gray-secondary w-72 h-screen animate-movement bg-white",
+            "fixed sm:relative px-4 border-r border-gray-secondary w-72 dynamic-height animate-movement bg-white",
             {
               "-ml-72 sm:ml-0": !showSidebarMobile,
               "ml-0": showSidebarMobile,
@@ -128,7 +128,7 @@ const SettingsPage = () => {
           </div>
         )}
         {!user && (
-          <div className="w-full h-screen flex justify-center items-center">
+          <div className="w-full dynamic-height flex justify-center items-center">
             <Spinner />
           </div>
         )}

src/components/SharePopup/SharePopup.tsx

@@ -164,7 +164,7 @@ const SharePopup = memo(() => {
 
   return (
     <div
-      className="w-screen h-screen bg-black bg-opacity-80 absolute top-0 left-0 right-0 bottom-0 z-50 flex justify-center items-center flex-col"
+      className="w-screen dynamic-height bg-black bg-opacity-80 absolute top-0 left-0 right-0 bottom-0 z-50 flex justify-center items-center flex-col"
       id="outer-wrapper"
       onClick={outterWrapperClick}
     >

src/components/VerifyEmailPage/VerifyEmailPage.tsx

@@ -27,7 +27,7 @@ const VerifyEmailPage = () => {
   }, []);
 
   return (
-    <div className="w-screen h-screen flex justify-center items-center flex-col">
+    <div className="w-screen dynamic-height flex justify-center items-center flex-col">
       <h1>Verifying email...</h1>
       <ToastContainer position="bottom-left" />
     </div>

src/styles/base/_base.scss

@@ -13,7 +13,7 @@ textarea {
 }
 
 body {
-  height: 100vh;
+  height: 100dvh;
   width: 100vw;
   overflow: hidden;
 }

src/styles/components/_Spinner.scss

@@ -38,7 +38,7 @@
 
 .homepage__spinner__wrapper {
   position: fixed;
-  height: 100vh;
+  height: 100dvh;
   width: 100vw;
   display: flex;
   justify-content: center;