fix paddings of edit buttons

packages/web/components/Player/Section/PlayerHero.tsx

@@ -64,13 +64,7 @@ export const PlayerHero: React.FC<Props> = ({ player, isOwnProfile }) => {
   return (
     <ProfileSection>
       {isOwnProfile && (
-        <Flex
-          width="100%"
-          justifyContent="end"
-          pos="absolute"
-          right={4}
-          top={4}
-        >
+        <Box pos="absolute" right={5} top={5}>
           <IconButton
             variant="outline"
             aria-label="Edit Profile Info"
@@ -82,7 +76,7 @@ export const PlayerHero: React.FC<Props> = ({ player, isOwnProfile }) => {
             icon={<EditIcon />}
             isRound
           />
-        </Flex>
+        </Box>
       )}
       <Box textAlign="center" mb={8} mt={2}>
         <PlayerAvatar

packages/web/components/ProfileSection.tsx

@@ -20,7 +20,7 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
 }) => (
   <Box minW="72" fontFamily="exo2">
     {title ? (
-      <Box bg="purpleProfileSection" borderTopRadius="lg" pt={4} pb={4}>
+      <Box bg="purpleProfileSection" borderTopRadius="lg" pt={5} pb={5}>
         <HStack height={5}>
           <Text
             fontSize="sm"
@@ -41,6 +41,7 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
               icon={<EditIcon />}
               _hover={{ color: 'white' }}
               isRound
+              pr={5}
             />
           ) : null}
           {canEdit ? (

packages/web/pages/player/[username].tsx

@@ -181,7 +181,7 @@ const PlayerPage: React.FC<Props> = ({ player }) => {
               icon={<EditIcon />}
               isRound
               zIndex="docked"
-              m={6}
+              m={5}
             />
           </Flex>
         )}
@@ -192,7 +192,7 @@ const PlayerPage: React.FC<Props> = ({ player }) => {
         pl={[4, 8, 12]}
         pr={[4, 8, 12]}
         pb={[4, 8, 12]}
-        pt={200 - 64}
+        pt={200 - 72}
         direction="column"
         align="center"
         zIndex={1}