Skip to content

Resolve collapsing margin between `.layout-page` and `.content-wrapper-margin`

Description

(Identified in !63254 (comment 593232261))

There's a number of things which should cause a page-wide top margin (i.e. performance bar, or system header, or both). In this MR !63254 (merged) we've decoupled the margin from our content-wrapper class since the content-wrapper is already coupled to a number of other things. But! Some of this top margin is actually defined and handled by .layout-page

https://gitlab.com/gitlab-org/gitlab/blob/4f203fcff908bca63692250ac2ccb960e88fe61d/app/assets/stylesheets/framework/system_messages.scss#L67

Proposal

Let's have a single class that is responsible for this page-wide top margin (and also bottom margin if there's a system footer).

Implementation notes

It seems that .layout-page is used to wrap the sidebar and the .content-wrapper:

https://gitlab.com/gitlab-org/gitlab/blob/4f203fcff908bca63692250ac2ccb960e88fe61d/app/views/layouts/_page.html.haml#L2

Maybe we just want to move .content-wrapper-margin over to .layout-page (along with the .layout-page specific margin rules)?