Resolve: "Header content alignment with Set-up page"

About the issue

The header was too wide, it should have been 840px on desktop, but instead it was 880. This is because the padding wasn't included.

This was also the case in several locations, so this merge request snowballed quite a bit.

Testing

This affects most, if not all, routes of the app. I've tried to test all routes I could think of, but it's possible I may have forgotten something

Summary of changes

• As I was re-using max-width: var(--rcc-content-width); width: 100%; padding-left: var(... a lot, I created a css class for this to be reused: .centered-content
• For the help page, because it looked really bad with width: 100%, I added in a css file just for that component with width: auto, to override the width: 100%1
• Fixed some leaky CSS from the full-page-layout component, because of the ViewEncapsulation.None, the .container class was being applied to the text input on the questionnaire builder
• Changed the reduced-full-page css so that the content width isn't set on the layout level, but rather on the component level using the layout, this fixed, for example, the layout with the session data view:

Before

After

This also effects:

• Settings page
• backup page
• Some modal views

Closes #1045 (closed)