From 00825d56b63094c2f0c9259631d21eb3e4dbee5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rados=C5=82aw=20Gierwia=C5=82o?= <github@radziel.com>
Date: Fri, 5 Dec 2025 18:40:13 +0100
Subject: [PATCH] fix(profile): improve responsive layout for public profile

- 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
---
 frontend/src/pages/PublicProfilePage.jsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/pages/PublicProfilePage.jsx b/frontend/src/pages/PublicProfilePage.jsx
index 2d65c8d..ce2d9b0 100644
--- a/frontend/src/pages/PublicProfilePage.jsx
+++ b/frontend/src/pages/PublicProfilePage.jsx
@@ -70,16 +70,16 @@ const PublicProfilePage = () => {
       <div className="min-h-screen bg-gray-50 py-8">
         <div className="max-w-4xl mx-auto px-4">
           {/* Profile Header */}
-          <div className="bg-white rounded-lg shadow-sm p-8 mb-6">
-            <div className="flex items-start gap-6">
+          <div className="bg-white rounded-lg shadow-sm p-4 sm:p-6 md:p-8 mb-6">
+            <div className="flex flex-col sm:flex-row items-start gap-4 sm:gap-6">
               <Avatar
                 src={profile.avatar}
                 username={profile.username}
                 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}
               />
-              <div className="flex-1">
+              <div className="flex-1 min-w-0">
                 <h1 className="text-3xl font-bold text-gray-900 mb-1">
                   {profile.firstName && profile.lastName
                     ? `${profile.firstName} ${profile.lastName}`
@@ -106,22 +106,22 @@ const PublicProfilePage = () => {
                 )}
 
                 {/* 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">
-                    <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="text-gray-600">Rating</span>
                   </div>
                   <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="text-gray-600">Reviews</span>
                   </div>
                 </div>
 
                 {/* Member since */}
-                <div className="flex items-center gap-2 text-gray-600 text-sm">
-                  <Calendar className="w-4 h-4" />
+                <div className="flex items-center gap-2 text-gray-600 text-sm flex-wrap">
+                  <Calendar className="w-4 h-4 flex-shrink-0" />
                   <span>Member since {new Date(profile.createdAt).toLocaleDateString()}</span>
                 </div>
               </div>