Field Layout column breakpoints don't match Craft's

[chrismlusk]

What are you trying to do?

When configuring a link type, you are able to set the desired number of columns in the Field Layout editor — just like in a native Craft entry type. However, I noticed the breakpoints for when these columns go into effect are different than Craft's.

For example, in a Hyper field where the linkValue and linkText are set to 50% wide, the CSS breakpoint for the Hyper CSS class width-50 does not take effect until 1535px. While the same thing in a native Craft entry type will take effect at 848px.

It would be nice if Hyper's breakpoints matched Craft's.

[engram-design]

What version of Craft are we talking about here?

Here's the Craft 4 native CSS rule we're basing it off:

@media only screen and (min-width: 1536px) {
    #content :not(.meta)>.flex-fields>:not(h2):not(hr):not(.line-break).width-50, #content :not(.meta)>.flex-fields>:not(h2):not(hr):not(.line-break):last-child.width-50, #content>.flex-fields>:not(h2):not(hr):not(.line-break).width-50, #content>.flex-fields>:not(h2):not(hr):not(.line-break):last-child.width-50, .draghelper.drag-in-content .flex-fields>:not(h2):not(hr):not(.line-break).width-50, .draghelper.drag-in-content .flex-fields>:not(h2):not(hr):not(.line-break):last-child.width-50 {
        width: 50%;
    }
}

And Hyper:

@media only screen and (min-width: 1535px) {
    .hyper-body-wrapper > .flex-fields > :not(h2):not(hr):not(.line-break).width-25, .hyper-body-wrapper > .flex-fields > :not(h2):not(hr):not(.line-break).width-50, .hyper-body-wrapper > .flex-fields > :not(h2):not(hr):not(.line-break):last-child.width-25, .hyper-body-wrapper > .flex-fields > :not(h2):not(hr):not(.line-break):last-child.width-50 {
        width: 50%;
    }
}

Essentially, we're just changing the parent selector to .hyper-body-wrapper > .flex-fields.

[chrismlusk]

Ah, sorry for forgetting that. I'm on Craft 5.6.1.

[engram-design]

Right, so they've changed their breakpoint to use calc() and now using CSS containers. This makes the breakpoint dynamic.

@container (min-width: calc(50rem)) {
    .flex-fields>:not(h2,hr,.line-break).width-50, .flex-fields>:not(h2,hr,.line-break):last-child.width-50 {
        width: 50%;
    }
}

We'll update accordingly.