fix modal scrolling performance on mobile (#3343)

This is primarily done by removing the blur effect from the overlay, and
replacing it will a translucent black.

The blur effect performs poorly on mobile devices.

packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx

@@ -88,7 +88,8 @@ function CategoryList({
     <View>
       <View
         style={{
-          overflow: 'auto',
+          overflowY: 'auto',
+          willChange: 'transform',
           padding: '5px 0',
           ...(!embedded && { maxHeight: 175 }),
         }}

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

@@ -22,6 +22,7 @@ import { useModalState } from '../../hooks/useModalState';
 import { AnimatedLoading } from '../../icons/AnimatedLoading';
 import { SvgLogo } from '../../icons/logo';
 import { SvgDelete } from '../../icons/v0';
+import { useResponsive } from '../../ResponsiveProvider';
 import { styles, theme } from '../../style';
 import { tokens } from '../../tokens';
 
@@ -52,6 +53,7 @@ export const Modal = ({
   containerProps,
   ...props
 }: ModalProps) => {
+  const { isNarrowWidth } = useResponsive();
   const { enableScope, disableScope } = useHotkeysContext();
 
   // This deactivates any key handlers in the "app" scope
@@ -82,7 +84,15 @@ export const Modal = ({
         alignItems: 'center',
         justifyContent: 'center',
         fontSize: 14,
-        backdropFilter: 'blur(1px) brightness(0.9)',
+        willChange: 'transform',
+        // on mobile, we disable the blurred background for performance reasons
+        ...(isNarrowWidth
+          ? {
+              backgroundColor: 'rgba(0, 0, 0, 0.4)',
+            }
+          : {
+              backdropFilter: 'blur(1px) brightness(0.9)',
+            }),
         ...style,
       }}
       {...props}

upcoming-release-notes/3343.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [tim-smart]
+---
+
+Fix slow scrolling in mobile modals