[4.0] Fix form grid layout

[eopws]

Pull Request for Issue #33480 and #34081.

Summary of Changes

Added the logic of addin' horizontal scrollbar to grid form when not havin' enough width for elements

Testing Instructions

Create a menu item of "Category Blog" type and go to the "Blog Layout" tab

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

[chmst]

Sorry, no, Horizontal scrolling is not responsive. The line must break, as it does on smaller devices.

[eopws]

Sorry, no, Horizontal scrolling is not responsive. The line must break, as it does on smaller devices.

Ok, I'm gonna fix it

[eopws]

Through few hours of searchin the only one solution that I found is to reduce count of columns, but I'm not sure if it is a good architecture solution (change layout of the whole template in order to make one page look better?)...

I would love to see a comment from a more experienced developer than me...

[ghost]

Should this pull request get a test?

[ghost]

I have tested this item ✅ successfully on 084a140

Thanks for the hint @drmenzelit at #34450 (comment)

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34145.}

[eopws]

Sorry for missing.

According to this issue #34450 it's okay to add horizontal scroll.

But according to this comment #34145 (comment) it's better to break line.

So which is better?

[drmenzelit]

Through few hours of searchin the only one solution that I found is to reduce count of columns, but I'm not sure if it is a good architecture solution (change layout of the whole template in order to make one page look better?)...

I would love to see a comment from a more experienced developer than me...

This is the better solution

[eopws]

Please test new patch.

This is how it looks on my PC

[ghost]

This is how it looks like using latest prebuilt package (custom update server) but i don't know sure if this is now an successfully test:

1500 width:

iPad landscape:

[angieradtke]

I think the problem is more complex than the fix .
You changed:

` @include media-breakpoint-up(md) {

grid-template-columns: repeat(4, 1fr);
grid-gap: 1rem 2rem;

}
'

from 4 to 2 columns. But what is width the larger one. This view is broken as well

@include media-breakpoint-up(lg) {
    --span-5: span 5;

    grid-template-columns: repeat(6, 1fr);
  }

The leading-Class column is problem because it goes over two grid column.
@ciar4n , can you take a look please.

[RickR2H]

I added a PR which I think addresses the same issue as this PR. Please toke a look at my PR an see it id addresses the issue and if it is fixed? #35823. If so, then we can close this PR.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34145.}