### Begin of the insertion

End of the insertion Begin of the deletion Goal

The goal of this feature is to:

* Decide if we want to adopt GitHub's limited-width (centered max-width) approach to some pages (see [Context](https://community.openproject.org/#Context) below)
* If so, decide:
* which features or pages will have a max-width (Meetings for example)
* which ones will not
* how to go about it (max-width, breakpoints...)
* when to prioritise it

End of the deletion ### **Acceptance criteria**

For the identified pages (to be done),

* Define a horizontal width limit for the main content area Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion * _\[open\] A singular max-width (1216px like GitHub?) or multiple breakpoints based on available space?_ Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion * The right pane is contained in this centered content area Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion * Begin of the deletion _\[open\] Make this an option for the main content, since it doesn't apply to all pages_
* End of the deletion The sidebar remains on the far left edge Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion * The top navigation bar remains 100% width Begin of the insertion

* The max-width limit should only apply to certain pages or types of pages:

* _\[open\] Which ones?_


End of the insertion Begin of the deletion

End of the deletion ### **Visuals**

**Meetings module in a very wide screen with max-width in place:**

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74814/content">

### Context

Begin of the insertionSome components in OpenProject (such as BoxTables) fill up all available width.End of the insertion In very Begin of the insertionlarge monitors, this is very wide. Things that are tooEnd of the insertion wide Begin of the insertionaffect legibility, sinceEnd of the insertion Begin of the deletion or high resolution screens,End of the deletion the Begin of the insertioneye cannot effectively scan.&nbsp;End of the insertion Begin of the deletion browser width can be substantially larger than the standard 1280px width we normally design around for desktop.End of the deletion

Some pages benefit from having a max-width to the main content area. Blocks of texts can become illegible (or at least very difficult to read) without columns to better guide the eye.

GitHub have a center-aligned main content area in some pages, with a max-width of 1216 px.

**A repository home, for example:**

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74810/content">

**Or a pull request:**

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74811/content">

Not all pages have this max-width limit

**Actions are full-width:**

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74812/content">

**As are notifications:**

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74813/content">