Handle long extra messages in EmptyView

src/modules/source/screens/SourceMangas.tsx

@@ -53,6 +53,7 @@ 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' };
 
@@ -249,6 +250,16 @@ 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;
@@ -428,9 +439,11 @@ export function SourceMangas() {
         };
     }, [t, source]);
 
+    const EmptyViewComponent = mangas.length ? EmptyView : EmptyViewAbsoluteCentered;
+
     return (
         <StyledGridWrapper>
-            <ContentTypeMenu sx={{ top: `${appBarHeight}px` }}>
+            <ContentTypeMenu ref={contentTypeMenuRef} sx={{ top: `${appBarHeight}px` }}>
                 <ContentTypeButton
                     variant={contentType === SourceContentType.POPULAR ? 'contained' : 'outlined'}
                     startIcon={<FavoriteIcon />}
@@ -466,6 +479,7 @@ export function SourceMangas() {
                     loadMore={loadMore}
                     message={message}
                     messageExtra={messageExtra}
+                    topOffset={contentTypeMenuHeight}
                     isLoading={isLoading}
                     gridLayout={sourceGridLayout}
                     mode="source"
@@ -473,18 +487,12 @@ export function SourceMangas() {
                 />
             )}
 
-            {error && !mangas.length && (
-                <EmptyViewAbsoluteCentered
+            {error && (
+                <EmptyViewComponent
                     message={t('global.error.label.failed_to_load_data')}
-                    messageExtra={error.message}
-                    retry={() => loadPage(lastPageNum).catch(defaultPromiseErrorHandler('SourceMangas::refetch'))}
-                />
-            )}
-            {error && !!mangas.length && (
-                <EmptyView
-                    message={t('global.error.label.failed_to_load_data')}
-                    messageExtra={error.message}
+                    messageExtra={getErrorMessage(error)}
                     retry={() => loadPage(lastPageNum).catch(defaultPromiseErrorHandler('SourceMangas::refetch'))}
+                    topOffset={contentTypeMenuHeight}
                 />
             )}
 

src/modules/source/screens/Sources.tsx

@@ -62,7 +62,7 @@ function groupByLang<Source extends Pick<SourceType, 'id' | 'name' | 'lang'>>(
     return result;
 }
 
-export function Sources() {
+export function Sources({ tabsMenuHeight }: { tabsMenuHeight: number }) {
     const { t } = useTranslation();
     const { setAction } = useContext(NavBarContext);
 
@@ -138,12 +138,15 @@ export function Sources() {
                 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 <EmptyViewAbsoluteCentered message={t('source.error.label.no_sources_found')} />;
+        return (
+            <EmptyViewAbsoluteCentered message={t('source.error.label.no_sources_found')} topOffset={tabsMenuHeight} />
+        );
     }
 
     return (