fix: similar maker name overflow

src/features/Profiles/pages/ProfilePage/ProfilePage.tsx

@@ -12,8 +12,6 @@ import SkillsCard from "./SkillsCard/SkillsCard"
 import TournamentsCard from "./TournamentsCard/TournamentsCard"
 import { MEDIA_QUERIES } from "src/utils/theme"
 import SimilarMakersCard from "./SimilarMakersCard/SimilarMakersCard"
-import { useEffect } from "react"
-import { gql, useApolloClient } from "@apollo/client"
 
 export default function ProfilePage() {
 
@@ -65,7 +63,7 @@ export default function ProfilePage() {
                             <AboutCard user={profileQuery.data.profile} isOwner={isOwner} />
                             <StoriesCard stories={profileQuery.data.profile.stories} isOwner={isOwner} />
                         </main>
-                        <aside>
+                        <aside className="min-w-0">
                             <SimilarMakersCard makers={profileQuery.data.profile.similar_makers} />
                         </aside>
                     </>

src/features/Profiles/pages/ProfilePage/SimilarMakersCard/SimilarMakersCard.tsx

@@ -25,8 +25,8 @@ export default function SimilarMakersCard({ makers }: Props) {
                     return <Link key={maker.id} to={createRoute({ type: "profile", id: maker.id, username: maker.name })} className="border-b py-16 last-of-type:border-b-0 last-of-type:pb-0">
                         <li className="flex items-start gap-8">
                             <Avatar width={40} src={maker.avatar} />
-                            <div>
-                                <p className="text-body4 text-gray-800 font-medium">{maker.name}</p>
+                            <div className='overflow-hidden'>
+                                <p className="text-body4 text-gray-800 font-medium overflow-hidden text-ellipsis">{maker.name}</p>
                                 <p className="text-body5 text-gray-500 font-medium">{maker.jobTitle}</p>
                             </div>
                         </li>