Merge pull request #13641 from sblausten/mc-drop-overflow

Fix overflow issue for mic drop 404 image

.changeset/three-dryers-confess.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Fix overflow bug on MicDrop image for 404 page by moving the image and making it relative rather than absolute

packages/core-components/src/layout/ErrorPage/ErrorPage.tsx

@@ -70,7 +70,6 @@ export function ErrorPage(props: IErrorPageProps) {
 
   return (
     <Grid container spacing={0} className={classes.container}>
-      <MicDrop />
       <Grid item xs={12} sm={8} md={4}>
         <Typography
           data-testid="error"
@@ -94,6 +93,7 @@ export function ErrorPage(props: IErrorPageProps) {
           think this is a bug.
         </Typography>
       </Grid>
+      <MicDrop />
     </Grid>
   );
 }

packages/core-components/src/layout/ErrorPage/MicDrop.tsx

@@ -22,12 +22,10 @@ const useStyles = makeStyles(
   theme => ({
     micDrop: {
       maxWidth: '60%',
-      position: 'absolute',
       bottom: theme.spacing(2),
       right: theme.spacing(2),
       [theme.breakpoints.down('xs')]: {
         maxWidth: '96%',
-        position: 'relative',
         bottom: 'unset',
         right: 'unset',
         margin: `${theme.spacing(10)}px auto ${theme.spacing(4)}px`,