issue #132: FIX responsive profile

src/app/perfil/[id]/components/GroupButton.js

@@ -85,8 +85,8 @@ export default function GroupButton({ profileData, idLogin }) {
 
   return (
     <>
-      <div className='pb-4 flex flex-row justify-between mr-10'>
-        <div className='flex flex-row gap-4 ' >
+      <div className='pb-4 flex flex-row max-lg:flex-col justify-between max-lg:items-center max-lg:pt-8 max-lg:mr-0  mr-10'>
+        <div className='flex flex-row gap-4  max-sm:flex-col  max-sm:items-center' >
           {idLogin == profileData["id"] ?
             <button
               className={`text-[16px] rounded-[10px] normal-case h-10 font-bold w-48 text-white bg-secondary hover:bg-secondary-hover `}
@@ -105,7 +105,7 @@ export default function GroupButton({ profileData, idLogin }) {
               {follow ? "Seguindo o perfil" : "Seguir o perfil"}
             </button>
           }
-          <div className='max-[1024px]:grid max-[1024px]:justify-items-center'>
+          <div className=''>
             <button
               className="border text-[16px]	outline outline-1 pr-2 outline-outlineColor text-text-filter border-main rounded-[10px] normal-case h-10 font-semibold w-52  hover:bg-main-hover  "
               onClick={() => setShareOpen(true)}
@@ -116,7 +116,7 @@ export default function GroupButton({ profileData, idLogin }) {
             </button>
           </div>
         </div>
-        <div className=''>
+        <div >
           {idLogin !== profileData["id"] &&
             <button
               className=" text-[16px]  hover:bg-transparent hover:text-red text-main-text rounded-[10px] normal-case h-10 font-bold "

src/app/perfil/[id]/components/UserCard.js

@@ -170,7 +170,7 @@ export default function UserCard({ profileData, idLogin }) {
     return (
         <>
             <div className='flex pt-[5%] flex-col mx-[5%] '>
-                <div className='flex rounded-2xl gap-4  bg-white outline outline-1 outline-outlineColor' >
+                <div className='flex max-lg:flex-col rounded-2xl gap-4 max-lg:items-center bg-white outline outline-1 outline-outlineColor' >
                     <div className='p-10 h-full items-center'>
                         {/*a imagem do usuário tem nomes diferentes no backend se for usuário público ou não */}
                         {profileData["avatar"] ?
@@ -180,20 +180,20 @@ export default function UserCard({ profileData, idLogin }) {
                         }
                     </div>
 
-                    <div className='flex flex-col pt-12 pb-6 justify-between w-full'>
+                    <div className='flex flex-col pt-12 max-lg:pt-2 pb-6 justify-between w-full '>
                         <div className=' flex flex-col justify-start '>
-                            <div className='flex flex-row items-center text-main-text font-bold text-4xl mb-6'>
-                                <div className='bg-gray-color rounded-full w-[28px] h-[28px] mx-4 aspect-square' /> {profileData["name"]}
+                            <div className='flex flex-row items-center text-main-text font-bold max-sm:text-3xl  text-4xl mb-6'>
+                                <div className='bg-gray-color shrink-0 rounded-full max-lg:w-[20px] max-lg:h-[20px] w-[28px] h-[28px] mx-4 aspect-square' /> {profileData["name"]}
                             </div>
 
-                            {profileData["email"] && <div className='mb-3 flex flex-row items-center text-text-filter text-2xl '>
-                                <div className='bg-gray-color rounded-full w-[28px] h-[28px] mx-4 aspect-square' />
+                            {profileData["email"] && <div className='mb-3 truncate  flex flex-row items-center text-text-filter max-sm:text-base text-2xl  '>
+                                <div className='bg-gray-color shrink-0 rounded-full w-[28px] h-[28px] max-lg:w-[20px] max-lg:h-[20px] mx-4 aspect-square' />
                                 {profileData["email"]}</div>}
 
                             <div className='mb-3'>
                                 {translateItems &&
-                                    <div className='flex flex-row items-center mt-1 text-text-filter text-xl'>
-                                        <div className='bg-gray-color  rounded-full w-[28px] h-[28px] mx-4 aspect-square' />
+                                    <div className='flex flex-row items-center mt-1 text-text-filter max-sm:text-base text-xl'>
+                                        <div className='bg-gray-color shrink-0 rounded-full w-[28px] h-[28px] max-lg:w-[20px] max-lg:h-[20px] mx-4 aspect-square' />
                                         {translateItems}</div>
                                 }
                             </div>