radziel/spotlightcam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(profile): improve responsive layout for public profile

Browse Source 
- Add flex-wrap to stats section to prevent overflow on small screens
- Make profile header flex-col on mobile, flex-row on larger screens
- Add flex-shrink-0 to icons to prevent them from shrinking
- Reduce padding on mobile (p-4) and increase on larger screens
- Add min-w-0 to prevent text overflow issues
This commit is contained in:
Radosław Gierwiało
2025-12-05 18:40:13 +01:00
parent fb4e0bea99
commit 00825d56b6
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/pages/PublicProfilePage.jsx
View File

@@ -70,16 +70,16 @@ const PublicProfilePage = () => {
<div className="min-h-screen bg-gray-50 py-8"> <div className="min-h-screen bg-gray-50 py-8">
<div className="max-w-4xl mx-auto px-4"> <div className="max-w-4xl mx-auto px-4">
{/* Profile Header */} {/* Profile Header */}
<div className="bg-white rounded-lg shadow-sm p-8 mb-6"> <div className="bg-white rounded-lg shadow-sm p-4 sm:p-6 md:p-8 mb-6">
<div className="flex items-start gap-6"> <div className="flex flex-col sm:flex-row items-start gap-4 sm:gap-6">
<Avatar <Avatar
src={profile.avatar} src={profile.avatar}
username={profile.username} username={profile.username}
size={128} size={128}
className="transition-all hover:ring-2 hover:ring-primary-500" className="transition-all hover:ring-2 hover:ring-primary-500 flex-shrink-0"
title={profile.username} title={profile.username}
/> />
<div className="flex-1"> <div className="flex-1 min-w-0">
<h1 className="text-3xl font-bold text-gray-900 mb-1"> <h1 className="text-3xl font-bold text-gray-900 mb-1">
{profile.firstName && profile.lastName {profile.firstName && profile.lastName
? `${profile.firstName} ${profile.lastName}` ? `${profile.firstName} ${profile.lastName}`
@@ -106,22 +106,22 @@ const PublicProfilePage = () => {
)} )}
{/* Stats */} {/* Stats */}
<div className="flex gap-6 mb-4"> <div className="flex flex-wrap gap-4 sm:gap-6 mb-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Star className="w-5 h-5 text-yellow-500" /> <Star className="w-5 h-5 text-yellow-500 flex-shrink-0" />
<span className="font-semibold">{profile.stats.rating}</span> <span className="font-semibold">{profile.stats.rating}</span>
<span className="text-gray-600">Rating</span> <span className="text-gray-600">Rating</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Award className="w-5 h-5 text-purple-600" /> <Award className="w-5 h-5 text-purple-600 flex-shrink-0" />
<span className="font-semibold">{profile.stats.ratingsCount}</span> <span className="font-semibold">{profile.stats.ratingsCount}</span>
<span className="text-gray-600">Reviews</span> <span className="text-gray-600">Reviews</span>
</div> </div>
</div> </div>
{/* Member since */} {/* Member since */}
<div className="flex items-center gap-2 text-gray-600 text-sm"> <div className="flex items-center gap-2 text-gray-600 text-sm flex-wrap">
<Calendar className="w-4 h-4" /> <Calendar className="w-4 h-4 flex-shrink-0" />
<span>Member since {new Date(profile.createdAt).toLocaleDateString()}</span> <span>Member since {new Date(profile.createdAt).toLocaleDateString()}</span>
</div> </div>
</div> </div>