🐛 fix(Hero): fix deformed scroll button shape

src/components/molecules/Hero/Hero.tsx

@@ -44,22 +44,8 @@ const Hero = (props: { scrollTarget?: React.ForwardedRef<HTMLSelectElement> }) =
           },
         })}>
         <Box>
-          {/*
-              <h2>Michele Tartari</h2>
-							<h3>Robotics Engineer</h3>
-             */}
-          <Typography
-            // sx={{ fontSize: '2.5em',margin: 0 }}
-            variant="h3">
-            Robotics Engineer
-          </Typography>
-          <Typography
-            color="text.secondary"
-            sx={{
-              // margin: { xs: '0.5em 1em', md: '0.5em 0 0 0' },
-              margin: '0.5em 0 0 0',
-              top: 0,
-            }}>
+          <Typography variant="h3">Robotics Engineer</Typography>
+          <Typography color="text.secondary" sx={{ margin: '0.5em 0 0 0', top: 0 }}>
             See some of my works below. Send a message to get in touch.
           </Typography>
           <Stack direction="row" gap={2} mt={2} justifyContent={{ xs: 'center', sm: 'end' }}>
@@ -83,8 +69,8 @@ const Hero = (props: { scrollTarget?: React.ForwardedRef<HTMLSelectElement> }) =
       {props.scrollTarget && (
         <IconButton
           size="large"
-          onClick={() => (props.scrollTarget as React.RefObject<HTMLSelectElement | null>).current?.scrollIntoView()}
-          sx={{ display: { xs: 'none', md: 'block' }, position: 'absolute', p: 1, bottom: 3 }}>
+          onClick={() => (props.scrollTarget as React.RefObject<HTMLElement | null>).current?.scrollIntoView()}
+          sx={{ position: 'absolute', p: 1, bottom: 2, left: '50%', transform: 'translate(-50%, 0)' }}>
           <ExpandMore fontSize="large" />
         </IconButton>
       )}