From 70c3906982292dadb16e874c1811355d4e969881 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Sun, 17 May 2026 14:12:55 +0200
Subject: [PATCH] Update migration entry width styling

---
 .../migration-entry/MigrationDestinationEntry.tsx | 15 +++++++++++++--
 .../migration-entry/MigrationSourceEntry.tsx      |  8 +++++++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/features/migration/components/migration-entry/MigrationDestinationEntry.tsx b/src/features/migration/components/migration-entry/MigrationDestinationEntry.tsx
index d45741c6..8fabf34a 100644
--- a/src/features/migration/components/migration-entry/MigrationDestinationEntry.tsx
+++ b/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),
                         },
                     }}
                 >
diff --git a/src/features/migration/components/migration-entry/MigrationSourceEntry.tsx b/src/features/migration/components/migration-entry/MigrationSourceEntry.tsx
index 188c6bae..7a3fb6c8 100644
--- a/src/features/migration/components/migration-entry/MigrationSourceEntry.tsx
+++ b/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 })}