Begin of the insertion#End of the insertion Begin of the deletion ####End of the deletion **Context**

We're increasingly using the [Primer Sub Header](https://qa.openproject-edge.com/lookbook/pages/patterns/sub_header) component in different pages. This provides the user with a toolbar with additional actions related to the objets contained below. Most pages have a very limited number of elements on the sub header; they work just as well in mobile devices. In others, some Meetings index pages, there are too many and it all appears squished.

This feature seeks to define mobile behaviour at a component level in order to avoid case-by-base overrides as much as possible.

Begin of the insertion## **Why we need this**

**To avoid crowded/squished sub-headers like this in mobile:**

<img class="image_resized op-uc-image op-uc-image_inline" style="width:310px;" src="https://community.openproject.org/api/v3/attachments/264138/content"> <img class="image_resized op-uc-image op-uc-image_inline" style="width:296px;" src="/api/v3/attachments/314831/content">

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

Begin of the insertionAll the following AC are for the Primer SubHeader component

**Desktop**

* All buttons will be enforceEnd of the insertion Begin of the deletion The Sub Header adaptsEnd of the deletion to Begin of the insertionshow an icon on desktop to which they can collapse to onEnd of the insertion mobile Begin of the insertion


**Mobile**End of the insertion Begin of the deletion screens:End of the deletion

* All buttons turn into icon buttons without labels, Begin of the insertion

* _\[Open\]End of the insertion and without trailing icons (eg. Begin of the insertiondropdown)_

End of the insertion Begin of the deletion dropdown)

End of the deletion * This is for both the left- and the right-side buttons

* Segmented controls turn into icon-only options

* All segmented controls in a SubHeader items must have an icon Begin of the insertionspecified (evenEnd of the insertion Begin of the deletion specified, evenEnd of the deletion in the desktop Begin of the insertionversion, see first AC)End of the insertion Begin of the deletion versionEnd of the deletion

* The center text will:

* If left slot is empty: go to left side and truncate to available width

* If left slot is not empty: go to a new line and is left aligned

* Search bar behaves as before Begin of the insertion(itEnd of the insertion Begin of the deletion (on mobile, the currently implementationEnd of the deletion takes the full length when clicked)

* If there are no actions on the left side of the SubHeader and no text on desktop, this space will remain empty on mobile too

* All actions that do not have a visible label need a title or ARIA label for accessibilty


Begin of the insertion##End of the insertion Begin of the deletion ####End of the deletion **Out of scope**

* These adaptation don&#39;t take the upcoming quick filters into account:

* <mention class="mention" data-id="57964" data-type="work_package" data-text="###57964">###57964</mention>

* ~~If there are badges (notably on the &#39;Filter&#39; tab) these will be displayed~~

* ~~The right-side actions (usually a solitary primary add &quot;+ {Object} button) will remain in its full form. They will not go into icon-only mode.~~


Begin of the insertion#End of the insertion **Tasks**

* [x] Discuss this in a UX/UI Open Door so the update mobile behaviour is discussed and agreed upon (scheduled)
* [ ] Update LookBook docs (Parimal)
* [ ] Add code examples to LookBook docs (Henriette)
* [ ] Update component behaviour (Henriette)

Begin of the insertion#End of the insertion Begin of the deletion ####End of the deletion **Where it&#39;s relevant**

* Project list

* Notification center

* Meetings mobile subheader

* Members list

* Administration settings:

* Users and Permissions → Users

* Authentication → OAuth Applications

* Authentication → SAML providers

* Authentication → OpenID providers

* Files → External files storages

* ...

* Notification center

* My Time tracker Begin of the deletion


#### **Why we need this**

**To avoid crowded/squished sub-headers like this in mobile:**

<img class="image_resized op-uc-image op-uc-image_inline" style="width:310px;" src="https://community.openproject.org/api/v3/attachments/264138/content"> <img class="image_resized op-uc-image op-uc-image_inline" style="width:296px;" src="/api/v3/attachments/314831/content">

**And go towards cleaner sub-headers like:**

<img class="image_resized op-uc-image op-uc-image_inline" style="width:303px;" src="/api/v3/attachments/435314/content"> <img class="image_resized op-uc-image op-uc-image_inline" style="width:306px;" src="/api/v3/attachments/435312/content"> <img class="image_resized op-uc-image op-uc-image_inline" style="width:297px;" src="/api/v3/attachments/435315/content">End of the deletion