improve the mobile profile page layout

frontend/src/components/gallery/GalleryCard.tsx

@@ -16,20 +16,20 @@ export default function GalleryCard({
   return (
     <Link
       to={`/galleries/${id}`}
-      className="block w-64 max-w-full min-w-0 rounded-xl focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6]"
+      className="block w-full sm:w-64 max-w-full min-w-0 rounded-xl focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6]"
     >
       {imageUrls.length === 0 ? (
-        <div className="flex h-40 w-full items-center justify-center rounded-xl bg-gray-200 dark:bg-[#302e2a]">
+        <div className="flex aspect-[8/5] w-full items-center justify-center rounded-xl bg-gray-200 dark:bg-[#302e2a]">
           <span className="text-gray-500 dark:text-gray-400">No image yet</span>
         </div>
       ) : imageUrls.length === 1 ? (
         <img
           src={imageUrls[0]}
           alt=""
-          className="h-40 w-full rounded-xl object-cover"
+          className="aspect-[8/5] w-full rounded-xl object-cover"
         />
       ) : imageUrls.length === 2 ? (
-        <div className="grid h-40 grid-cols-2 overflow-hidden rounded-xl">
+        <div className="grid aspect-[8/5] grid-cols-2 overflow-hidden rounded-xl">
           {imageUrls.map((imageUrl) => (
             <img
               key={imageUrl}
@@ -40,7 +40,7 @@ export default function GalleryCard({
           ))}
         </div>
       ) : (
-        <div className="grid h-40 grid-cols-[1.6fr_1fr] grid-rows-2 overflow-hidden rounded-xl">
+        <div className="grid aspect-[8/5] grid-cols-[1.6fr_1fr] grid-rows-2 overflow-hidden rounded-xl">
           <img
             src={imageUrls[0]}
             alt=""

frontend/src/components/profile/ProfileHeader.tsx

@@ -60,7 +60,7 @@ export default function ProfileHeader({
         />
       </div>
 
-      <div className="picture-and-username relative z-10 -mt-16 ml-20 flex items-center gap-6">
+      <div className="picture-and-username relative z-10 -mt-16 flex flex-col items-center gap-3 px-4 sm:ml-20 sm:flex-row sm:gap-6 sm:px-0">
         <button
           type="button"
           aria-label="Change profile image"
@@ -98,7 +98,7 @@ export default function ProfileHeader({
           className="hidden"
         />
 
-        <h1 className="font-bold text-4xl mt-16">{username}</h1>
+        <h1 className="min-w-0 max-w-full wrap-anywhere text-center text-3xl font-bold sm:mt-16 sm:text-left sm:text-4xl">{username}</h1>
       </div>
     </>
   );

frontend/src/pages/ProfilePage.tsx

@@ -138,7 +138,7 @@ export default function ProfilePage() {
         onCoverImageChange={handleCoverImageChange}
         onProfileImageChange={handleProfileImageChange}
       />
-      <div className="flex items-center gap-4 ml-20 mt-20">
+      <div className="ml-4 mr-4 mt-10 flex items-center gap-4 sm:ml-20 sm:mr-0 sm:mt-20">
         <h1 className="text-3xl font-light">Your Gallery</h1>
 
         <button
@@ -156,7 +156,7 @@ export default function ProfilePage() {
           onCreated={refetchGalleries}
         />
       )}
-      <div className="mt-6 mb-16 ml-20">
+      <div className="ml-4 mr-4 mt-6 mb-16 sm:ml-20 sm:mr-0">
         {isLoading ? (
           <p>Loading galleries...</p>
         ) : error ? (