Remove height transition animation from modals when adjusting to viewport height for smoother experience (#4620)

* Use dvh to determine height of modal based on dynamic visual viewport

* Apply to dialog instead of another div

* Remove modal transition

* Release notes

packages/desktop-client/src/components/common/Modal.tsx

@@ -96,14 +96,13 @@ export const Modal = ({
       {...props}
     >
       {/* A container for positioning the modal relative to the visual viewport */}
-      <div
+      <View
         style={{
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
           height: 'var(--visual-viewport-height)',
           overflowY: 'auto',
-          transition: 'height .25s',
         }}
       >
         <ReactAriaModal>
@@ -169,7 +168,7 @@ export const Modal = ({
             </Dialog>
           )}
         </ReactAriaModal>
-      </div>
+      </View>
     </ReactAriaModalOverlay>
   );
 };

upcoming-release-notes/4620.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [joel-jeremy]
+---
+
+Remove height transition animation from modals when adjusting to viewport height for smoother experience.