Theme detail page: screenshot overflows container at viewports between 672–1023px

[stultus]

The theme detail pages (/themes/<theme>/) render the screenshot with an inline w-3xl class while the parent container is max-w-2xl until the lg: breakpoint. Result: on every viewport between roughly 672px and 1023px wide, the screenshot extends past the right edge of its column.

Rendered HTML (example from any theme detail page, e.g. hugo-paper or the deploy preview at https://deploy-preview-706--hugothemes.netlify.app/themes/kavu/):

<div class="mx-auto pt-16 lg:pt-24 flex max-w-2xl lg:mt-0 lg:mr-0 lg:ml-18 lg:max-w-none lg:flex-none">
  <picture>
    ...
    <img class="w-3xl rounded-md shadow-2xl ring-1 ring-gray-900/10"
         src="..." alt loading="eager" width="640" height="427">
  </picture>
</div>

In Tailwind v4, w-3xl resolves to width: 48rem (768px). The parent's max-w-2xl is 42rem (672px). For viewports below lg (1024px), the parent is constrained but the child is forced to 768px, so the image hangs out 96px past the column.

Affects every theme; not specific to one screenshot or aspect ratio. More obvious on screenshots with true 3:2 dimensions because the rendered height is greater and the overflow region looks more substantial.

Possible fixes (any one):

• Replace w-3xl with max-w-3xl w-full so the image scales down to fit narrower parents.
• Move the breakpoint earlier (e.g. apply lg:max-w-none already at md).
• Drop the explicit width and rely on the width=… HTML attribute plus w-full max-w-3xl.

Happy to send a PR if a maintainer points me at the source template.

[stultus]

The earlier fix (lg:max-w-none → md:max-w-none) addressed the small-viewport case, but on laptop / desktop viewports the screenshot still overflows for a different reason in the same template.

At lg: and above, cmd/hugothemesitebuilder/build/site/layouts/single.html lays out two side-by-side columns inside max-w-7xl (1280px / 1216px after padding):

left col  max-w-2xl   = 672 px
gap       lg:ml-18    =  72 px
right col w-3xl       = 768 px (image)
─────────────────────────────────
total                 1512 px   (exceeds 1216 px content area)

Reproduced on the deploy preview at https://deploy-preview-706--hugothemes.netlify.app/themes/kavu/ in Firefox at typical laptop widths (1366–1536 px). The image extends 50–200 px past the visible page right edge, depending on viewport.

Possible fixes:

• Make the image column shrinkable at lg+: drop lg:flex-none or replace w-3xl with lg:w-auto lg:max-w-3xl.
• Reduce left column max-width at lg+: e.g. lg:max-w-xl instead of max-w-2xl.
• Bump the outer wrapper to xl:max-w-screen-2xl.