From 1c3918d9e31ee422434940dd1d53f30cfcf98161 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Wed, 12 Aug 2026 23:27:15 +0200
Subject: [PATCH] fix(team): center and enlarge grid profile pictures on mobile
 viewports

---
 components/blocks/TeamGrid.tsx | 10 +++++-----
 package.json                   |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/blocks/TeamGrid.tsx b/components/blocks/TeamGrid.tsx
index e712ba0d8..0fbd089d2 100644
--- a/components/blocks/TeamGrid.tsx
+++ b/components/blocks/TeamGrid.tsx
@@ -171,8 +171,8 @@ export function TeamGrid({ members }: TeamGridProps) {
                   <div className="absolute inset-0 opacity-[0.025] pointer-events-none" style={{ backgroundImage: "url('data:image/svg+xml,%3Csvg width=\\'20\\' height=\\'20\\' viewBox=\\'0 0 20 20\\' xmlns=\\'http://www.w3.org/2000/svg\\'%3E%3Crect width=\\'1\\' height=\\'1\\' fill=\\'%23000000\\'/%3E%3C/svg%3E')" }} />
                 </div>
 
-                <div className="px-8 pb-8 relative flex-grow flex flex-col">
-                  {/* Overlapping Profile Picture with Shared Layout Animation */}
+                <div className="px-6 sm:px-8 pb-8 relative flex-grow flex flex-col items-center md:items-start text-center md:text-left">
+                  {/* Overlapping Profile Picture with Shared Layout Animation (Centered & Larger on Mobile) */}
                   <m.div 
                     layoutId={`team-avatar-${member.id}`}
                     onClick={() => {
@@ -181,7 +181,7 @@ export function TeamGrid({ members }: TeamGridProps) {
                     }}
                     onMouseEnter={() => handlePreload(imageUrl)}
                     onTouchStart={() => handlePreload(imageUrl)}
-                    className="w-32 h-40 md:w-36 md:h-44 rounded-2xl overflow-hidden border-4 border-white shadow-xl bg-white relative -mt-20 md:-mt-24 mb-6 group-hover:-translate-y-2 transition-transform duration-500 cursor-pointer group/avatar"
+                    className="w-36 h-48 sm:w-40 sm:h-52 md:w-36 md:h-44 mx-auto md:mx-0 rounded-2xl overflow-hidden border-4 border-white shadow-xl bg-white relative -mt-20 md:-mt-24 mb-6 group-hover:-translate-y-2 transition-transform duration-500 cursor-pointer group/avatar"
                   >
                     {imageUrl ? (
                       <>
@@ -189,7 +189,7 @@ export function TeamGrid({ members }: TeamGridProps) {
                           src={imageUrl}
                           alt={member.name}
                           fill
-                          sizes="(max-width: 768px) 128px, 144px"
+                          sizes="(max-width: 768px) 160px, 144px"
                           className="object-cover object-[center_15%] transition-transform duration-500 group-hover/avatar:scale-105"
                         />
                         {/* Zoom Icon Overlay on Hover */}
@@ -230,7 +230,7 @@ export function TeamGrid({ members }: TeamGridProps) {
                   )}
 
                   {/* Contacts (Sticky at bottom) */}
-                  <div className="mt-auto pt-6 border-t border-neutral-100 flex flex-col gap-4">
+                  <div className="mt-auto pt-6 border-t border-neutral-100 flex flex-col gap-4 w-full text-left">
                     {member.email && (
                       <a href={`mailto:${member.email}`} className="group/link flex items-center gap-4 text-text-secondary hover:text-primary transition-colors font-medium cursor-pointer">
                         <div className="w-10 h-10 rounded-xl bg-neutral-50 flex items-center justify-center text-neutral-400 group-hover/link:bg-primary/10 group-hover/link:text-primary transition-colors border border-neutral-100">
diff --git a/package.json b/package.json
index 4bef6a0af..443306ce0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "e-tib-nextjs",
-  "version": "2.4.51",
+  "version": "2.4.52",
   "type": "module",
   "private": true,
   "packageManager": "pnpm@10.18.3",