From 04e036a5638a5e6b161ffad46c97d1f1076ed034 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 1 Sep 2022 17:29:28 +0300
Subject: [PATCH] fix: similar maker name overflow

---
 src/features/Profiles/pages/ProfilePage/ProfilePage.tsx       | 4 +---
 .../pages/ProfilePage/SimilarMakersCard/SimilarMakersCard.tsx | 4 ++--
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx b/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
index 50f709c..92142be 100644
--- a/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
+++ b/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>
                     </>
diff --git a/src/features/Profiles/pages/ProfilePage/SimilarMakersCard/SimilarMakersCard.tsx b/src/features/Profiles/pages/ProfilePage/SimilarMakersCard/SimilarMakersCard.tsx
index 0136b4a..1e127ab 100644
--- a/src/features/Profiles/pages/ProfilePage/SimilarMakersCard/SimilarMakersCard.tsx
+++ b/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>