From 943dfffa47d3c036b847fa2b57eb64644ba8ec09 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Tue, 10 Nov 2026 23:07:52 +0100
Subject: [PATCH 1/4] fix: center the profile image and username on mobile

---
 frontend/src/components/profile/ProfileHeader.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/profile/ProfileHeader.tsx b/frontend/src/components/profile/ProfileHeader.tsx
index e1b4483..edb9802 100644
--- a/frontend/src/components/profile/ProfileHeader.tsx
+++ b/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>
     </>
   );

From bcbb6f0fb02bd32df161501b96994358492b2c46 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Tue, 10 Nov 2026 23:11:19 +0100
Subject: [PATCH 2/4] fix: align the profile gallery section on mobile

---
 frontend/src/components/gallery/GalleryCard.tsx | 2 +-
 frontend/src/pages/ProfilePage.tsx              | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/gallery/GalleryCard.tsx b/frontend/src/components/gallery/GalleryCard.tsx
index 9866b24..92707a9 100644
--- a/frontend/src/components/gallery/GalleryCard.tsx
+++ b/frontend/src/components/gallery/GalleryCard.tsx
@@ -16,7 +16,7 @@ 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-6 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]">
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index 8296572..283f9f7 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/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 ? (

From d05b40ea04f36684404397442b5314aef3894ea0 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Tue, 10 Nov 2026 23:13:51 +0100
Subject: [PATCH 3/4] fix: correct gallery card width above the mobile
 breakpoint

---
 frontend/src/components/gallery/GalleryCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/gallery/GalleryCard.tsx b/frontend/src/components/gallery/GalleryCard.tsx
index 92707a9..2fc92a5 100644
--- a/frontend/src/components/gallery/GalleryCard.tsx
+++ b/frontend/src/components/gallery/GalleryCard.tsx
@@ -16,7 +16,7 @@ export default function GalleryCard({
   return (
     <Link
       to={`/galleries/${id}`}
-      className="block w-full sm:w-6 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]">

From 80ecb51c07c15064df875fdedd8e610e07bcf6bd Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Tue, 10 Nov 2026 23:21:51 +0100
Subject: [PATCH 4/4] fix: scale gallery cover height with card width

---
 frontend/src/components/gallery/GalleryCard.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/gallery/GalleryCard.tsx b/frontend/src/components/gallery/GalleryCard.tsx
index 2fc92a5..82660eb 100644
--- a/frontend/src/components/gallery/GalleryCard.tsx
+++ b/frontend/src/components/gallery/GalleryCard.tsx
@@ -19,17 +19,17 @@ export default function GalleryCard({
       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=""