Twenty Nineteen: Container content cut off on the right for specific browser widths

[arunsathiya]

Originally reproduced here: ​https://github.com/Automattic/jetpack/issues/11058

Steps to reproduce:

• Install Twenty Nineteen on a site
• Create a post or a page
• Write content (or, what works best for reproducing is when one is using Jetpack's tiled gallery with circles layout)
• Add a few images on that tiled gallery

What is expected?

The images appear in circles layout in full

What happens instead?

A few images are cut off, on the right

Notes:

After a bit of investigation on that Jetpack issue, the issue seems to be specific to this CSS declaration:

@media only screen and (min-width: 1168px) {
  .entry .entry-content > *,
  .entry .entry-summary > * {
    max-width: calc(6 * (100vw / 12) - 28px);
  }
}

It seems to impact all containers at specific browser widths.

[arunsathiya]

Issue with Twenty Nineteen theme indicating container content cut off on the right

[arunsathiya]

Issue with Twenty Nineteen theme indicating container content cut off on the right

[laurelfulford]

Thanks for reporting this issue, @arunsathiya!

I was able to recreate, at browser sizes between about 1330px and 1167px wide.

I'm not really sure the best fix here. If it's specific to a Jetpack Gallery type, it's probably best fixed ​here. But if this is affecting other embeds, and can be fixed on the theme level, in the theme itself makes sense.

I think this one needs some more investigating to see if it's any wider reaching.