diff --git a/frontend/src/components/FollowListModal.css b/frontend/src/components/FollowListModal.css index b9b1bf3..02281f4 100644 --- a/frontend/src/components/FollowListModal.css +++ b/frontend/src/components/FollowListModal.css @@ -103,18 +103,22 @@ } .user-item-wrapper { - padding: 3px 10px; + padding: 2px 8px; + display: flex; + align-items: center; + gap: 4px; } .user-item { display: flex; - align-items: center; - gap: 8px; + align-items: flex-start; + gap: 4px; cursor: pointer; transition: background 0.2s; - padding: 5px; - border-radius: 6px; + padding: 2px; + border-radius: 4px; position: relative; + flex: 1; } .user-item:active { @@ -122,8 +126,8 @@ } .user-avatar { - width: 26px; - height: 26px; + width: 20px; + height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; @@ -135,22 +139,24 @@ display: flex; flex-direction: column; gap: 1px; + text-align: left; + align-items: flex-start; } .user-name { - font-size: 12px; + font-size: 11px; font-weight: 600; color: var(--text-primary); - line-height: 1.3; + line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-username { - font-size: 15px; + font-size: 12px; color: var(--text-secondary); - line-height: 1.3; + line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -158,8 +164,8 @@ /* Follow Button Icon */ .follow-btn-icon { - width: 26px; - height: 26px; + width: 20px; + height: 20px; border-radius: 50%; background: var(--bg-primary); color: var(--text-primary); @@ -170,7 +176,6 @@ cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; - margin-left: auto; } .follow-btn-icon:active { diff --git a/frontend/src/components/FollowListModal.jsx b/frontend/src/components/FollowListModal.jsx index 1dab6eb..1a0b48d 100644 --- a/frontend/src/components/FollowListModal.jsx +++ b/frontend/src/components/FollowListModal.jsx @@ -105,20 +105,20 @@ export default function FollowListModal({ users, title, onClose, currentUser })
@{user.username || user.firstName || 'user'}
- - {!isOwnProfile && ( - - )} + {!isOwnProfile && ( + + )} + ) })}