diff --git a/core/screens/search/typesense/Search.tsx b/core/screens/search/typesense/Search.tsx index 2320528e4d1cbc75405e63a1398d8d12a24e5733..764d77ed927c064021ffee92a7bb0b04bb23ace1 100644 --- a/core/screens/search/typesense/Search.tsx +++ b/core/screens/search/typesense/Search.tsx @@ -17,7 +17,7 @@ import { createStyleSheet } from 'holi-bricks/utils' import React, { useMemo } from 'react' import { useTranslation } from 'react-i18next' import { InstantSearch } from 'react-instantsearch-core' -import { View } from 'react-native' +import { Dimensions, Platform, View } from 'react-native' import TypesenseInstantSearchAdapter from 'typesense-instantsearch-adapter' import ErrorBoundary from '@holi/core/errors/components/ErrorBoundary' @@ -67,6 +67,7 @@ export const Search = () => { preset="fixed" contentContainerPadding={{}} contentContainerStyle={{ flex: 1 }} // this is needed because flash list has no initial size, it calculates it while rendering. + style={styles.screen} headerOptions={{ title: t('search.title'), headerTitleAlign: 'center', @@ -91,6 +92,7 @@ export const Search = () => { ) } +const TOP_COMPONENT_HEIGHT = 144 const stylesheet = createStyleSheet((theme) => ({ filterContainer: { paddingTop: dimensions.spacingS, @@ -98,4 +100,11 @@ const stylesheet = createStyleSheet((theme) => ({ flex: 1, backgroundColor: theme.colors.bg.page, }, + screen: { + ...Platform.select({ + web: { + maxHeight: Dimensions.get('window').height - dimensions.topBarHeight - TOP_COMPONENT_HEIGHT, + }, + }), + }, }))