From a4f1aa323441438e118c52780c8bbc0913c09ce0 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Sat, 21 Dec 2024 23:21:55 +0100 Subject: [PATCH] Prevent "EmptyViewAbsoluteCentered" from overlapping content Regression 1f7fe5f20e7faaacd780796e123d950aa8bff896 --- .../core/components/placeholder/EmptyView.tsx | 9 ++++----- .../placeholder/EmptyViewAbsoluteCentered.tsx | 3 +-- src/modules/extension/screens/Extensions.tsx | 1 - src/modules/manga/components/MangaGrid.tsx | 2 -- src/modules/migration/screens/Migration.tsx | 1 - src/modules/source/screens/SourceMangas.tsx | 15 +-------------- src/modules/source/screens/Sources.tsx | 5 +---- src/modules/tracker/components/TrackerSearch.tsx | 2 +- 8 files changed, 8 insertions(+), 30 deletions(-) diff --git a/src/modules/core/components/placeholder/EmptyView.tsx b/src/modules/core/components/placeholder/EmptyView.tsx index ae339114..0dbbdcce 100644 --- a/src/modules/core/components/placeholder/EmptyView.tsx +++ b/src/modules/core/components/placeholder/EmptyView.tsx @@ -27,11 +27,10 @@ export interface EmptyViewProps { messageExtra?: JSX.Element | string; retry?: () => void; noFaces?: boolean; - topOffset?: number; sx?: SxProps; } -export function EmptyView({ message, messageExtra, retry, noFaces, topOffset = 0, sx }: EmptyViewProps) { +export function EmptyView({ message, messageExtra, retry, noFaces, sx }: EmptyViewProps) { const { t } = useTranslation(); const errorFace = useMemo(() => getRandomErrorFace(), []); @@ -42,9 +41,9 @@ export function EmptyView({ message, messageExtra, retry, noFaces, topOffset = 0 textAlign: 'center', alignItems: 'center', justifyContent: 'center', - minWidth: '100%', - minHeight: `calc(100% - ${topOffset}px)`, - mt: `${topOffset}px`, + minWidth: '-webkit-fill-available', + maxWidth: '100%', + minHeight: '100%', ...sx, }} > diff --git a/src/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx b/src/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx index 19c6e003..3c381be7 100644 --- a/src/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx +++ b/src/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx @@ -14,8 +14,7 @@ export function EmptyViewAbsoluteCentered({ sx, ...emptyViewProps }: EmptyViewPr {...emptyViewProps} sx={{ position: 'absolute', - top: 0, - left: 0, + minHeight: '-webkit-fill-available', ...sx, }} /> diff --git a/src/modules/extension/screens/Extensions.tsx b/src/modules/extension/screens/Extensions.tsx index cf7d48fe..88103edc 100644 --- a/src/modules/extension/screens/Extensions.tsx +++ b/src/modules/extension/screens/Extensions.tsx @@ -207,7 +207,6 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) { fetchExtensions().catch(defaultPromiseErrorHandler('Extensions::refetchExtensions')); } }} - topOffset={tabsMenuHeight} /> ); } diff --git a/src/modules/manga/components/MangaGrid.tsx b/src/modules/manga/components/MangaGrid.tsx index aa7e177e..f5a3e81f 100644 --- a/src/modules/manga/components/MangaGrid.tsx +++ b/src/modules/manga/components/MangaGrid.tsx @@ -238,7 +238,6 @@ export const MangaGrid: React.FC = ({ isLoading, message, messageExtra, - topOffset, hasNextPage, loadMore, gridLayout, @@ -349,7 +348,6 @@ export const MangaGrid: React.FC = ({ message={message ?? t('manga.error.label.no_mangas_found')} messageExtra={messageExtra} retry={retry} - topOffset={topOffset} /> ); } diff --git a/src/modules/migration/screens/Migration.tsx b/src/modules/migration/screens/Migration.tsx index 2fd61b22..61491692 100644 --- a/src/modules/migration/screens/Migration.tsx +++ b/src/modules/migration/screens/Migration.tsx @@ -104,7 +104,6 @@ export const Migration = ({ tabsMenuHeight }: { tabsMenuHeight: number }) => { message={t('global.error.label.failed_to_load_data')} messageExtra={error.message} retry={() => refetch().catch(defaultPromiseErrorHandler('Migration::refetch'))} - topOffset={tabsMenuHeight} /> ); } diff --git a/src/modules/source/screens/SourceMangas.tsx b/src/modules/source/screens/SourceMangas.tsx index b9f4b783..08b4ae03 100644 --- a/src/modules/source/screens/SourceMangas.tsx +++ b/src/modules/source/screens/SourceMangas.tsx @@ -53,7 +53,6 @@ import { MangaIdInfo } from '@/modules/manga/Manga.types.ts'; import { GridLayout } from '@/modules/core/Core.types.ts'; import { AppRoutes } from '@/modules/core/AppRoute.constants.ts'; import { getErrorMessage } from '@/lib/HelperFunctions.ts'; -import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx'; const DEFAULT_SOURCE: Pick = { id: '-1' }; @@ -250,16 +249,6 @@ export function SourceMangas() { const currentQuery = useRef(query); const currentAbortRequest = useRef<(reason: any) => void>(() => {}); - const contentTypeMenuRef = useRef(null); - const [contentTypeMenuHeight, setContentTypeMenuHeight] = useState(0); - useResizeObserver( - contentTypeMenuRef, - useCallback( - () => setContentTypeMenuHeight(contentTypeMenuRef.current?.clientHeight ?? 0), - [contentTypeMenuRef], - ), - ); - const didSearchChange = currentQuery.current !== query; if (didSearchChange && contentType === SourceContentType.SEARCH) { currentQuery.current = query; @@ -443,7 +432,7 @@ export function SourceMangas() { return ( - + } @@ -479,7 +468,6 @@ export function SourceMangas() { loadMore={loadMore} message={message} messageExtra={messageExtra} - topOffset={contentTypeMenuHeight} isLoading={isLoading} gridLayout={sourceGridLayout} mode="source" @@ -492,7 +480,6 @@ export function SourceMangas() { message={t('global.error.label.failed_to_load_data')} messageExtra={getErrorMessage(error)} retry={() => loadPage(lastPageNum).catch(defaultPromiseErrorHandler('SourceMangas::refetch'))} - topOffset={contentTypeMenuHeight} /> )} diff --git a/src/modules/source/screens/Sources.tsx b/src/modules/source/screens/Sources.tsx index e0491e6d..79fd0483 100644 --- a/src/modules/source/screens/Sources.tsx +++ b/src/modules/source/screens/Sources.tsx @@ -138,15 +138,12 @@ export function Sources({ tabsMenuHeight }: { tabsMenuHeight: number }) { message={t('global.error.label.failed_to_load_data')} messageExtra={error.message} retry={() => refetch().catch(defaultPromiseErrorHandler('Sources::refetch'))} - topOffset={tabsMenuHeight} /> ); } if (sources?.length === 0) { - return ( - - ); + return ; } return ( diff --git a/src/modules/tracker/components/TrackerSearch.tsx b/src/modules/tracker/components/TrackerSearch.tsx index b03498a5..733da280 100644 --- a/src/modules/tracker/components/TrackerSearch.tsx +++ b/src/modules/tracker/components/TrackerSearch.tsx @@ -147,7 +147,7 @@ export const TrackerSearch = ({ /> - + {!trackerSearch.loading && !trackerSearch.error && !hasResults && ( )}