Grid with inputs has incorrect gap on mobile devices

[ekerstein]

Describe the issue

Current Behavior

When a grid with inputs is viewed on a mobile device, the vertical spacing appears too wide and does not match with the same display of the non-grid version of the inputs.

Expected Behavior

Whether inputs are in a grid or not should not affect their vertical spacing on mobile devices.

Reproduction URL

• Inputs inside of grid (view it on a mobile width): https://4mrnhq.csb.app/#:~:text=Range%20slider-,Valid,-Invalid
• Inputs not inside of grid (view it on a mobile width): https://4mrnhq.csb.app/#:~:text=Search-,Text,-Curabitur%20consequat%20lacus

Images

Inputs inside of grid

Inputs not inside of grid

Grid gap for inputs on mobile

Potential solution

The issue appears to be that grid-row-gap is applied on mobile widths to grids. Here's a potential solution that is working for me when I test it:

.grid {
    grid-row-gap: 0;
}
@media (min-width: 768px) {
    .grid {
        grid-row-gap: var(--pico-grid-row-gap);
    }
}

[lucaslarroche]

@ekerstein, The grid-row-gap is helpful for elements other than form elements, like buttons. Also, because we have a --pico-grid-row-gap CSS var, it's easy for every website to tweak the behavior.

But I agree, the default behavior with input should be better because form elements are probably the most useful thing in Pico.

Maybe we could reset the margin-bottom for form elements on small screens: https://codepen.io/lucastests/pen/qBvvNdO

[ekerstein]

@lucaslarroche Thank you for working on this, it's really appreciated.

Unfortunately, changing the margin didn't entirely fix the issue and has introduced two regressions that I was able to find. These issues didn't exist in 2.0.3.

I've created a codepen with examples: https://codepen.io/ekerstein/pen/RwONJKG

Small text overlaps input

No spacing between grids

Example 1:

Example 2 - Viewable on the example page

[lucaslarroche]

@ekerstein thank you for the tests. For now I will simply revert my solution in a new patch. I will investigate later.