### Context

Today, OpenProject has six viewport ranges:

* 320 px – 544 px (mobile)
* 544 px – 768 px (tablet portrait)
* 768 px – 1200 px (tablet landscape)
* 1200 – 1280 px (desktop)
* 1280 + (wide)

Primer uses a much simpler system with three [viewport ranges](https://primer.style/foundations/layout#viewport-ranges):

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Viewport range</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Width range</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Columns</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Description</strong></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">narrow</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p">&lt; 768px</p></td><td class="op-uc-table--cell"><p class="op-uc-p">1</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Supports a single-column layout. Also known as “mobile”.</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">regular</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p">&gt;= 768px</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Up to 2</p></td><td class="op-uc-table--cell"><p class="op-uc-p">All desktop-friendly patterns start at this range.</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">wide</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p">&gt;= 1400px</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Up to 3</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Optional range when a 3rd layout column is needed.</p></td></tr></tbody></table></figure>

Primer also defines a set of finer, [more graduated breakpoints](https://primer.style/foundations/layout#breakpoints) that are used to adapt specific components if needed. These align more with what we have at OP at the moment:

* 320 px
* 544 px
* 768 px
* 1012 px
* 1280 px
* 1400 px

However, these do _not_ seem to represent viewport ranges, but simply breakpoints that can be used to fine-tune specific scenarios. According to Primer docs:

> While viewport ranges should be used for distinguishing responsive layout adaptations, custom media queries built with these breakpoints values can be used internally for adjusting any specific responsive scenarios that require a fine-tune level of control.

### Begin of the insertion**Acceptance criteria**End of the insertion Begin of the deletion SimplificationEnd of the deletion

Begin of the insertion* Use the viewport ranges proposed by Primer as criteria for the layout, therefore from &lt; 768px (tabletsEnd of the insertion Begin of the deletion The OP tablet portrait range (544 px – 768 px) might not be needed. 

Right now, if we take that rangeEnd of the deletion and Begin of the insertionmobiles)End of the insertion Begin of the deletion manually hideEnd of the deletion the Begin of the insertionsidebar willEnd of the insertion Begin of the deletion sidebar, we have something that _looks_ like a mobile page but with larger margins. 

If we align with Primer&#39;s 3-range model, we might justEnd of the deletion be Begin of the insertionhidden by default.
* We alignEnd of the insertion Begin of the deletion ableEnd of the deletion to Begin of the deletion serveEnd of the deletion the Begin of the insertionbreakpoints proposed by Primer and analyse in each page/feature if the design adapts to every single oneEnd of the insertion Begin of the deletion mobile version up until 768px, without a &quot;break&quot; at 544px. 

The goalEnd of the deletion of Begin of the insertionthem or only some of them.
* We consider that the the content width in both 768px and 544px (as the sidebarEnd of the insertion Begin of the deletion this work packageEnd of the deletion is Begin of the insertionhidden) is pretty similar and leaves opportunityEnd of the insertion to Begin of the insertiondesign from 1012px to 544px inEnd of the insertion Begin of the deletion discuss what our options are, what the implications ofEnd of the deletion a Begin of the insertionsingle style.
End of the insertion Begin of the deletion change might be and finally make a decision. 

### **Acceptance criteria**

End of the deletion * Begin of the insertionWith the current implementation there is some small spacings differences between tablet and mobile which will be accepted.End of the insertion Begin of the deletion _tbd_End of the deletion