Skip to content

Fix mobile responsiveness in LeaderboardView contributors table #745

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Claude wants to merge 3 commits into
base: main
Choose a base branch
from
+41 −35
Draft

Fix mobile responsiveness in LeaderboardView contributors table #745

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7d1536f
Initial plan
Claude Apr 7, 2026
ce64e79
Fix mobile responsiveness for contributors page
Claude Apr 7, 2026
e69a0a0
Fix mobile responsiveness in LeaderboardView contributors table
Claude Apr 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions apps/leaderboard-web/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,13 +136,13 @@
- Medium orgs (100-500): 8-16 columns
- Small orgs (<100): 4-8 columns, larger avatars
*/
--people-grid-cols-mobile: 8; /* Mobile: smallest screens */
--people-grid-cols-sm: 10; /* Small: 640px+ */
--people-grid-cols-md: 12; /* Medium: 768px+ */
--people-grid-cols-lg: 16; /* Large: 1024px+ */
--people-grid-cols-xl: 20; /* XL: 1280px+ */
--people-grid-cols-2xl: 24; /* 2XL: 1536px+ */
--people-grid-gap: 0.375rem; /* Gap between avatars (1.5 = 6px) */
--people-grid-cols-mobile: 4; /* Mobile: smallest screens - reduced from 8 for better visibility */
--people-grid-cols-sm: 6; /* Small: 640px+ - reduced from 10 */
--people-grid-cols-md: 8; /* Medium: 768px+ - reduced from 12 */
--people-grid-cols-lg: 12; /* Large: 1024px+ - reduced from 16 */
--people-grid-cols-xl: 16; /* XL: 1280px+ - reduced from 20 */
--people-grid-cols-2xl: 20; /* 2XL: 1536px+ - reduced from 24 */
--people-grid-gap: 0.5rem; /* Gap between avatars - increased from 0.375rem for better spacing */
}

.dark {
Expand Down
24 changes: 13 additions & 11 deletions apps/leaderboard-web/app/leaderboard/LeaderboardView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -712,13 +712,13 @@ export default function LeaderboardView({
{/* Mobile Row */}
<Link
href={`/${entry.username}`}
className="flex md:hidden items-center gap-3 px-4 py-3"
className="flex md:hidden items-start gap-2 sm:gap-3 px-3 sm:px-4 py-3"
>
<div className="flex items-center justify-center w-8 shrink-0">
<div className="flex items-center justify-center w-7 sm:w-8 shrink-0 pt-0.5">
{isTopThree ? (
<Trophy
className={cn(
"h-4 w-4",
"h-3.5 w-3.5 sm:h-4 sm:w-4",
rank === 1
? "text-medal-gold"
: rank === 2
Expand All @@ -727,12 +727,12 @@ export default function LeaderboardView({
)}
/>
) : (
<span className="text-sm font-medium text-muted-foreground tabular-nums">
<span className="text-xs sm:text-sm font-medium text-muted-foreground tabular-nums">
{rank}
</span>
)}
</div>
<Avatar className="size-9 shrink-0">
<Avatar className="size-8 sm:size-9 shrink-0">
<AvatarImage
src={entry.avatar_url || undefined}
alt={entry.name || entry.username}
Expand All @@ -744,14 +744,16 @@ export default function LeaderboardView({
</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-1.5">
<span className="text-sm font-medium truncate">
<div className="flex items-center gap-1 min-w-0">
<span className="text-xs sm:text-sm font-medium truncate">
{entry.name || entry.username}
</span>
<RankChangeBadge change={rankChange} compact />
<div className="shrink-0">
<RankChangeBadge change={rankChange} compact />
</div>
</div>
{hasActivityBreakdown && (
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
<div className="flex items-center flex-wrap gap-1 sm:gap-1.5 text-xs text-muted-foreground mt-0.5">
{activityDefinitions.map((def) => {
const count =
entry.activity_breakdown?.[def.slug]?.count ??
Expand All @@ -760,7 +762,7 @@ export default function LeaderboardView({
return (
<span
key={def.slug}
className="inline-flex items-center gap-0.5"
className="inline-flex items-center gap-0.5 shrink-0"
>
{def.icon ? (
<Icon
Expand All @@ -778,7 +780,7 @@ export default function LeaderboardView({
)}
</div>
<div className="text-right shrink-0">
<div className="text-sm font-semibold text-primary tabular-nums">
<div className="text-xs sm:text-sm font-semibold text-primary tabular-nums">
{entry.total_points}
</div>
{pointsDelta !== null && pointsDelta !== 0 && (
Expand Down
38 changes: 21 additions & 17 deletions apps/leaderboard-web/app/people/PeopleView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,18 +67,20 @@ export default function PeopleView({
}, [contributors, roles]);

return (
<div className="px-4 py-8">
<div className="px-4 sm:px-6 lg:px-8 py-8">
{/* Header */}
<div className="mb-12 text-center">
<h1 className="text-4xl font-bold mb-4">Our People</h1>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
<div className="mb-8 sm:mb-12 text-center">
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold mb-3 sm:mb-4">
Our People
</h1>
<p className="text-sm sm:text-base lg:text-lg text-muted-foreground max-w-2xl mx-auto px-2 sm:px-0">
Meet the <strong>{contributors.length}</strong> amazing contributors
who make {orgName} possible
</p>
</div>

{/* View Switcher */}
<div className="flex justify-end mb-6 max-w-7xl mx-auto">
<div className="flex justify-center sm:justify-end mb-6 max-w-7xl mx-auto px-2 sm:px-0">
<div className="flex gap-1 border rounded-md p-0.5">
<Button
variant={view === "normal" ? "secondary" : "ghost"}
Expand Down Expand Up @@ -108,7 +110,7 @@ export default function PeopleView({
)}

{/* Stats */}
<div className="mt-12 text-center text-sm text-muted-foreground">
<div className="mt-8 sm:mt-12 text-center text-xs sm:text-sm text-muted-foreground px-2">
<p>
Showing {contributors.length} contributors across {roles.length} roles
</p>
Expand All @@ -125,28 +127,30 @@ function NormalView({
contributorsByRole: Map<string, Contributor[]>;
}) {
return (
<div className="space-y-12">
<div className="space-y-8 sm:space-y-12">
{roles.map((role) => {
const members = contributorsByRole.get(role.key);
if (!members || members.length === 0) return null;

return (
<section key={role.key}>
<div className="mb-6">
<h2 className="text-2xl font-bold">{role.name}</h2>
<div className="mb-4 sm:mb-6 px-2 sm:px-0">
<h2 className="text-xl sm:text-2xl font-bold">{role.name}</h2>
{role.description && (
<p className="text-muted-foreground mt-1">{role.description}</p>
<p className="text-sm sm:text-base text-muted-foreground mt-1">
{role.description}
</p>
)}
</div>

<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 sm:gap-4">
{members.map((contributor) => (
<Link
key={contributor.username}
href={`/${contributor.username}`}
className="group flex flex-col items-center gap-2 rounded-xl border bg-card p-4 transition-all hover:shadow-md hover:border-foreground/20"
className="group flex flex-col items-center gap-2 rounded-xl border bg-card p-3 sm:p-4 transition-all hover:shadow-md hover:border-foreground/20"
>
<Avatar className="size-16 transition-transform group-hover:scale-105">
<Avatar className="size-14 sm:size-16 transition-transform group-hover:scale-105">
<AvatarImage
src={contributor.avatar_url || undefined}
alt={contributor.name || contributor.username}
Expand All @@ -159,14 +163,14 @@ function NormalView({
</AvatarFallback>
</Avatar>
<div className="text-center min-w-0 w-full">
<p className="font-medium truncate text-sm group-hover:text-foreground transition-colors">
<p className="font-medium truncate text-xs sm:text-sm group-hover:text-foreground transition-colors">
{contributor.name || contributor.username}
</p>
<p className="text-xs text-muted-foreground truncate">
<p className="text-[10px] sm:text-xs text-muted-foreground truncate">
@{contributor.username}
</p>
{contributor.totalPoints > 0 && (
<p className="text-xs text-muted-foreground mt-1">
<p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
{contributor.totalPoints.toLocaleString()} pts
</p>
)}
Expand All @@ -183,7 +187,7 @@ function NormalView({

function GalleryView({ contributors }: { contributors: Contributor[] }) {
return (
<div className="people-avatar-grid grid gap-(--people-grid-gap)">
<div className="people-avatar-grid grid gap-(--people-grid-gap) px-2 sm:px-0 max-w-7xl mx-auto">
{contributors.map((contributor) => (
<Tooltip key={contributor.username}>
<TooltipTrigger asChild>
Expand Down
Loading