From 5a381a5dc3f780e97281c08b091bbeda6b11c9cb Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Thu, 31 Jul 2025 15:05:44 +0200
Subject: [PATCH] Fix alignment

---
 lib/client/profile.tsx | 513 ++++++++++++++++++++---------------------
 1 file changed, 255 insertions(+), 258 deletions(-)

diff --git a/lib/client/profile.tsx b/lib/client/profile.tsx
index 57337343..bcd66b0b 100644
--- a/lib/client/profile.tsx
+++ b/lib/client/profile.tsx
@@ -48,270 +48,267 @@ export function getProfile(url, header = null) {
   return (
     <article className="max-w-3xl mx-auto shadow-lg rounded-lg overflow-hidden">
       {header}
-      {/* Profile Header with Image */}
-      < div
-        className="bg-gradient-to-r h-32 relative">
-        {
-          image ? (
-              <div className="absolute -bottom-16 left-8">
-                <div className="h-32 w-32 rounded-full border-4 border-white overflow-hidden ">
-                  <Image
-                    src={image}
-                    alt={userData.name || 'Profile picture'}
-                    className="h-full w-full object-cover"
-                    width={200}
-                    height={200}
-                    // onError={(e) => {
-                    //   const target = e.target as HTMLImageElement;
-                    //   target.onerror = null;
-                    //   target.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(profile.name || 'U')}&background=random`;
-                    // }}
-                  />
-                </div>
+      <div className="flex items-start">
+        <div className="pt-20 px-8 pb-8 flex-1">
+          <h1 className="text-3xl font-bold  mb-2">
+            {userData.name}
+          </h1>
+
+          < div
+            className="space-y-6 pt-4 border-t border-gray-200">
+
+            {userData?.profile?.desiredConnections && (
+              <div className="mt-3"><
+                h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Desired
+                Connections </h2>
+
+                < ul
+                  className="flex flex-wrap gap-2 mt-1">
+                  {userData?.profile?.desiredConnections.map((value, idx) => (
+                    <li
+                      key={idx}
+                      className="px-3 py-1 text-sm bg-blue-100 text-blue-800 dark:text-white dark:bg-gray-700  rounded-full hover:bg-gray-200 transition"
+                    >
+                      {value?.connection?.name
+                      }
+                    </li>
+                  ))
+                  }
+                </ul>
               </div>
-            ) :
-            (
-              <div
-                className="absolute -bottom-16 left-8 h-32 w-32 rounded-full border-4 border-white bg-gray-200 flex items-center justify-center">
+            )
+            }
+
+            {
+              userData?.profile?.gender && (
+                <div>
+                  <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Gender </h2>
+                  < p
+                    className="mt-1 capitalize"> {userData.profile.gender} </p>
+                </div>
+              )
+            }
+
+            {
+              userData?.profile?.birthYear && (
+                <div>
+                  <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Age </h2>
+                  < p
+                    className="mt-1 capitalize"> {new Date().getFullYear() - userData.profile.birthYear} </p>
+                </div>
+              )
+            }
+
+            {
+              userData?.profile?.location && (
+                <div>
+                  <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Location </h2>
+                  < p
+                    className={pStyle}> {userData.profile.location} </p>
+                </div>
+              )
+            }
+
+            {
+              userData?.profile?.occupation && (
+                <div>
+                  <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Occupation </h2>
+                  < p
+                    className={pStyle}> {userData.profile.occupation} </p>
+                </div>
+              )
+            }
+
+            {
+              userData?.profile?.personalityType && (
+                <div>
+                  <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Personality
+                    Type </h2>
+                  < p
+                    className={pStyle}> {userData.profile.personalityType} </p>
+                </div>
+              )
+            }
+
+            {
+              userData?.profile?.conflictStyle && (
+                <div>
+                  <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Conflict
+                    Style </h2>
+                  < p
+                    className={pStyle}> {userData.profile.conflictStyle} </p>
+                </div>
+              )
+            }
+
+            {
+              userData?.profile?.intellectualInterests && (
+                <div className="mt-3"><
+                  h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Interests </h2>
+
+                  < ul
+                    className="flex flex-wrap gap-2 mt-1">
+                    {
+                      userData.profile.intellectualInterests.map((value, idx) => (
+                        <li
+                          key={idx}
+                          className="px-3 py-1 text-sm bg-blue-100 text-blue-800 dark:text-white dark:bg-gray-700  rounded-full hover:bg-gray-200 transition"
+                        >
+                          {value?.interest?.name
+                          }
+                        </li>
+                      ))
+                    }
+                  </ul>
+                </div>
+              )
+            }
+
+            {
+              userData?.profile?.causeAreas && (
+                <div className="mt-3"><
+                  h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Cause
+                  Areas </h2>
+
+                  < ul
+                    className="flex flex-wrap gap-2 mt-1">
+                    {
+                      userData.profile.causeAreas.map((value, idx) => (
+                        <li
+                          key={idx}
+                          className="px-3 py-1 text-sm bg-blue-100 text-blue-800 dark:text-white dark:bg-gray-700  rounded-full hover:bg-gray-200 transition"
+                        >
+                          {value?.causeArea?.name
+                          }
+                        </li>
+                      ))
+                    }
+                  </ul>
+                </div>
+              )
+            }
+
+            {
+              userData?.profile?.description && (
+                <div>
+                  <h2 className="text-sm font-medium text-gray-500  uppercase tracking-wider"> About </h2>
+                  < p
+                    className={pStyle}> {userData.profile.description} </p>
+                </div>
+              )
+            }
+
+            {
+              userData?.profile?.contactInfo && (
+                <div>
+                  <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Contact </h2>
+                  < p
+                    className={pStyle}> {userData.profile.contactInfo} </p>
+                </div>
+              )
+            }
+
+            {
+              userData?.profile?.promptAnswers && (
+                <div className="mt-3"><
+                  h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Prompt
+                  Answers </h2>
+
+                  < ul
+                    className="flex flex-wrap gap-2 mt-1">
+                    {
+                      userData.profile.promptAnswers.map((value, idx) => (
+                        <li
+                          key={idx}
+                          // className="px-3 py-1 text-sm bg-gray-100 rounded-full hover:bg-gray-200 transition"
+                        >
+                          • {value.prompt} {value.answer}
+                        </li>
+                      ))
+                    }
+                  </ul>
+                </div>
+              )
+            }
+
+            {
+              images &&
+                <div className="mb-8">
+                  {/*<h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Photos </h2>*/}
+                    <div className="grid grid-cols-3 gap-4 mb-4">
+                      {Array.from(new Set(images)).map((img, index) => ( // Set is a hack to avoid a bug where duplicates fill in images when we navigate different pages
+                        <div key={index}
+                             className="relative group aspect-square rounded-lg overflow-hidden border border-gray-200 ">
+                          <Image
+                            src={img}
+                            alt={`Uploaded image ${index + 1}`}
+                            width={150}
+                            height={150}
+                            className="h-full w-full object-cover"
+                          />
+                        </div>
+                      ))}
+                    </div>
+                </div>
+            }
+
+            {/*<div>*/
+            }
+            {/*  <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider">Creation Date</h2>*/
+            }
+            {/*  <p className={pStyle}>*/
+            }
+            {/*    {user.profile.createdAt}*/
+            }
+            {/*    {new Date(user.profile.createdAt).toLocaleDateString("en-US", {*/
+            }
+            {/*      year: "numeric",*/
+            }
+            {/*      month: "long",*/
+            }
+            {/*      day: "numeric",*/
+            }
+            {/*    })}*/
+            }
+            {/*  </p>*/
+            }
+            {/*</div>*/
+            }
+
+
+          </div>
+
+        </div>
+        <div className="bg-gradient-to-r relative float-right h-auto flex items-start pt-20 px-8 pb-8">
+          {
+            image ? (
+                <div className="flex-1">
+                  <div className="h-32 w-32 rounded-full border-4 border-white overflow-hidden ">
+                    <Image
+                      src={image}
+                      alt={userData.name || 'Profile picture'}
+                      className="h-full w-full object-cover"
+                      width={200}
+                      height={200}
+                      // onError={(e) => {
+                      //   const target = e.target as HTMLImageElement;
+                      //   target.onerror = null;
+                      //   target.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(profile.name || 'U')}&background=random`;
+                      // }}
+                    />
+                  </div>
+                </div>
+              ) :
+              (
+                <div
+                  className="absolute -bottom-16 left-8 h-32 w-32 rounded-full border-4 border-white bg-gray-200 flex items-center justify-center">
     <span className="text-4xl font-bold text-gray-600">
       {userData.name ? userData.name.charAt(0).toUpperCase() : 'U'}
       </span>
-              </div>
-            )
-        }
-      </div>
-
-      {/* Profile Content */
-      }
-      <div className="pt-20 px-8 pb-8">
-        <h1 className="text-3xl font-bold  mb-2">
-          {userData.name}
-        </h1>
-
-        < div
-          className="space-y-6 pt-4 border-t border-gray-200">
-
-          {userData?.profile?.desiredConnections && (
-            <div className="mt-3"><
-              h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Desired
-              Connections </h2>
-
-              < ul
-                className="flex flex-wrap gap-2 mt-1">
-                {userData?.profile?.desiredConnections.map((value, idx) => (
-                  <li
-                    key={idx}
-                    className="px-3 py-1 text-sm bg-blue-100 text-blue-800 dark:text-white dark:bg-gray-700  rounded-full hover:bg-gray-200 transition"
-                  >
-                    {value?.connection?.name
-                    }
-                  </li>
-                ))
-                }
-              </ul>
-            </div>
-          )
+                </div>
+              )
           }
-
-          {
-            userData?.profile?.gender && (
-              <div>
-                <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Gender </h2>
-                < p
-                  className="mt-1 capitalize"> {userData.profile.gender} </p>
-              </div>
-            )
-          }
-
-          {
-            userData?.profile?.birthYear && (
-              <div>
-                <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Age </h2>
-                < p
-                  className="mt-1 capitalize"> {new Date().getFullYear() - userData.profile.birthYear} </p>
-              </div>
-            )
-          }
-
-          {
-            userData?.profile?.location && (
-              <div>
-                <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Location </h2>
-                < p
-                  className={pStyle}> {userData.profile.location} </p>
-              </div>
-            )
-          }
-
-          {
-            userData?.profile?.occupation && (
-              <div>
-                <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Occupation </h2>
-                < p
-                  className={pStyle}> {userData.profile.occupation} </p>
-              </div>
-            )
-          }
-
-          {
-            userData?.profile?.personalityType && (
-              <div>
-                <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Personality
-                  Type </h2>
-                < p
-                  className={pStyle}> {userData.profile.personalityType} </p>
-              </div>
-            )
-          }
-
-          {
-            userData?.profile?.conflictStyle && (
-              <div>
-                <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Conflict
-                  Style </h2>
-                < p
-                  className={pStyle}> {userData.profile.conflictStyle} </p>
-              </div>
-            )
-          }
-
-          {
-            userData?.profile?.intellectualInterests && (
-              <div className="mt-3"><
-                h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Interests </h2>
-
-                < ul
-                  className="flex flex-wrap gap-2 mt-1">
-                  {
-                    userData.profile.intellectualInterests.map((value, idx) => (
-                      <li
-                        key={idx}
-                        className="px-3 py-1 text-sm bg-blue-100 text-blue-800 dark:text-white dark:bg-gray-700  rounded-full hover:bg-gray-200 transition"
-                      >
-                        {value?.interest?.name
-                        }
-                      </li>
-                    ))
-                  }
-                </ul>
-              </div>
-            )
-          }
-
-          {
-            userData?.profile?.causeAreas && (
-              <div className="mt-3"><
-                h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Cause
-                Areas </h2>
-
-                < ul
-                  className="flex flex-wrap gap-2 mt-1">
-                  {
-                    userData.profile.causeAreas.map((value, idx) => (
-                      <li
-                        key={idx}
-                        className="px-3 py-1 text-sm bg-blue-100 text-blue-800 dark:text-white dark:bg-gray-700  rounded-full hover:bg-gray-200 transition"
-                      >
-                        {value?.causeArea?.name
-                        }
-                      </li>
-                    ))
-                  }
-                </ul>
-              </div>
-            )
-          }
-
-          {
-            userData?.profile?.description && (
-              <div>
-                <h2 className="text-sm font-medium text-gray-500  uppercase tracking-wider"> About </h2>
-                < p
-                  className={pStyle}> {userData.profile.description} </p>
-              </div>
-            )
-          }
-
-          {
-            userData?.profile?.contactInfo && (
-              <div>
-                <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Contact </h2>
-                < p
-                  className={pStyle}> {userData.profile.contactInfo} </p>
-              </div>
-            )
-          }
-
-          {
-            userData?.profile?.promptAnswers && (
-              <div className="mt-3"><
-                h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Prompt
-                Answers </h2>
-
-                < ul
-                  className="flex flex-wrap gap-2 mt-1">
-                  {
-                    userData.profile.promptAnswers.map((value, idx) => (
-                      <li
-                        key={idx}
-                        // className="px-3 py-1 text-sm bg-gray-100 rounded-full hover:bg-gray-200 transition"
-                      >
-                        • {value.prompt} {value.answer}
-                      </li>
-                    ))
-                  }
-                </ul>
-              </div>
-            )
-          }
-
-          {
-            images &&
-              <div className="mb-8">
-                {/*<h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Photos </h2>*/}
-                  <div className="grid grid-cols-3 gap-4 mb-4">
-                    {Array.from(new Set(images)).map((img, index) => ( // Set is a hack to avoid a bug where duplicates fill in images when we navigate different pages
-                      <div key={index}
-                           className="relative group aspect-square rounded-lg overflow-hidden border border-gray-200 ">
-                        <Image
-                          src={img}
-                          alt={`Uploaded image ${index + 1}`}
-                          width={150}
-                          height={150}
-                          className="h-full w-full object-cover"
-                        />
-                      </div>
-                    ))}
-                  </div>
-              </div>
-          }
-
-          {/*<div>*/
-          }
-          {/*  <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider">Creation Date</h2>*/
-          }
-          {/*  <p className={pStyle}>*/
-          }
-          {/*    {user.profile.createdAt}*/
-          }
-          {/*    {new Date(user.profile.createdAt).toLocaleDateString("en-US", {*/
-          }
-          {/*      year: "numeric",*/
-          }
-          {/*      month: "long",*/
-          }
-          {/*      day: "numeric",*/
-          }
-          {/*    })}*/
-          }
-          {/*  </p>*/
-          }
-          {/*</div>*/
-          }
-
-
         </div>
-
       </div>
 
     </article>