From bbe8a5677958b758b68801af3d0f311ab45cbdf1 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Thu, 23 May 2024 13:54:11 +0200
Subject: [PATCH] Cleanup rendering of bookmark icon of ChapterCards

Gets rid of "position" and "top" usage
---
 src/components/chapter/ChapterCard.tsx | 32 ++++++++++++--------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/components/chapter/ChapterCard.tsx b/src/components/chapter/ChapterCard.tsx
index ef440fd5..56ce558c 100644
--- a/src/components/chapter/ChapterCard.tsx
+++ b/src/components/chapter/ChapterCard.tsx
@@ -83,12 +83,7 @@ export const ChapterCard: React.FC<IProps> = (props: IProps) => {
             <PopupState variant="popover" popupId="chapter-card-action-menu">
                 {(popupState) => (
                     <Stack sx={{ pt: 1, px: 1 }}>
-                        <Card
-                            sx={{
-                                position: 'relative',
-                                touchCallout: 'none',
-                            }}
-                        >
+                        <Card sx={{ touchCallout: 'none' }}>
                             <CardActionArea
                                 component={Link}
                                 to={`/manga/${chapter.manga.id}/chapter/${chapter.sourceOrder}`}
@@ -108,17 +103,20 @@ export const ChapterCard: React.FC<IProps> = (props: IProps) => {
                                     }}
                                 >
                                     <Stack direction="column" flex={1}>
-                                        <TypographyMaxLines variant="h5" component="h2">
-                                            {chapter.isBookmarked && (
-                                                <BookmarkIcon
-                                                    color="primary"
-                                                    sx={{ mr: 0.5, position: 'relative', top: '0.15em' }}
-                                                />
-                                            )}
-                                            {showChapterNumber
-                                                ? `${t('chapter.title')} ${chapter.chapterNumber}`
-                                                : chapter.name}
-                                        </TypographyMaxLines>
+                                        <Stack
+                                            sx={{
+                                                flexDirection: 'row',
+                                                gap: 0.5,
+                                                alignItems: 'center',
+                                            }}
+                                        >
+                                            {chapter.isBookmarked && <BookmarkIcon color="primary" />}
+                                            <TypographyMaxLines variant="h5" component="h2">
+                                                {showChapterNumber
+                                                    ? `${t('chapter.title')} ${chapter.chapterNumber}`
+                                                    : chapter.name}
+                                            </TypographyMaxLines>
+                                        </Stack>
                                         <Typography variant="caption">{chapter.scanlator}</Typography>
                                         <Typography variant="caption">
                                             {getDateString(Number(chapter.uploadDate ?? 0), true)}