Remove «limit-container-width»

We have over 100 places in our Haml where we do something like this:

- @content_class = "limit-container-width" unless fluid_layout

This changes the max-width of our main content area (for fixed layout) from its default 990px to go up to 1280px. In most places where we do it, we also render a left sidebar.

Example of a page with 990px max-width and a sidebar (Click to expand) image

http://gdk.test:3000/flightjs/Flight

So maybe at some point, this was necessary, but today, pages that use the default max-width and sidebar at the same time work just as well.

Example of a page with default max-width and a sidebar (Click to expand)

image

http://gdk.test:3000/flightjs/Flight/-/issues

In #382326 (comment 1265112008) is an example why this mix of different container width makes it hard to have a consistent placing of breadcrumbs and other navigational elements.

Goal

The goal is to remove the 990px overrides from the product to have a single fixed width of 1280px. Later we can utilize the space by e.g. refactoring the sidebar for issuables to be part of the content (like in MRs) and also we can make use of container queries to make better use of horizontal space available. Related to increasing the size of the container on some pages is Document max line length (a11y) (gitlab-org/gitlab-services/design.gitlab.com#1258)

The goal of this issue here is to explore if we can remove the Haml snippet above from all templates and use a single and stable container max-width throughout the app.

Edited by Austin Regnery