CSS issues (lists, menu toggle, search box)

[idiosyn]

Here are some style-related issues I found.

Lists

These lines:

ul, ol {
  margin: 0 0 1.5em 3em;
}

from https://github.com/NHSLeadership/nightingale-2-0/blob/686013a536b25ad5f4d632fca0185e8d15c686e7/layouts/default.scss#L440 and https://github.com/NHSLeadership/nightingale-2-0/blob/686013a536b25ad5f4d632fca0185e8d15c686e7/style.css#L451 are creating an indentation that looks weird in some cases. This indentation currently doesn't appear on https://www.nhs.uk/.

Removing those lines or setting margin-left to 0 apparently fix the problem.

Menu toggle

These lines:

.nhsuk-header__menu-toggle {
  margin-right: 0;
}

from https://github.com/NHSLeadership/nightingale-2-0/blob/686013a536b25ad5f4d632fca0185e8d15c686e7/assets/scss/header.scss#L58 and https://github.com/NHSLeadership/nightingale-2-0/blob/686013a536b25ad5f4d632fca0185e8d15c686e7/style.css#L11135 are making the menu button overlap the search button.

Removing those lines apparently fix the problem.

Search box

On desktop, the search box looks a bit off. See the comparison below.

NHS.UK:

Nightingale 2.0:

Also, most properties for .autocomplete__input are being overridden.

For example, on mobile, the height of the text input for search is wrong.

The 40px from https://github.com/NHSLeadership/nightingale-2-0/blob/686013a536b25ad5f4d632fca0185e8d15c686e7/style.css#L7195 overrides the 52px from https://github.com/NHSLeadership/nightingale-2-0/blob/686013a536b25ad5f4d632fca0185e8d15c686e7/style.css#L5806

And the result is this:

[tblacker7]

Some of these are inherited from underscores, some are conflicts between standard header and inverted. Changes added to mitigate and simplify.