profile and stats improvements

src/features/players/components/profile/header.tsx

@@ -20,12 +20,24 @@ const Header = ({ player }: HeaderProps) => {
   const owner = useMemo(() => authUser?.id === player.id, [authUser?.id, player.id]);
   const name = useMemo(() => `${player.first_name} ${player.last_name}`, [player.first_name, player.last_name]);
 
+  const fontSize = useMemo(() => {
+    const baseSize = 24;
+    const maxLength = 20;
+
+    if (name.length <= maxLength) {
+      return `${baseSize}px`;
+    }
+
+    const scaleFactor = Math.max(0.6, maxLength / name.length);
+    return `${Math.floor(baseSize * scaleFactor)}px`;
+  }, [name]);
+
   return (
     <>
-      <Flex px='xl' w='100%' align='self-end' gap='md'>
-        <Avatar name={name} size={125} />
+      <Flex px='lg' w='100%' align='self-end' gap='md'>
+        <Avatar name={name} size={100} />
         <Flex align='center' justify='center' gap={4} pb={20} w='100%'>
-          <Title ta='center' order={2}>{name}</Title>
+          <Title ta='center' style={{ fontSize, lineHeight: 1.2 }}>{name}</Title>
           <ActionIcon display={owner ? 'block' : 'none'} radius='xl' variant='subtle' onClick={sheet.open}>
             <PencilIcon size={20} />
           </ActionIcon>

src/features/players/components/profile/index.tsx

@@ -30,7 +30,7 @@ const Profile = ({ id }: ProfileProps) => {
   return (
     <>
       <Header player={player} />
-      <Box m="sm" mt="lg">
+      <Box m='md' mt="lg">
         <SwipeableTabs tabs={tabs} />
       </Box>
     </>