CSS grid bug (affects Horizon)

Online Store and Theme Development
1

Short description of issue

CSS grid wrapper layout may be broken by long words in children.

Link to Shopify Store

Reproduction steps

Product page “Page info” section has a display: grid; wrapper.
On moderate desktop screens it uses this layout:

@media screen and (min-width: 750px) {
  .product-information__grid:not(.product-information--media-none).product-information--media-left {
    grid-template-columns: 1fr min(50vw, var(--sidebar-width)); /* uses min, does not have problem */
  }
}

However, on wider screens it becomes:

@media screen and (min-width: 1200px) {
  .product-information__grid:not(.product-information__grid--half,.product-information--media-none).product-information--media-left {
    grid-template-columns: 2fr 1fr; /* uses fr only, prone to problem */ 
  }
}

And here it may hit the bug – CSS grid doesn't support word-wrap, overflow-wrap and hyphens properties · Issue #46 · rachelandrew/gridbugs · GitHub (has some workarounds)

If product description contains very long word, grid layout is calculated as if it never wraps.
Store owner copy-pasted a text containing   instead of spaces into product description.

Additional info

Horizon is ver 4.1.1, code is this:

Decided to post it here since may be of value to other theme developers using CSS grids.

@Alan_G – sorry for pinging you, but since I only have dev stores, can’t leave a review for Horizon in theme store.

What type of topic is this

Bug report
General discussion

2

Hey @tim_tairli -

Thanks for the detailed report. I confirmed the large-screen grid can be expanded by unbreakable content and have raised this internally

In the meantime, could you try using minmax(0, 2fr) minmax(0, 1fr)—reversed for media-right— and let me know if that resolves it?

One quick housekeeping note too: pinging folks who haven’t joined a conversation is generally against our Code of Conduct. I understand wanting to get this looked at, though, so no worries this time.

Appreciate you flagging this!

4

Yes, using a function, like minmax solves the problem as far as my testing goes and this is what I’ve recommended in my post on merchants forum.

Can probably keep just 2fr on media column as possibility of have very long words there is negligible, I guess.

As for pinging – yes, I am well aware, however last time I’ve reported a bug in Horizon it was you who picked it up, so I’ve hoped for some lenience here :slight_smile:

5

Glad to hear minmax works, @tim_tairli - and no worries, happy to help with this! Just confirming I’ve logged this on our end as possible bug (Don’t want to say it is one definitively before we have time to take a closer look, but I’m leaning towards it like you mentioned :sweat_smile: ). I’ll keep you updated here once I get more info - thanks again for the report.