Update migration entry width styling

src/features/migration/components/migration-entry/MigrationDestinationEntry.tsx

@@ -11,7 +11,6 @@ import type { MigrationMatch, TMigrationEntry } from '@/features/migration/Migra
 import { MigrationEntryStatus, MigrationPhase } from '@/features/migration/Migration.types.ts';
 import { MediaQuery } from '@/base/utils/MediaQuery.tsx';
 import { MigrationEntryCard } from '@/features/migration/components/migration-entry/MigrationEntryCard.tsx';
-import { applyStyles } from '@/base/utils/ApplyStyles.ts';
 import { MigrationEntryCardContent } from '@/features/migration/components/migration-entry/MigrationEntryCardContent.tsx';
 import { ENTRY_STATUS_TRANSLATION } from '@/features/migration/Migration.constants.ts';
 import { ReactRouter } from '@/lib/react-router/ReactRouter.ts';
@@ -36,6 +35,8 @@ import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ReplayIcon from '@mui/icons-material/Replay';
 import Link from '@mui/material/Link';
 import { Link as RouterLink } from 'react-router-dom';
+import { useTheme } from '@mui/material/styles';
+import { applyStyles } from '@/base/utils/ApplyStyles.ts';
 
 const EntryStatus = ({
     sourceMangaId,
@@ -218,6 +219,7 @@ export const MigrationDestinationEntry = ({
     setIsExpanded: (expanded: boolean) => void;
     isMigrating: boolean;
 }) => {
+    const theme = useTheme();
     const isTabletWidth = MediaQuery.useIsTabletWidth();
 
     return (
@@ -229,6 +231,15 @@ export const MigrationDestinationEntry = ({
                 ...applyStyles(!isTabletWidth, {
                     width: '400px',
                     height: '100%',
+                    [theme.breakpoints.up('lg')]: {
+                        width: '500px',
+                    },
+                    [theme.breakpoints.up(1800)]: {
+                        width: '800px',
+                    },
+                    [theme.breakpoints.up(2200)]: {
+                        width: '1000px',
+                    },
                 }),
             }}
         >
@@ -267,7 +278,7 @@ export const MigrationDestinationEntry = ({
                         p: 0,
                         backgroundColor: 'primary.dark',
                         '&:hover': {
-                            backgroundColor: (theme) => theme.alpha(theme.palette.primary.dark, 0.8),
+                            backgroundColor: theme.alpha(theme.palette.primary.dark, 0.8),
                         },
                     }}
                 >

src/features/migration/components/migration-entry/MigrationSourceEntry.tsx

@@ -62,7 +62,13 @@ export const MigrationSourceEntry = memo((entry: TMigrationEntry) => {
     }
 
     return (
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, width: '400px' }}>
+        <Box
+            sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 2,
+            }}
+        >
             <Link component={RouterLink} to={AppRoutes.manga.path(mangaId)}>
                 <ListCardAvatar
                     iconUrl={Mangas.getThumbnailUrl({ ...entry, thumbnailUrl: mangaThumbnailUrl })}