diff --git a/frontend/src/components/FollowListModal.css b/frontend/src/components/FollowListModal.css index 02281f4..acde38f 100644 --- a/frontend/src/components/FollowListModal.css +++ b/frontend/src/components/FollowListModal.css @@ -106,16 +106,16 @@ padding: 2px 8px; display: flex; align-items: center; - gap: 4px; + gap: 6px; } .user-item { display: flex; align-items: flex-start; - gap: 4px; + gap: 6px; cursor: pointer; transition: background 0.2s; - padding: 2px; + padding: 3px; border-radius: 4px; position: relative; flex: 1; @@ -125,26 +125,30 @@ background: var(--bg-primary); } -.user-avatar { - width: 20px; - height: 20px; +.follow-list-modal .user-avatar { + width: 20px !important; + height: 20px !important; + min-width: 20px !important; + min-height: 20px !important; + max-width: 20px !important; + max-height: 20px !important; border-radius: 50%; object-fit: cover; flex-shrink: 0; } -.user-info { +.follow-list-modal .user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; - gap: 1px; + gap: 0.5px; text-align: left; align-items: flex-start; } -.user-name { - font-size: 11px; +.follow-list-modal .user-name { + font-size: 10px !important; font-weight: 600; color: var(--text-primary); line-height: 1.2; @@ -153,8 +157,8 @@ text-overflow: ellipsis; } -.user-username { - font-size: 12px; +.follow-list-modal .user-username { + font-size: 12px !important; color: var(--text-secondary); line-height: 1.2; white-space: nowrap; @@ -164,8 +168,8 @@ /* Follow Button Icon */ .follow-btn-icon { - width: 20px; - height: 20px; + width: 26px; + height: 26px; border-radius: 50%; background: var(--bg-primary); color: var(--text-primary); diff --git a/frontend/src/components/FollowListModal.jsx b/frontend/src/components/FollowListModal.jsx index e8190d9..2d80d82 100644 --- a/frontend/src/components/FollowListModal.jsx +++ b/frontend/src/components/FollowListModal.jsx @@ -112,9 +112,9 @@ export default function FollowListModal({ users, title, onClose, currentUser }) onClick={(e) => handleFollowToggle(user._id, e)} > {isFollowing ? ( - + ) : ( - + )} )}