Spotlight website template gets bitten by Safari aspect-ratio bug

[hcszt]

What component (if applicable)

• URL for category: https://tailwindcss.com/plus/templates/spotlight
• Component name: Spotlight personal website template

Describe the bug
On resizing a browser window across the sm threshold the width of the photos is changed, however, the height is not (see attached image of Safari in “Responsive Design Mode”). This is less of an issue on the desktop rather than on handhelds when the screen is turned.

To Reproduce
Steps to reproduce the behavior:
(see above)

Expected behavior
The aspect ratio of the photos needs to stay the same.

Screenshots

Browser/Device (if applicable)

• OS: any Apple OS
• Browser: current Safari, likely also those before
• Version: 26.0.1 (21622.1.22.11.15) and accordingly on iOS, iPadOS

Additional context
This problem appears to be rather well-known, reports I found are from a few years ago, though. Adding max-sm:m-auto to the div container appears to fix it, however, I am not an expert on that and could not test alternative browsers.

While I am it it, some minor nitpicking:

• the content model of h? elements is “phrasing content”, however, you use a div element in Card.Link for Card.Title in src/components/Card.jsx, which is technically not correct. A span should do, shouldn't it?
• the portrait image on the about page, file src/app/about/page.jsx, has sizes="(min-width: 1024px) 32rem, 20rem". Strictly speaking, it should read sizes="(min-width: 1248px) 412px, (min-width: 1024px) calc(50vw - 212px), (min-width: 352px) 300px, calc(100vw - 52px)" 🤓. Anyway, the current version does not necessarily help web browsers in looking up the optimal image…

Thanks for your great work. :)