Remove gap between sidebar boxes (for POIs)

[JoeyStk]

Short description

With introducing the collapsible boxes to the page, event and POI form we created a gap between the boxes when certain boxes are collapsed. This is mainly due to two factors: a. using grid instead of flex, b. the two sidebars for medium and 4xl screens aren't wrapped inside one parent div. These changes are going to be relevant for all post types, however in this PR (at least up until now) I focused on POIs only. If we fixed everything for POI I will extend these changes to events and pages one by one.

For a graphical summary on what I tried to fix see the screenshots here:
Before:

After:

Proposed changes

• Using grid only for 3xl screens
• Add parent div for two sidebars (for medium and 4xl screens)
• Remove flex-auto for the editor so it doesn't create blank space
• Adjust spacing between the boxes

Side effects

While testing this, I didn't run into any. However I can't imagine that there are now, since this is a major change. So I would ask you to test this PR thoroughly 😊
Please also check if you can find classes, that aren't used anymore, so I can remove them :)

Resolved issues

Fixes: Parts of #2032

---

Pull Request Review Guidelines

[codeclimate]

Code Climate has analyzed commit 2b2ba3a and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 100.0% (50% is the threshold).

This pull request will bring the total coverage in the repository to 75.0% (0.0% change).

View more on Code Climate.

[MizukiTemma]

Thank you for PR 👍 Looks very nice 😃

Do we need an entry in changelog?

[seluianova]

No gap now ✅
But there is a regression change:
If I collapse some blocks and re-open form, blocks are reordered randomly.

It's not reproduced on develop branch - all blocks always retain their position.
Do we want and can avoid it?

UPD. it should probably be a "comment", not a "change request". But I don't know if I can change it already 🙈

[JoeyStk]

Thank you for your reviews!

@MizukiTemma I will add an entry to the changelog once I have extended this to events and pages :)
@selulanova This is expected behaviour, that was part of this issue. However since I created the PR we have added the option to switch off the automatic distribution of the boxes. I have rebased my branch now, which means the boxes shouldn't be automatically reorganized by default, but you could enable it in the user settings. As soon as the test run through you can test it again :)

[seluianova]

Thank you 👌
One more regression issue I have noticed:
If I minimize the window, boxes go down and gap between left and right columns is missed

[JoeyStk]

Oh, good catch. I don't know why I didn't see this. The gap-2 is of course not working anymore. I should have thought of that. I think it's fixed now :)

[timobrembeck]

Hmm, somehow I noticed problems on all tested screen resolutions...
In my opinion, the spacing between the boxes and the columns should be consistent. I think, 4rem looks better than 2rem, but the most important thing is that it's consistent.

1700px and below

1700px - 2100px

2100px and above

[JoeyStk]

Very good catch. Thank you for the detailed feedback. In some parts this goes beyond what I wanted to do with this PR and in other parts I created this issue during a rebase. I adjusted the spacing for all boxes and gaps to class category 4 (e.g. gap-4 or mb-4, =1rem). I was only able to double check if my changes work for screens smaller than 2100px. For screens above 2100px I can only test it earliest next week

[seluianova]

Looks good to me!

[timobrembeck]

Thanks! 👍

Now I cannot find anymore problems, looks good!
I would just reword the changelog entry.