fix(grid): fix stackable nested grid

[lubber-de]

Description

This PR reverts and corrects #1739 for stackable nested grids.
The margins on mobile screens for stackable grid has now been adjusted so it only takes place when a stackable grid is not nested in another grid or a segment.

Testcase

From #2263
https://jsfiddle.net/lubber/bkrqfnhv/16/

From #1739
https://jsfiddle.net/lubber/fv1hg0jm/23/

From #1907
https://jsfiddle.net/lubber/vqj0xdg1/22/

Closes

#2263
#1907

[hugopeek]

Hi @lubber-de, thanks for your efforts. I'm not sure if the variable you introduced is a safe solution. Doesn't that apply to all mobile grids now? Same goes for the !important classes. Although I'd love to see them go too, they might disrupt the balance in other scenarios.

I feel this is really an isolated bug inside nested stackable mobile grids. But I will test these changes out of course, to see what happens.

As a sidenote: the double gutter is not a design decision in SUI. See the comments ;)

Fomantic-UI/src/definitions/collections/grid.less

Lines 1721 to 1726 in 135cfd1

	/* Don't pad inside segment or nested grid */
	.ui.grid .ui.stackable.grid,
	.ui.segment:not(.vertical) .ui.stackable.page.grid {
	margin-left: -(@stackableGutter / 2) !important;
	margin-right: -(@stackableGutter / 2) !important;
	}

This is the original library with the same HTML:

https://jsfiddle.net/db7xuLgo/1/

[lubber-de]

I'm not sure if the variable you introduced is a safe solution. Doesn't that apply to all mobile grids now?

tbh, i wasn't really convinced myself, yes this would affect all mobile grids, if changed (that's why i kept the default value to the original 0)

Same goes for the !important classes. Although I'd love to see them go too, they might disrupt the balance in other scenarios.

From what i tested, those really were not necessary and removing them just fixed the the issue from #1739
I would appreciate if you could test more deeplyusing your projects 😉

I feel this is really an isolated bug inside nested stackable mobile grids.

Yes, the more i think about that, i also feel this way. The gutter should only be used if the stackable grid isnt nested. Tehre

But I will test these changes out of course, to see what happens.

❤️

As a sidenote: the double gutter is not a design decision in SUI. See the comments ;)

Yes, saw them :) But they meant to not pad when nested. The unnested .ui.stackable.grid 0 gutter seems to be meant for stackable grids which are not nested and a direct child of body (or at least not inside another grid/container/segment) ,i believe. (That's why i guessed the the "fingers covering smartphone sides")

This is the original library with the same HTML:

jsfiddle.net/db7xuLgo/1

That seems to work exactly like my fix in this PR 🙂
https://jsfiddle.net/lubber/bkrqfnhv/2/

[lubber-de]

The extra mobile gutter is now only used when not nested inside another grid or segment. This fixes all 3 issues now