mmintel/e-tib.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions 150 Packages Projects Releases Wiki Activity

fix(team): center and enlarge grid profile pictures on mobile viewports

Browse Source
This commit is contained in:
Marc Mintel
2026-08-12 23:27:15 +02:00
parent c89933a7d4
commit a33fc63bf8
2 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/blocks/TeamGrid.tsx
View File

@@ -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 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>
<div className="px-8 pb-8 relative flex-grow flex flex-col"> <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 */} {/* Overlapping Profile Picture with Shared Layout Animation (Centered & Larger on Mobile) */}
<m.div <m.div
layoutId={`team-avatar-${member.id}`} layoutId={`team-avatar-${member.id}`}
onClick={() => { onClick={() => {
@@ -181,7 +181,7 @@ export function TeamGrid({ members }: TeamGridProps) {
}} }}
onMouseEnter={() => handlePreload(imageUrl)} onMouseEnter={() => handlePreload(imageUrl)}
onTouchStart={() => 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 ? ( {imageUrl ? (
<> <>
@@ -189,7 +189,7 @@ export function TeamGrid({ members }: TeamGridProps) {
src={imageUrl} src={imageUrl}
alt={member.name} alt={member.name}
fill 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" className="object-cover object-[center_15%] transition-transform duration-500 group-hover/avatar:scale-105"
/> />
{/* Zoom Icon Overlay on Hover */} {/* Zoom Icon Overlay on Hover */}
@@ -230,7 +230,7 @@ export function TeamGrid({ members }: TeamGridProps) {
)} )}
{/* Contacts (Sticky at bottom) */} {/* 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 && ( {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"> <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"> <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">

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "e-tib-nextjs", "name": "e-tib-nextjs",
"version": "2.4.51", "version": "2.4.52",
"type": "module", "type": "module",
"private": true, "private": true,
"packageManager": "pnpm@10.18.3", "packageManager": "pnpm@10.18.3",