Fix/manga screen prevent fab from overlaying last chapter in list (#298)

* Introduce "StyledFAb"

MUI "Fab" with the "default" styling applied

* Prevent FAB from overlaying last chapter in list of Manga details page

src/components/manga/ChapterList.tsx

@@ -21,6 +21,7 @@ import ChaptersToolbarMenu from 'components/manga/ChaptersToolbarMenu';
 import SelectionFAB from 'components/manga/SelectionFAB';
 import { BatchChaptersChange, IChapter, IDownloadChapter, IQueue, TranslationKey } from 'typings';
 import { useTranslation } from 'react-i18next';
+import { DEFAULT_FULL_FAB_HEIGHT } from 'components/util/StyledFab';
 
 const StyledVirtuoso = styled(Virtuoso)(({ theme }) => ({
     listStyle: 'none',
@@ -252,15 +253,29 @@ const ChapterList: React.FC<IProps> = ({ mangaId }) => {
                         // 900 is the md breakpoint in MUI
                         overflowY: window.innerWidth < 900 ? 'visible' : 'auto',
                     }}
-                    totalCount={visibleChapters.length}
-                    itemContent={(index: number) => (
-                        <ChapterCard
-                            {...chaptersWithMeta[index]}
-                            showChapterNumber={options.showChapterNumber}
-                            triggerChaptersUpdate={() => mutate()}
-                            onSelect={() => handleSelection(index)}
-                        />
-                    )}
+                    totalCount={visibleChapters.length + 1}
+                    itemContent={(index: number) => {
+                        // hacky way of adding padding to the bottom of the list, so the FAB doesn't overlay the last chapter
+                        // since I was unable to find another solution on how to achieve this
+                        if (index === visibleChapters.length) {
+                            return (
+                                <div
+                                    style={{
+                                        paddingBottom: DEFAULT_FULL_FAB_HEIGHT,
+                                    }}
+                                />
+                            );
+                        }
+
+                        return (
+                            <ChapterCard
+                                {...chaptersWithMeta[index]}
+                                showChapterNumber={options.showChapterNumber}
+                                triggerChaptersUpdate={() => mutate()}
+                                onSelect={() => handleSelection(index)}
+                            />
+                        );
+                    }}
                     useWindowScroll={window.innerWidth < 900}
                     overscan={window.innerHeight * 0.5}
                 />

src/components/manga/ResumeFAB.tsx

@@ -6,12 +6,12 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import { Fab } from '@mui/material';
 import { Link } from 'react-router-dom';
 import { PlayArrow } from '@mui/icons-material';
 import { BACK } from 'util/useBackTo';
 import { IChapter } from 'typings';
 import { useTranslation } from 'react-i18next';
+import StyledFab from 'components/util/StyledFab';
 
 interface ResumeFABProps {
     chapter: IChapter;
@@ -26,8 +26,7 @@ export default function ResumeFab(props: ResumeFABProps) {
         mangaId,
     } = props;
     return (
-        <Fab
-            sx={{ position: 'fixed', bottom: '2em', right: '3em' }}
+        <StyledFab
             component={Link}
             variant="extended"
             color="primary"
@@ -38,6 +37,6 @@ export default function ResumeFab(props: ResumeFABProps) {
         >
             <PlayArrow />
             {index === 1 ? t('global.button.start') : t('global.button.resume')}
-        </Fab>
+        </StyledFab>
     );
 }

src/components/manga/SelectionFAB.tsx

@@ -12,6 +12,7 @@ import React, { useRef, useState } from 'react';
 import type { IChapterWithMeta } from 'components/manga/ChapterList';
 import SelectionFABActionItem from 'components/manga/SelectionFABActionItem';
 import { useTranslation } from 'react-i18next';
+import { DEFAULT_FAB_STYLE } from 'components/util/StyledFab';
 
 export type SelectionAction = 'download' | 'delete' | 'bookmark' | 'unbookmark' | 'mark_as_read' | 'mark_as_unread';
 
@@ -38,9 +39,8 @@ const SelectionFAB: React.FC<SelectionFABProps> = (props) => {
     return (
         <Box
             sx={{
-                position: 'fixed',
-                bottom: '2em',
-                right: '3em',
+                ...DEFAULT_FAB_STYLE,
+                height: `calc(${DEFAULT_FAB_STYLE.height} + 1)`,
                 pt: 1,
             }}
             ref={anchorEl}