'Automatic' main-wrapper margin may be applied incorrectly in some situations

[36degrees]

For most services, the spacing for the main wrapper depends on whether there is an element in the 'beforeContent' block (such as breadcrumbs or a phase banner)

In #1371 we made a change to try and make it easier to get this spacing correct, by automatically applying a greater margin if the main-wrapper is the :first-child of its parent.

There are situations where this doesn't apply though which we may not have considered. For example, some admin or case-working systems may have additional navigation inside the main block, which they want to remain close to the header.

In the case of GOV.UK Pay, who tested a pre-release of 3.0 for us, they have an interface that looks like this:

When they first upgraded, the new :first-child rule made it look like this:

In order to defend against this, they had to add their own :first-child rule to their stylesheet:

.govuk-main-wrapper--with-phase-banner:first-child {
  padding-top: 5px;
}

We should consider reverting this 'automatic' behaviour or perhaps making it something that can be opted into or opted out of through the use of a modifier.

Alternatively, in this specific case the secondary navigation should not be inside the main-wrapper (and thus the main-wrapper would not be a :first-child and would not get the increased padding, which seems correct) – in which case maybe we just need to add better guidance around what should go inside the main-wrapper.

[NickColley]

It does seem like a navigation bar like that should not be within the main element, what do you think @jonheslop?

I'd be OK with reverting this behaviour if we think it's going to cause grief for a lot of people.

[NickColley]

We've spoken to @jonheslop and we're going to go with a modifier that adds this automatic behaviour, to ensure we don't make breaking changes.

We'll will want to document this new feature by changing the current guidance: alphagov/govuk-design-system#887