Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mobile: adjust modals height to visual viewport #4427

Merged
merged 5 commits into from
Feb 22, 2025
Merged

Mobile: adjust modals height to visual viewport #4427

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
851c47f
Mobile: adapt autocomplete modals to visual viewport
andrew--r Feb 21, 2025
27dcea9
Fix modal max-height, animate height changes
andrew--r Feb 21, 2025
86fbec6
Update VRT
github-actions[bot] Feb 21, 2025
b56ffa7
Update max-height to be 90% of visual viewport
andrew--r Feb 21, 2025
7c66f1b
Update VRT
github-actions[bot] Feb 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 71 additions & 63 deletions packages/desktop-client/src/components/common/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -100,69 +96,80 @@ 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',
}}
>
<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: '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,
}}
>
<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>
);
};
Expand Down Expand Up @@ -311,6 +318,7 @@ export function ModalHeader({
alignItems: 'center',
position: 'relative',
height: 60,
flex: 'none',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change is intentional: without it the ModalHeader shrinks, which looks bad on small viewports

}}
>
<View
Expand Down
4 changes: 3 additions & 1 deletion packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
}}
Expand Down
4 changes: 3 additions & 1 deletion packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
}}
Expand Down
4 changes: 3 additions & 1 deletion packages/desktop-client/src/components/modals/EditFieldModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 3 additions & 1 deletion packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
}}
Expand Down
6 changes: 6 additions & 0 deletions upcoming-release-notes/4427.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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