diff --git a/packages/toolpad-components/src/components/ErrorOverlay.tsx b/packages/toolpad-components/src/components/ErrorOverlay.tsx
index fa67d6f9b45..14d98f7489c 100644
--- a/packages/toolpad-components/src/components/ErrorOverlay.tsx
+++ b/packages/toolpad-components/src/components/ErrorOverlay.tsx
@@ -1,4 +1,4 @@
-import { SxProps, Typography, styled } from '@mui/material';
+import { SxProps, Typography, styled, Tooltip } from '@mui/material';
 import * as React from 'react';
 import { errorFrom } from '@mui/toolpad-utils/errors';
 import ErrorIcon from '@mui/icons-material/Error';
@@ -9,6 +9,9 @@ const OverlayRoot = styled('div')(({ theme }) => ({
   alignItems: 'center',
   justifyContent: 'center',
   padding: theme.spacing(2),
+  maxWidth: '100%',
+  maxHeight: '100%',
+  overflow: 'hidden',
 }));
 
 interface ErrorContentProps {
@@ -24,7 +27,11 @@ export function ErrorContent({ sx, error }: ErrorContentProps) {
         <ErrorIcon fontSize="small" color="error" />
         Error
       </Typography>
-      <Typography variant="body2">{errMessage}</Typography>
+      <Tooltip title={errMessage}>
+        <Typography variant="body2" align="center">
+          {errMessage}
+        </Typography>
+      </Tooltip>
     </OverlayRoot>
   );
 }
diff --git a/test/visual/components/fixture/toolpad/pages/components/page.yml b/test/visual/components/fixture/toolpad/pages/components/page.yml
index c0d087af411..633408a27e8 100644
--- a/test/visual/components/fixture/toolpad/pages/components/page.yml
+++ b/test/visual/components/fixture/toolpad/pages/components/page.yml
@@ -117,5 +117,12 @@ spec:
       props:
         mode: switch
         label: Switch
+    - component: Image
+      name: image1
+      props:
+        width: 100
+        height: 100
+        src:
+          $$jsExpression: veryLongIdentifierThatResultsInLongErrorMessage.nonExisting
   alias:
     - f703ps3