Fix/manga track binding card styling (#680)

* Fix missing box shadow of active tracker card

Due to missing side paddings the box shadow wasn't visible

* Extract tracker card styling

* Prevent breaking title when selecting manga

* Limit max lines of titles

src/components/MangaCard.tsx

@@ -24,6 +24,7 @@ import { MangaActionMenuItems, SingleModeProps } from '@/components/manga/MangaA
 import { Menu } from '@/components/menu/Menu.tsx';
 import { MigrateDialog } from '@/components/MigrateDialog.tsx';
 import { Mangas } from '@/lib/data/Mangas.ts';
+import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
 
 const BottomGradient = styled('div')({
     position: 'absolute',
@@ -41,15 +42,7 @@ const BottomGradientDoubledDown = styled('div')({
     background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)',
 });
 
-const MangaTitle = styled(Typography)({
-    lineHeight: '1.5rem',
-    maxHeight: '3rem',
-    display: '-webkit-box',
-    WebkitLineClamp: '2',
-    WebkitBoxOrient: 'vertical',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-});
+const MangaTitle = TypographyMaxLines;
 
 const GridMangaTitle = styled(MangaTitle)({
     fontSize: '1.05rem',

src/components/atoms/TypographyMaxLines.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import styled from '@emotion/styled';
+import { Typography, TypographyProps } from '@mui/material';
+
+export const TypographyMaxLines = styled(Typography, {
+    shouldForwardProp: (prop) => prop !== 'lines',
+})<{
+    lines?: number;
+}>(({ lines = 2 }) => ({
+    lineHeight: '1.5rem',
+    maxHeight: '3rem',
+    display: '-webkit-box',
+    WebkitLineClamp: `${lines}`,
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+})) as React.FC<TypographyProps & { lines?: number }>;

src/components/tracker/TrackManga.tsx

@@ -83,7 +83,14 @@ export const TrackManga = ({ manga }: { manga: Pick<TManga, 'id' | 'trackRecords
 
     if (!isSearchActive) {
         return (
-            <OptionalDialogContent sx={{ '.MuiPaper-root:last-child .MuiCardContent-root': { paddingBottom: '0' } }}>
+            <OptionalDialogContent
+                sx={{
+                    padding: 0,
+                    // MUI adds a bottom padding to the last child of type CardContent which can only be removed via actual css styling
+                    // do it here, so it is done in one place for all track related CardContent components
+                    '.MuiPaper-root .MuiCardContent-root': { paddingBottom: '0' },
+                }}
+            >
                 {trackerComponents}
             </OptionalDialogContent>
         );

src/components/tracker/TrackerActiveCard.tsx

@@ -23,6 +23,7 @@ import {
     ListItemButton,
     MenuItem,
     Stack,
+    Tooltip,
     Typography,
 } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
@@ -34,6 +35,8 @@ import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
 import { DateSetting } from '@/components/settings/DateSetting.tsx';
 import { makeToast } from '@/components/util/Toast.tsx';
 import { Menu } from '@/components/menu/Menu';
+import { CARD_STYLING } from '@/components/tracker/constants.ts';
+import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
 
 const TrackerActiveLink = ({ children, url }: { children: React.ReactNode; url: string }) => (
     <Link href={url} rel="noreferrer" target="_blank" underline="none" color="inherit">
@@ -150,7 +153,11 @@ const TrackerActiveHeader = ({
             </TrackerActiveLink>
 
             <ListItemButton sx={{ flexGrow: 1 }} onClick={openSearch}>
-                <Typography flexGrow={1}>{trackRecord.title}</Typography>
+                <Tooltip title={trackRecord.title}>
+                    <TypographyMaxLines flexGrow={1} lines={1}>
+                        {trackRecord.title}
+                    </TypographyMaxLines>
+                </Tooltip>
             </ListItemButton>
             <Stack justifyContent="center">
                 <PopupState variant="popover" popupId={`tracker-active-menu-popup-${tracker.id}`}>
@@ -207,12 +214,12 @@ export const TrackerActiveCard = ({
     };
 
     return (
-        <Card sx={{ backgroundColor: 'transparent', boxShadow: 'unset', backgroundImage: 'unset' }}>
-            <CardContent sx={{ padding: '0' }}>
+        <Card sx={CARD_STYLING}>
+            <CardContent sx={{ padding: 0 }}>
                 <TrackerActiveHeader trackRecord={{ tracker, ...trackRecord }} openSearch={onClick} />
                 <Card>
-                    <CardContent sx={{ padding: 0 }}>
-                        <Box sx={{ padding: 2 }}>
+                    <CardContent sx={{ padding: '0' }}>
+                        <Box sx={{ padding: 1 }}>
                             <TrackerActiveCardInfoRow>
                                 <ListPreference
                                     ListPreferenceTitle={t('manga.label.status')}

src/components/tracker/TrackerMangaCard.tsx

@@ -17,6 +17,7 @@ import {
     Collapse,
     Link,
     Stack,
+    Tooltip,
     Typography,
     useMediaQuery,
     useTheme,
@@ -26,13 +27,16 @@ import parseHtml from 'html-react-parser';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
 import { TrackerManga } from '@/lib/data/Trackers.ts';
+import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
 
 const TrackerMangaCardTitle = ({ title, selected }: { title: string; selected: boolean }) => (
     <Stack direction="row" gap="5px" justifyContent="space-between">
-        <Typography variant="h5" component="h1">
-            {title}
-        </Typography>
-        {selected && <CheckCircleIcon color="primary" />}
+        <Tooltip title={title}>
+            <TypographyMaxLines variant="h5" component="h1">
+                {title}
+            </TypographyMaxLines>
+        </Tooltip>
+        <CheckCircleIcon sx={{ visibility: selected ? 'visible' : 'hidden' }} color="primary" />
     </Stack>
 );
 

src/components/tracker/TrackerSearch.tsx

@@ -21,6 +21,7 @@ import { TBaseTracker } from '@/lib/data/Trackers.ts';
 import { SearchTextField } from '@/components/atoms/SearchTextField.tsx';
 import { makeToast } from '@/components/util/Toast.tsx';
 import { TrackerMangaCard } from '@/components/tracker/TrackerMangaCard.tsx';
+import { DIALOG_PADDING } from '@/components/tracker/constants.ts';
 
 export const TrackerSearch = ({
     mangaId,
@@ -82,7 +83,7 @@ export const TrackerSearch = ({
 
     return (
         <>
-            <DialogTitle sx={{ padding: '15px' }}>
+            <DialogTitle sx={{ padding: DIALOG_PADDING }}>
                 <Stack direction="row" gap="10px" alignItems="center">
                     <IconButton onClick={closeSearchMode}>
                         <ArrowBack />
@@ -101,7 +102,7 @@ export const TrackerSearch = ({
                     />
                 </Stack>
             </DialogTitle>
-            <DialogContent dividers sx={{ padding: '15px', height: '100vh' }}>
+            <DialogContent dividers sx={{ padding: DIALOG_PADDING, height: '100vh' }}>
                 {!trackerSearch.loading && !trackerSearch.error && !hasResults && (
                     <EmptyView message={t('manga.error.label.no_mangas_found')} />
                 )}
@@ -132,7 +133,7 @@ export const TrackerSearch = ({
                             left: 0,
                             right: 0,
                             bottom: 0,
-                            paddingBottom: '15px',
+                            paddingBottom: DIALOG_PADDING,
                         }}
                     >
                         <Button

src/components/tracker/TrackerUntrackedCard.tsx

@@ -14,12 +14,13 @@ import { useTranslation } from 'react-i18next';
 import { Stack } from '@mui/material';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { TBaseTracker } from '@/lib/data/Trackers.ts';
+import { CARD_STYLING } from '@/components/tracker/constants.ts';
 
 export const TrackerUntrackedCard = ({ tracker, onClick }: { tracker: TBaseTracker; onClick: () => void }) => {
     const { t } = useTranslation();
 
     return (
-        <Card sx={{ backgroundColor: 'transparent', boxShadow: 'unset', backgroundImage: 'unset' }}>
+        <Card sx={CARD_STYLING}>
             <CardContent sx={{ padding: '0' }}>
                 <Stack direction="row" gap="25px">
                     <Avatar

src/components/tracker/constants.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { SxProps } from '@mui/material';
+
+export const DIALOG_PADDING: number = 2;
+
+export const CARD_BACKGROUND: SxProps = {
+    backgroundColor: 'transparent',
+    boxShadow: 'unset',
+    backgroundImage: 'unset',
+};
+
+export const CARD_STYLING: SxProps = {
+    padding: DIALOG_PADDING,
+    ...CARD_BACKGROUND,
+};