Prevent "EmptyViewAbsoluteCentered" from overlapping content

Regression 1f7fe5f20e

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<Theme>;
 }
 
-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%',
+                minWidth: '-webkit-fill-available',
-                minHeight: `calc(100% - ${topOffset}px)`,
+                maxWidth: '100%',
-                mt: `${topOffset}px`,
+                minHeight: '100%',
                 ...sx,
             }}
         >

src/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx

@@ -14,8 +14,7 @@ export function EmptyViewAbsoluteCentered({ sx, ...emptyViewProps }: EmptyViewPr
             {...emptyViewProps}
             sx={{
                 position: 'absolute',
-                top: 0,
+                minHeight: '-webkit-fill-available',
-                left: 0,
                 ...sx,
             }}
         />

src/modules/extension/screens/Extensions.tsx

@@ -207,7 +207,6 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
                         fetchExtensions().catch(defaultPromiseErrorHandler('Extensions::refetchExtensions'));
                     }
                 }}
-                topOffset={tabsMenuHeight}
             />
         );
     }

src/modules/manga/components/MangaGrid.tsx

@@ -238,7 +238,6 @@ export const MangaGrid: React.FC<IMangaGridProps> = ({
     isLoading,
     message,
     messageExtra,
-    topOffset,
     hasNextPage,
     loadMore,
     gridLayout,
@@ -349,7 +348,6 @@ export const MangaGrid: React.FC<IMangaGridProps> = ({
                 message={message ?? t('manga.error.label.no_mangas_found')}
                 messageExtra={messageExtra}
                 retry={retry}
-                topOffset={topOffset}
             />
         );
     }

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}
             />
         );
     }

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<SourceType, 'id'> = { id: '-1' };
 
@@ -250,16 +249,6 @@ export function SourceMangas() {
     const currentQuery = useRef(query);
     const currentAbortRequest = useRef<(reason: any) => void>(() => {});
 
-    const contentTypeMenuRef = useRef<HTMLDivElement>(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 (
         <StyledGridWrapper>
-            <ContentTypeMenu ref={contentTypeMenuRef} sx={{ top: `${appBarHeight}px` }}>
+            <ContentTypeMenu sx={{ top: `${appBarHeight}px` }}>
                 <ContentTypeButton
                     variant={contentType === SourceContentType.POPULAR ? 'contained' : 'outlined'}
                     startIcon={<FavoriteIcon />}
@@ -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}
                 />
             )}
 

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 <EmptyViewAbsoluteCentered message={t('source.error.label.no_sources_found')} />;
-            <EmptyViewAbsoluteCentered message={t('source.error.label.no_sources_found')} topOffset={tabsMenuHeight} />
-        );
     }
 
     return (

src/modules/tracker/components/TrackerSearch.tsx

@@ -147,7 +147,7 @@ export const TrackerSearch = ({
                     />
                 </Stack>
             </DialogTitle>
-            <DialogContent dividers sx={{ padding: DIALOG_PADDING, height: '100vh' }}>
+            <DialogContent dividers sx={{ padding: DIALOG_PADDING, height: '100vh', position: 'relative' }}>
                 {!trackerSearch.loading && !trackerSearch.error && !hasResults && (
                     <EmptyViewAbsoluteCentered message={t('manga.error.label.no_mangas_found')} />
                 )}