From 0028974c3bc5775a087e360c1326d603497daa16 Mon Sep 17 00:00:00 2001
From: Divlo <contact@divlo.fr>
Date: Sat, 9 Apr 2022 11:44:14 +0200
Subject: [PATCH] fix: improve responsive for UserProfile

---
 .../Application/UserProfile/UserProfile.tsx   | 150 ++++++++++--------
 1 file changed, 80 insertions(+), 70 deletions(-)

diff --git a/components/Application/UserProfile/UserProfile.tsx b/components/Application/UserProfile/UserProfile.tsx
index 4d626a5..32f36ba 100644
--- a/components/Application/UserProfile/UserProfile.tsx
+++ b/components/Application/UserProfile/UserProfile.tsx
@@ -16,84 +16,94 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
   const { t } = useTranslation()
 
   return (
-    <div className='relative flex h-full flex-col items-center justify-center'>
-      <div className='transition'>
-        <div className='max-w-[1000px] px-12'>
-          <div className='flex items-center justify-between'>
-            <div className='flex w-max items-center'>
-              <div className='relative flex items-center justify-center overflow-hidden rounded-full shadow-lg transition-all'>
-                <Image
-                  quality={100}
-                  className='rounded-full'
-                  src={
-                    user.logo != null
-                      ? user.logo
-                      : '/images/data/user-default.png'
-                  }
-                  alt='Profil Picture'
-                  draggable='false'
-                  height={125}
-                  width={125}
-                />
-              </div>
-              <div className='ml-10 flex flex-col'>
-                <div className='mb-2 flex items-center'>
-                  <p
-                    className='space text-dark text-3xl font-bold tracking-wide dark:text-white'
-                    data-cy='user-name'
-                  >
-                    {user.name}
-                  </p>
-                  <p
-                    className='ml-8 select-none text-sm tracking-widest text-white opacity-40'
-                    data-cy='user-createdAt'
-                  >
-                    {date.format(new Date(user.createdAt), 'DD/MM/YYYY')}
-                  </p>
+    <>
+      <div className='relative flex h-full flex-col items-center justify-center'>
+        <div className='transition'>
+          <div className='max-w-[1000px] px-12'>
+            <div className='flex items-center justify-between'>
+              <div className='flex w-max flex-col items-center gap-7 md:flex-row'>
+                <div className='relative flex items-center justify-center overflow-hidden rounded-full shadow-lg transition-all'>
+                  <Image
+                    quality={100}
+                    className='rounded-full'
+                    src={
+                      user.logo != null
+                        ? user.logo
+                        : '/images/data/user-default.png'
+                    }
+                    alt='Profil Picture'
+                    draggable='false'
+                    height={125}
+                    width={125}
+                  />
                 </div>
-                <div className='my-2 text-left'>
-                  {user.email != null && (
-                    <p className='font-bold'>
-                      Email:{' '}
-                      <a
-                        href={`mailto:${user.email}`}
-                        target='_blank'
-                        className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-1px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
-                        rel='noreferrer'
-                        data-cy='user-email'
-                      >
-                        {user.email}
-                      </a>
+                <div className='ml-10 flex flex-col'>
+                  <div className='mb-2 flex items-center'>
+                    <p
+                      className='space text-dark text-3xl font-bold tracking-wide dark:text-white'
+                      data-cy='user-name'
+                    >
+                      {user.name}
                     </p>
-                  )}
-                  {user.website != null && (
-                    <p className='font-bold'>
-                      {t('application:website')}:{' '}
-                      <a
-                        href={user.website}
-                        className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-2px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
-                      >
-                        {user.website}
-                      </a>
+                    <p
+                      className='ml-8 select-none text-sm tracking-widest text-white opacity-40'
+                      data-cy='user-createdAt'
+                    >
+                      {date.format(new Date(user.createdAt), 'DD/MM/YYYY')}
                     </p>
-                  )}
-                  {user.status != null && (
-                    <p className='flex font-bold'>
-                      {t('application:status')}:{' '}
-                      <span className='ml-2 font-normal tracking-wide'>
-                        {user.status}
-                      </span>
-                    </p>
-                  )}
+                  </div>
+                  <div className='my-2 text-left'>
+                    {user.email != null && (
+                      <p className='font-bold'>
+                        Email:{' '}
+                        <a
+                          href={`mailto:${user.email}`}
+                          target='_blank'
+                          className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-1px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
+                          rel='noreferrer'
+                          data-cy='user-email'
+                        >
+                          {user.email}
+                        </a>
+                      </p>
+                    )}
+                    {user.website != null && (
+                      <p className='font-bold'>
+                        {t('application:website')}:{' '}
+                        <a
+                          href={user.website}
+                          className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-2px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
+                        >
+                          {user.website}
+                        </a>
+                      </p>
+                    )}
+                    {user.status != null && (
+                      <p className='flex font-bold'>
+                        {t('application:status')}:{' '}
+                        <span className='ml-2 font-normal tracking-wide'>
+                          {user.status}
+                        </span>
+                      </p>
+                    )}
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div className='mt-7'>
-            {user.biography != null && <p>{user.biography}</p>}
+            {user.biography != null && (
+              <div className='mt-7 text-center'>
+                <p>{user.biography}</p>
+              </div>
+            )}
           </div>
         </div>
       </div>
-    </div>
+
+      <style jsx global>{`
+        #application-page-content {
+          overflow-x: hidden;
+        }
+      `}</style>
+    </>
   )
 }