From 4bd0841e6ded31ea3c8ce906103628ea94e55d76 Mon Sep 17 00:00:00 2001
From: Ben Zhang <ben-z@users.noreply.github.com>
Date: Mon, 23 Sep 2024 11:20:38 -0700
Subject: [PATCH] Fix layout shift when loading blog post (#3232)

## Description

In https://github.com/WATonomous/infra-config/pull/3230, we used
`w-auto` to fix the blurred placeholder showing up behind the image.
However, this introduced a layout shift bug. Here's the before/after:


https://github.com/user-attachments/assets/391fc735-831f-4bbd-92b4-353a8a20b0ab

This PR sets the placeholder to be `contain`ed in the container and
reverts the w-auto change. This fixes the bug.

However, now, the click box of the image is the container instead of the
image itself. In cases where the container is larger than the image
(e.g. for square images), clicking beside the image opens the popup too.
This is a minor bug and there's no clear way to address both that issue
and the layout shift issue, let's just keep it as-is for now. We'll try
to use wide images when possible, which don't have this issue.


## Checklist
- [x] I have read and understood the [WATcloud
Guidelines](https://cloud.watonomous.ca/docs/community-docs/watcloud/guidelines)
- [x] I have performed a self-review of my code
---
 components/blog-post.tsx | 2 +-
 components/picture.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/blog-post.tsx b/components/blog-post.tsx
index ba9ea8c..365d8be 100644
--- a/components/blog-post.tsx
+++ b/components/blog-post.tsx
@@ -112,7 +112,7 @@ export function BlogPostHeader() {
                     <Picture
                         image={titleImage}
                         alt={titleImageAttribution}
-                        imgClassName='max-h-96 w-auto'
+                        imgClassName='max-h-96 object-contain'
                     />
                 </PopoverTrigger>
                 <PopoverContent side='bottom' className="w-96 max-w-full">
diff --git a/components/picture.tsx b/components/picture.tsx
index c4d9738..4510822 100644
--- a/components/picture.tsx
+++ b/components/picture.tsx
@@ -41,7 +41,7 @@ export default function Picture({
   )}")`;
 
   const placeholderStyle = {
-    backgroundSize: "cover",
+    backgroundSize: "contain",
     backgroundPosition: "50% 50%",
     backgroundRepeat: "no-repeat",
     backgroundImage,