byarielm.fyi
+31
-28
src/components/SearchResultCard.tsx
+31
-28
src/components/SearchResultCard.tsx
···
28
28
onToggle: () => void;
29
29
}>(({ match, isSelected, isFollowed, currentAppName, onToggle }) => {
30
30
return (
31
-
<div className="flex items-start gap-3 p-3 cursor-pointer hover:scale-[1.01] transition-transform">
32
-
<AvatarWithFallback
33
-
avatar={match.avatar}
34
-
handle={match.handle || ""}
35
-
size="sm"
36
-
/>
31
+
<div className="p-3 cursor-pointer hover:scale-[1.01] transition-transform">
32
+
{/* Top row: Avatar, Name/Handle, Follow Button */}
33
+
<div className="flex items-start gap-3 mb-2">
34
+
<AvatarWithFallback
35
+
avatar={match.avatar}
36
+
handle={match.handle || ""}
37
+
size="sm"
38
+
/>
37
39
38
-
<div className="flex-1 min-w-0 space-y-1">
39
-
<div>
40
+
<div className="flex-1 min-w-0">
40
41
{match.displayName && (
41
42
<div className="font-semibold text-purple-950 dark:text-cyan-50 leading-tight">
42
43
{match.displayName}
···
52
53
</a>
53
54
</div>
54
55
55
-
<div className="flex items-center flex-wrap gap-2">
56
-
{typeof match.postCount === "number" && match.postCount > 0 && (
57
-
<StatBadge value={match.postCount} label="posts" />
58
-
)}
59
-
{typeof match.followerCount === "number" &&
60
-
match.followerCount > 0 && (
61
-
<StatBadge value={match.followerCount} label="followers" />
62
-
)}
63
-
<Badge variant="match">{match.matchScore}% match</Badge>
64
-
</div>
56
+
<FollowButton
57
+
isFollowed={isFollowed}
58
+
isSelected={isSelected}
59
+
onToggle={onToggle}
60
+
appName={currentAppName}
61
+
/>
62
+
</div>
65
63
66
-
{match.description && (
67
-
<div className="text-sm text-purple-900 dark:text-cyan-100 line-clamp-2 pt-1">
68
-
{match.description}
69
-
</div>
64
+
{/* Stats/Badges - align with avatar on mobile (pl-[60px] = avatar width 48px + gap 12px) */}
65
+
<div className="flex items-center flex-wrap gap-2 pl-0 md:pl-[60px]">
66
+
{typeof match.postCount === "number" && match.postCount > 0 && (
67
+
<StatBadge value={match.postCount} label="posts" />
70
68
)}
69
+
{typeof match.followerCount === "number" &&
70
+
match.followerCount > 0 && (
71
+
<StatBadge value={match.followerCount} label="followers" />
72
+
)}
73
+
<Badge variant="match">{match.matchScore}% match</Badge>
71
74
</div>
72
75
73
-
<FollowButton
74
-
isFollowed={isFollowed}
75
-
isSelected={isSelected}
76
-
onToggle={onToggle}
77
-
appName={currentAppName}
78
-
/>
76
+
{/* Description - align with avatar on mobile */}
77
+
{match.description && (
78
+
<div className="text-sm text-purple-900 dark:text-cyan-100 line-clamp-2 pt-2 pl-0 md:pl-[60px]">
79
+
{match.description}
80
+
</div>
81
+
)}
79
82
</div>
80
83
);
81
84
});