Mobile: adjust modals height to visual viewport (actualbudget#4427)

* Mobile: adapt autocomplete modals to visual viewport * Fix modal max-height, animate height changes * Update VRT * Update max-height to be 90% of visual viewport * Update VRT --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
jfdoming · Feb 22, 2025 · 1511587 · 1511587
1 parent ff7c358
commit 1511587
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 67 deletions.
diff --git a/packages/desktop-client/src/components/common/Modal.tsx b/packages/desktop-client/src/components/common/Modal.tsx
@@ -82,10 +82,6 @@ export const Modal = ({
         position: 'fixed',
         inset: 0,
         zIndex: 3000,
-        overflowY: 'auto',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
         fontSize: 14,
         willChange: 'transform',
         // on mobile, we disable the blurred background for performance reasons
@@ -100,69 +96,81 @@ export const Modal = ({
       }}
       {...props}
     >
-      <ReactAriaModal>
-        {modalProps => (
-          <Dialog
-            aria-label={t('Modal dialog')}
-            className={css(styles.lightScrollbar)}
-            style={{
-              outline: 'none', // remove focus outline
-            }}
-          >
-            <ModalContentContainer
-              noAnimation={noAnimation}
-              isActive={isActive(name)}
-              {...containerProps}
+      {/* A container for positioning the modal relative to the visual viewport */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: 'var(--visual-viewport-height)',
+          overflowY: 'auto',
+          transition: 'height .25s',
+        }}
+      >
+        <ReactAriaModal>
+          {modalProps => (
+            <Dialog
+              aria-label={t('Modal dialog')}
+              className={css(styles.lightScrollbar)}
               style={{
-                flex: 1,
-                padding: 10,
-                willChange: 'opacity, transform',
-                maxWidth: '90vw',
-                minWidth: '90vw',
-                maxHeight: '90vh',
-                minHeight: 0,
-                borderRadius: 6,
-                //border: '1px solid ' + theme.modalBorder,
-                color: theme.pageText,
-                backgroundColor: theme.modalBackground,
-                opacity: isHidden ? 0 : 1,
-                [`@media (min-width: ${tokens.breakpoint_small})`]: {
-                  minWidth: tokens.breakpoint_small,
-                },
-                overflowY: 'auto',
-                ...styles.shadowLarge,
-                ...containerProps?.style,
+                outline: 'none', // remove focus outline
               }}
             >
-              <View style={{ paddingTop: 0, flex: 1, flexShrink: 0 }}>
-                {typeof children === 'function'
-                  ? children(modalProps)
-                  : children}
-              </View>
-              {isLoading && (
-                <View
-                  style={{
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    backgroundColor: theme.pageBackground,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    zIndex: 1000,
-                  }}
-                >
-                  <AnimatedLoading
-                    style={{ width: 20, height: 20 }}
-                    color={theme.pageText}
-                  />
+              <ModalContentContainer
+                noAnimation={noAnimation}
+                isActive={isActive(name)}
+                {...containerProps}
+                style={{
+                  flex: 1,
+                  padding: 10,
+                  willChange: 'opacity, transform',
+                  maxWidth: '90vw',
+                  minWidth: '90vw',
+                  maxHeight: 'calc(var(--visual-viewport-height) * 0.9)',
+                  minHeight: 0,
+                  borderRadius: 6,
+                  //border: '1px solid ' + theme.modalBorder,
+                  color: theme.pageText,
+                  backgroundColor: theme.modalBackground,
+                  opacity: isHidden ? 0 : 1,
+                  [`@media (min-width: ${tokens.breakpoint_small})`]: {
+                    minWidth: tokens.breakpoint_small,
+                  },
+                  overflowY: 'auto',
+                  ...styles.shadowLarge,
+                  ...containerProps?.style,
+                }}
+              >
+                <View style={{ paddingTop: 0, flex: 1, flexShrink: 0 }}>
+                  {typeof children === 'function'
+                    ? children(modalProps)
+                    : children}
                 </View>
-              )}
-            </ModalContentContainer>
-          </Dialog>
-        )}
-      </ReactAriaModal>
+                {isLoading && (
+                  <View
+                    style={{
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      backgroundColor: theme.pageBackground,
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      zIndex: 1000,
+                    }}
+                  >
+                    <AnimatedLoading
+                      style={{ width: 20, height: 20 }}
+                      color={theme.pageText}
+                    />
+                  </View>
+                )}
+              </ModalContentContainer>
+            </Dialog>
+          )}
+        </ReactAriaModal>
+      </div>
     </ReactAriaModalOverlay>
   );
 };
@@ -311,6 +319,7 @@ export function ModalHeader({
         alignItems: 'center',
         position: 'relative',
         height: 60,
+        flex: 'none',
       }}
     >
       <View

diff --git a/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx
@@ -36,7 +36,9 @@ export function AccountAutocompleteModal({
       onClose={onClose}
       containerProps={{
         style: {
-          height: isNarrowWidth ? '85vh' : 275,
+          height: isNarrowWidth
+            ? 'calc(var(--visual-viewport-height) * 0.85)'
+            : 275,
           backgroundColor: theme.menuAutoCompleteBackground,
         },
       }}

diff --git a/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx
@@ -42,7 +42,9 @@ export function CategoryAutocompleteModal({
       onClose={onClose}
       containerProps={{
         style: {
-          height: isNarrowWidth ? '85vh' : 275,
+          height: isNarrowWidth
+            ? 'calc(var(--visual-viewport-height) * 0.85)'
+            : 275,
           backgroundColor: theme.menuAutoCompleteBackground,
         },
       }}

diff --git a/packages/desktop-client/src/components/modals/EditFieldModal.tsx b/packages/desktop-client/src/components/modals/EditFieldModal.tsx
@@ -244,7 +244,9 @@ export function EditFieldModal({
       onClose={onClose}
       containerProps={{
         style: {
-          height: isNarrowWidth ? '85vh' : 275,
+          height: isNarrowWidth
+            ? 'calc(var(--visual-viewport-height) * 0.85)'
+            : 275,
           padding: '15px 10px',
           ...(minWidth && { minWidth }),
           backgroundColor: theme.menuAutoCompleteBackground,

diff --git a/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx
@@ -42,7 +42,9 @@ export function PayeeAutocompleteModal({
       onClose={onClose}
       containerProps={{
         style: {
-          height: isNarrowWidth ? '85vh' : 275,
+          height: isNarrowWidth
+            ? 'calc(var(--visual-viewport-height) * 0.85)'
+            : 275,
           backgroundColor: theme.menuAutoCompleteBackground,
         },
       }}

diff --git a/upcoming-release-notes/4427.md b/upcoming-release-notes/4427.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [andrew--r]
+---
+
+Automatically adjust height of modals to fit the visible viewport when the keyboard is open on mobile