Set a max-width on the examples container as to more accurately reflect what it will look like

[joelanman]

From @davehaigh on June 29, 2018 14:20

the examples wrapper is filling the entire width of the screen so components are rendered a lot wider than they are normally seen e.g open https://design-system.service.gov.uk/components/panel/ on a desktop pc. The 'confirmation panel' is very wide when normally its only 960px max.

I think the container should have a max width of 960px as to more accurately reflect the prototype kit.

Copied from original issue: alphagov/govuk-design-system-backlog#142

[dashouse]

If we want to achieve this we should set the width of the column not the example container. At the moment the paragraphs, images, tables are all constrained to a maximum width to allow for the code blocks to be 100% and break out of the visible layout.

If we no longer want the code blocks to be 100% we can remove all of the individual constraints and set a max width on the column itself.

[kr8n3r]

they're only constrained in the page content, not the example (as that's using a different template

we should be able to add max width to the app-example-page in the example layout

[36degrees]

@dashouse do you think there's a clear change that we need to make here, or does this need more thinking?

[dashouse]

@36degrees More thinking definitely, it's really about whether or not we're trying to represent the components as they actually behave (in this case 100% wide) or how we want them to be used (simulate 2/3 column width).

I prefer as is because it it's more of a representation of what you're going to get and makes the examples that DO have limited widths more obvious.

This caused a big debate so would prefer to look into it...

[dashouse]

Closing this issue as it has been recorded in Trello and will be considered when we look at the the layout improvements to the Design System - for example https://github.com/alphagov/govuk-design-system/tree/center-layout

[dashouse]

Fixed by #687 (comment)