From cddfd22727297ea83be8c9d8bff4fc6eeb719588 Mon Sep 17 00:00:00 2001
From: Ben Zhang <ben-z@users.noreply.github.com>
Date: Mon, 23 Sep 2024 01:08:27 -0700
Subject: [PATCH] Use w-auto instead of object-contain (#3230)

## Description

There was a bug in #3228 that caused the placeholder to be larger than
the image. For some reason, the dev preview does not show the blurred
placeholder.

left is dev, right is after static site generation (SSG).

<img width="2672" alt="image"
src="https://github.com/user-attachments/assets/d16f48b8-a6e7-4b45-9a1c-667c0f01240f">

This PR fixes this by adding `w-auto`. This will automatically resize
the width to maintain aspect ratio with the height. Because of this, we
can remove object-contain. object-contain was used to prevent image
stretching.

Before/after:
<img width="2531" alt="image"
src="https://github.com/user-attachments/assets/c50defd3-09d1-4763-a63e-9e77658afc7d">

## 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 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/blog-post.tsx b/components/blog-post.tsx
index 365d8be..ba9ea8c 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 object-contain'
+                        imgClassName='max-h-96 w-auto'
                     />
                 </PopoverTrigger>
                 <PopoverContent side='bottom' className="w-96 max-w-full">