Fewer: Overlapping feature image with text in category view when image is small

[dereksmart]

Minor styling issue in the Fewer theme category view when using small featured image.

Steps to replicate

• Create a few posts all having the the same category.
• Select feature images for all the posts.
• Use a small featured image in one of the posts (~300px height)
• View the category page on a wide screen. [SITE].com/category/your-category

Result

The image overflows over the taxonomy and title:

Expected

For the image container to have a minimum height, accommodating the smaller image.

• Follow-up ticket: 7156745-zd-a8c

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 7156745-zen

[cuemarie]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO Replicated as described:

Tested with this 320 × 183 file:

Switching to TT3 shows how TT3 handles the smaller featured image by containing it in the post template: https://github.com/Automattic/themes/assets/27249804/5c9558d9-9a5b-48a4-91ec-c6cdcf60044e

📌 ACTIONS

• Triaged

[davemart-in]

I believe this needs to be fixed in the Gutenberg repo. Is that right @annezazu?

[annezazu]

Noting that I replicated this (we need to confirm that first) on https://testttting179142315.wordpress.com/. Specifically, I switched to the Fewer theme, added a post using the Woo image above (small!), and added a post with a larger featured image. It all shows up correctly on the homepage:

On the category page, it overlaps https://testttting179142315.wordpress.com/category/uncategorized/

To fix this, if I add aspect ratio to the featured image, it corrects itself:

As a result, I'd recommend we add aspect ratio to the theme for featured images for these templates in the meantime. I also think it makes sense to open a Core issue but am curious to hear from @mikachan around what the report might be exactly. I'd rather open something more specific and couldn't find anything exactly similar, this was the closest: https://github.com/WordPress/gutenberg/issues/52238

[mikachan]

Hmm, I'm not sure if this is a Core issue, although I'm struggling to think of a case where this behaviour would be intentional!

Looking at the templates in Fewer, it looks like the post template markup is slightly different between index, home, archive, and search, so I'm wondering if a better fix for this would be to use the block markup used on the home template for every template, as that seems to work best for the featured image display.