Update mui dependencies

src/components/tracker/TrackerActiveCard.tsx

@@ -153,7 +153,13 @@ const TrackerActiveHeader = ({
     const { t } = useTranslation();
 
     return (
-        <Stack direction="row" alignItems="stretch" sx={{ paddingBottom: 2 }}>
+        <Stack
+            direction="row"
+            sx={{
+                alignItems: 'stretch',
+                paddingBottom: 2,
+            }}
+        >
             <TrackerActiveLink url={trackRecord.remoteUrl}>
                 <Avatar
                     alt={`${tracker.name}`}
@@ -170,7 +176,11 @@ const TrackerActiveHeader = ({
                     </TypographyMaxLines>
                 </Tooltip>
             </ListItemButton>
-            <Stack justifyContent="center">
+            <Stack
+                sx={{
+                    justifyContent: 'center',
+                }}
+            >
                 <PopupState variant="popover" popupId={`tracker-active-menu-popup-${tracker.id}`}>
                     {(popupState) => (
                         <>

src/components/tracker/TrackerMangaCard.tsx

@@ -29,7 +29,13 @@ import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
 import { TTrackerManga } from '@/lib/data/Trackers.ts';
 
 const TrackerMangaCardTitle = ({ title, selected }: { title: string; selected: boolean }) => (
-    <Stack direction="row" gap="5px" justifyContent="space-between">
+    <Stack
+        direction="row"
+        sx={{
+            gap: '5px',
+            justifyContent: 'space-between',
+        }}
+    >
         <Tooltip title={title}>
             <TypographyMaxLines variant="h5" component="h1">
                 {title}
@@ -125,7 +131,13 @@ export const TrackerMangaCard = ({
                             borderColor: selected ? 'primary.main' : 'transparent',
                         }}
                     >
-                        <Stack direction="row" gap={2} marginBottom={2}>
+                        <Stack
+                            direction="row"
+                            sx={{
+                                gap: 2,
+                                marginBottom: 2,
+                            }}
+                        >
                             <CardMedia
                                 sx={{
                                     aspectRatio: '225/350',

src/components/tracker/TrackerSearch.tsx

@@ -92,7 +92,13 @@ export const TrackerSearch = ({
     return (
         <>
             <DialogTitle sx={{ padding: DIALOG_PADDING }}>
-                <Stack direction="row" gap="10px" alignItems="center">
+                <Stack
+                    direction="row"
+                    sx={{
+                        gap: '10px',
+                        alignItems: 'center',
+                    }}
+                >
                     <IconButton onClick={closeSearchMode}>
                         {getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
                     </IconButton>
@@ -164,8 +170,8 @@ export const TrackerSearch = ({
                 {showTrackButton && (
                     <Stack
                         direction="row"
-                        justifyContent="center"
                         sx={{
+                            justifyContent: 'center',
                             position: 'absolute',
                             left: 0,
                             right: 0,

src/components/tracker/TrackerUntrackedCard.tsx

@@ -28,7 +28,12 @@ export const TrackerUntrackedCard = ({
     return (
         <Card sx={CARD_STYLING}>
             <CardContent sx={{ padding: '0' }}>
-                <Stack direction="row" gap={3}>
+                <Stack
+                    direction="row"
+                    sx={{
+                        gap: 3,
+                    }}
+                >
                     <Avatar
                         alt={`${tracker.name}`}
                         src={requestManager.getValidImgUrlFor(tracker.icon)}