From 16b6aff5585f002c17dc30d26199cb93370fe5cb Mon Sep 17 00:00:00 2001
From: subnub <kyle.hoell@gmail.com>
Date: Fri, 27 Dec 2024 06:00:36 -0500
Subject: [PATCH] fixed layout issues with dynamic height

---
 src/components/DownloadPage/DownloadPage.tsx                | 4 ++--
 src/components/FileInfoPopup/FileInfoPopup.tsx              | 2 +-
 src/components/LoginPage/LoginPage.tsx                      | 4 ++--
 src/components/MoverPopup/MoverPopup.tsx                    | 2 +-
 src/components/PhotoViewerPopup/PhotoViewerPopup.tsx        | 2 +-
 src/components/ResetPasswordPage/ResetPasswordPage.tsx      | 2 +-
 src/components/SettingsPage/SettingsChangePasswordPopup.tsx | 2 +-
 src/components/SettingsPage/SettingsPage.tsx                | 4 ++--
 src/components/SharePopup/SharePopup.tsx                    | 2 +-
 src/components/VerifyEmailPage/VerifyEmailPage.tsx          | 2 +-
 src/styles/base/_base.scss                                  | 2 +-
 src/styles/components/_Spinner.scss                         | 2 +-
 12 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/DownloadPage/DownloadPage.tsx b/src/components/DownloadPage/DownloadPage.tsx
index cfcd856..5c633e2 100644
--- a/src/components/DownloadPage/DownloadPage.tsx
+++ b/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"
diff --git a/src/components/FileInfoPopup/FileInfoPopup.tsx b/src/components/FileInfoPopup/FileInfoPopup.tsx
index 916728e..3118b32 100644
--- a/src/components/FileInfoPopup/FileInfoPopup.tsx
+++ b/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}
     >
diff --git a/src/components/LoginPage/LoginPage.tsx b/src/components/LoginPage/LoginPage.tsx
index 07f46c8..590a2d3 100755
--- a/src/components/LoginPage/LoginPage.tsx
+++ b/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">
diff --git a/src/components/MoverPopup/MoverPopup.tsx b/src/components/MoverPopup/MoverPopup.tsx
index 21ee6c1..ff06f04 100644
--- a/src/components/MoverPopup/MoverPopup.tsx
+++ b/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}
     >
diff --git a/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx b/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx
index 8a0ffb2..cb6d8ef 100644
--- a/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx
+++ b/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
diff --git a/src/components/ResetPasswordPage/ResetPasswordPage.tsx b/src/components/ResetPasswordPage/ResetPasswordPage.tsx
index 0144681..c119055 100644
--- a/src/components/ResetPasswordPage/ResetPasswordPage.tsx
+++ b/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">
diff --git a/src/components/SettingsPage/SettingsChangePasswordPopup.tsx b/src/components/SettingsPage/SettingsChangePasswordPopup.tsx
index 5861f0d..b829186 100644
--- a/src/components/SettingsPage/SettingsChangePasswordPopup.tsx
+++ b/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">
diff --git a/src/components/SettingsPage/SettingsPage.tsx b/src/components/SettingsPage/SettingsPage.tsx
index 75ccfa1..3b27fd0 100644
--- a/src/components/SettingsPage/SettingsPage.tsx
+++ b/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>
         )}
diff --git a/src/components/SharePopup/SharePopup.tsx b/src/components/SharePopup/SharePopup.tsx
index b1bee57..20e6335 100644
--- a/src/components/SharePopup/SharePopup.tsx
+++ b/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}
     >
diff --git a/src/components/VerifyEmailPage/VerifyEmailPage.tsx b/src/components/VerifyEmailPage/VerifyEmailPage.tsx
index fdf258a..5913079 100644
--- a/src/components/VerifyEmailPage/VerifyEmailPage.tsx
+++ b/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>
diff --git a/src/styles/base/_base.scss b/src/styles/base/_base.scss
index b6de51f..6727ff7 100644
--- a/src/styles/base/_base.scss
+++ b/src/styles/base/_base.scss
@@ -13,7 +13,7 @@ textarea {
 }
 
 body {
-  height: 100vh;
+  height: 100dvh;
   width: 100vw;
   overflow: hidden;
 }
diff --git a/src/styles/components/_Spinner.scss b/src/styles/components/_Spinner.scss
index 77a20f3..bcbf5c9 100644
--- a/src/styles/components/_Spinner.scss
+++ b/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;