apply padding based on offset top

Expensify · Feb 11, 2025 · 0d3bcf7 · 0d3bcf7
1 parent 8215041
commit 0d3bcf7
Showing 1 changed file with 5 additions and 7 deletions.
diff --git a/src/components/Search/SearchRouter/SearchRouterModal.tsx b/src/components/Search/SearchRouter/SearchRouterModal.tsx
@@ -2,7 +2,8 @@ import React, {useState} from 'react';
 import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
 import Modal from '@components/Modal';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import {isMobile, isMobileChrome, isMobileSafari} from '@libs/Browser';
+import useViewportOffsetTop from '@hooks/useViewportOffsetTop';
+import {isMobileChrome, isMobileSafari} from '@libs/Browser';
 import CONST from '@src/CONST';
 import SearchRouter from './SearchRouter';
 import {useSearchRouterContext} from './SearchRouterContext';
@@ -12,6 +13,7 @@ const isMobileWebSafari = isMobileSafari();
 function SearchRouterModal() {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext();
+    const viewportOffsetTop = useViewportOffsetTop();
 
     // On mWeb Safari, the input caret stuck for a moment while the modal is animating. So, we hide the caret until the animation is done.
     const [shouldHideInputCaret, setShouldHideInputCaret] = useState(isMobileWebSafari);
@@ -22,18 +24,14 @@ function SearchRouterModal() {
         <Modal
             type={modalType}
             isVisible={isSearchRouterDisplayed}
+            innerContainerStyle={{paddingTop: viewportOffsetTop}}
             popoverAnchorPosition={{right: 6, top: 6}}
             fullscreen
             propagateSwipe
             shouldHandleNavigationBack={isMobileChrome()}
             onClose={closeSearchRouter}
             onModalHide={() => setShouldHideInputCaret(isMobileWebSafari)}
-            onModalShow={() => {
-                if (isMobile()) {
-                    window.scroll({top: 0});
-                }
-                setShouldHideInputCaret(false);
-            }}
+            onModalShow={() => setShouldHideInputCaret(false)}
         >
             {isSearchRouterDisplayed && (
                 <FocusTrapForModal active={isSearchRouterDisplayed}>