[@mantine/core] Image: Fix incorrect size applied to elements with ca…

…ption (#2716)
mantinedev · Oct 18, 2022 · f7da145 · f7da145
1 parent 8cf0703
commit f7da145
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/src/mantine-core/src/Image/Image.story.tsx b/src/mantine-core/src/Image/Image.story.tsx
@@ -34,11 +34,16 @@ storiesOf('Image', module)
     </>
   ))
   .add('src changes over time', () => <ImageChangesOverTime />)
-  .add('Placeholder with custom size', () => (
+  .add('Placeholder with custom size and container is larger than image size', () => (
     <Container size={60}>
       <Image radius="sm" src={null} withPlaceholder width={50} height={50} />
     </Container>
   ))
+  .add('Placeholder with custom size and container is smaller than image size', () => (
+    <Container size={40}>
+      <Image radius="sm" src={null} withPlaceholder width={50} height={50} />
+    </Container>
+  ))
   .add('Responsive Image with AspectRatio', () => (
     <MantineProvider withGlobalStyles withNormalizeCSS>
       <div style={{ width: 400, padding: 20, backgroundColor: '#fdf' }}>

diff --git a/src/mantine-core/src/Image/Image.tsx b/src/mantine-core/src/Image/Image.tsx
@@ -88,12 +88,7 @@ export const Image = forwardRef<HTMLDivElement, ImageProps>((props: ImageProps,
   }, [src]);
 
   return (
-    <Box
-      className={cx(classes.root, className)}
-      ref={ref}
-      style={{ width, height, ...style }}
-      {...others}
-    >
+    <Box className={cx(classes.root, className)} ref={ref} style={{ width, ...style }} {...others}>
       <figure className={classes.figure}>
         <div className={classes.imageWrapper}>
           <img