style: figure out responsive issues

src/components/UserProfile.tsx

@@ -12,9 +12,9 @@ export default function UserProfile({ user }: { user: UserDto }) {
 
   return (
     <div className='w-full'>
-      <div className='shadow-md bg-gradient-to-r from-violet-600 via-violet-600 to-indigo-600 rounded-t-md pt-20 pl-5 pr-40'>
+      <div className='shadow-md bg-gradient-to-r from-violet-600 via-violet-600 to-indigo-600 rounded-t-md pt-20 px-5'>
         <div className='flex items-center gap-4 -mb-[25px]'>
-          <div>
+          <div className='flex-shrink-0'>
             <Image
               alt='user profile image'
               src={user.clerkImageUrl}
@@ -23,8 +23,13 @@ export default function UserProfile({ user }: { user: UserDto }) {
               className='rounded-full object-cover border-4 border-primary-accent'
             />
           </div>
-          <div className='text-white'>
-            <h1 className='font-bold'>{username}</h1>
+          <div className='flex flex-col flex-1 min-w-0 text-white'>
+            <h1
+              className='font-bold overflow-hidden text-ellipsis'
+              title={username}
+            >
+              {username}
+            </h1>
             <div className='flex gap-2 items-center text-sm'>
               <AiFillCalendar className='w-4 h-4' />
               {`Joined ${monthJoined} ${yearJoined}`}