diff --git a/src/components/WatchFolder/mappingEntry/entryHeading.tsx b/src/components/WatchFolder/mappingEntry/entryHeading.tsx
index 5fc7a28b8..e25bc2442 100644
--- a/src/components/WatchFolder/mappingEntry/entryHeading.tsx
+++ b/src/components/WatchFolder/mappingEntry/entryHeading.tsx
@@ -3,22 +3,22 @@ import { Typography } from '@mui/material';
 import watchService from 'services/watchFolderService';
 import { AppContext } from 'pages/_app';
 import { SyncProgressIcon } from './syncProgressIcon';
+import { FlexWrapper } from 'components/Container';
 
 export function EntryHeading({ mapping }) {
     const appContext = useContext(AppContext);
     return (
-        <Typography
-            sx={{
-                fontSize: '16px',
-                lineHeight: '20px',
-                marginBottom: '4px',
-            }}>
-            <>
+        <FlexWrapper sx={{ marginBottom: '4px' }}>
+            <Typography
+                sx={{
+                    fontSize: '16px',
+                    lineHeight: '20px',
+                }}>
                 {mapping.collectionName}
-                {appContext.isFolderSyncRunning &&
-                    watchService.currentEvent?.collectionName ===
-                        mapping.collectionName && <SyncProgressIcon />}
-            </>
-        </Typography>
+            </Typography>
+            {appContext.isFolderSyncRunning &&
+                watchService.currentEvent?.collectionName ===
+                    mapping.collectionName && <SyncProgressIcon />}
+        </FlexWrapper>
     );
 }