[website] Fix image layout shift (#38326)

mui · Aug 7, 2023 · 10e882c · 10e882c
1 parent 64651a5
commit 10e882c
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/docs/src/components/productBaseUI/BaseUITestimonial.tsx b/docs/src/components/productBaseUI/BaseUITestimonial.tsx
@@ -33,12 +33,16 @@ export default function BaseUITestimonial() {
             <Typography variant="h4" component="h2" mb={2.5} sx={{ color: '#fff' }}>
               Nhost&apos;s dashboard
             </Typography>
-            <img
-              src="/static/branding/base-ui/nhost.jpg"
-              srcSet="/static/branding/base-ui/nhost.jpg 1x, /static/branding/base-ui/nhost-2x.jpg 2x "
+            <Box
+              component="img"
+              srcSet="/static/branding/base-ui/nhost.jpg, /static/branding/base-ui/nhost-2x.jpg 2x "
               alt="Screenshot displaying part of the Nhost dashboard that used Base UI to be built."
               loading="lazy"
-              width="570px"
+              sx={{
+                backgroundColor: '#fff',
+                width: 510,
+                height: 210,
+              }}
             />
           </Box>
           <Typography variant="body2" sx={{ mt: 2 }}>