#### **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 deletion **⚠️ The scope is limited: this feature only concerns currently-implemented subheaders, not future variations. We will have to adapt the mobile behaviour again once, for example, quick filters are implemented.**

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

The Sub Header adapts to mobile screens:

* Begin of the insertionAll buttonsEnd of the insertion Begin of the deletion The actions on the left side alwaysEnd of the deletion turn into icon buttons without Begin of the insertionlabels, and without trailing icons (eg. dropdown)

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

* Segmented controls also go into icon-only modeEnd of the insertion Begin of the deletion labelsEnd of the deletion

* If there are badges (notably on the 'Filter' Begin of the insertiontab)End of the insertion Begin of the deletion tab),End of the deletion these will be displayed

* All subheader items must have an icon specified, even if the desktop version does not show an icon (eg. 'Filter')

* Currently, three types of actions have been identified:

* Search (on mobile, the currently implementation takes the full length when clicked)

* Filter

* Segmented controls

* Begin of the insertion_\[open\] Can segmented controls be converted to drop-down on mobile, like on the GitHub notification center?_

* ~~AEnd of the insertion Begin of the deletion AEnd of the deletion new slot needs tobe added to it and segmented controls must also have icons in their desktop Begin of the insertionvariant.~~End of the insertion Begin of the deletion variant.End of the deletion

* Buttons

* If there Begin of the insertionareEnd of the insertion Begin of the deletion wereEnd of the deletion no actions on the left side of the Begin of the insertionSubHeaderEnd of the insertion Begin of the deletion Sub HeaderEnd of the deletion on desktop, this space will remain empty on mobile too

* Begin of the insertion~~TheEnd of the insertion Begin of the deletion TheEnd of the deletion right-side actions (usually a solitary primary add "+ {Object} button) will remain in its full form. They will not go into icon-only Begin of the insertionmode.~~End of the insertion Begin of the deletion mode.End of the deletion

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


#### **Out of scope**

* These adaptation don't take the upcoming quick filters into account:

* ###57964


**Tasks**

* Begin of the insertion[ ] Discuss this in a UX/UI Open Door soEnd of the insertion Begin of the deletion [x] Mobile behaviour forEnd of the deletion the Begin of the insertionupdate mobile behaviourEnd of the insertion Begin of the deletion Sub headerEnd of the deletion is Begin of the insertiondiscussedEnd of the insertion Begin of the deletion definedEnd of the deletion and agreed upon Begin of the insertion(scheduled)End of the insertion
* [ ] Begin of the insertionUpdateEnd of the insertion Begin of the deletion TheEnd of the deletion LookBook Begin of the insertiondocs (Parimal)
* [ ] AddEnd of the insertion Begin of the deletion documentation is updated withEnd of the deletion code examples Begin of the insertionto LookBook docs (Henriette)End of the insertion
* [ ] Begin of the insertionUpdate componentEnd of the insertion Begin of the deletion The mobileEnd of the deletion behaviour Begin of the insertion(Henriette)End of the insertion Begin of the deletion is implemented as documented in all relevant pages (see below)End of the deletion

Begin of the insertion####End of the insertion **Where it'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 Begin of the insertion

* My Time trackerEnd of the insertion


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

Begin of the insertion**ToEnd of the insertion Begin of the deletion ToEnd of the deletion avoid crowded/squished sub-headers like this in Begin of the insertionmobile:**End of the insertion Begin of the deletion mobile:End of the deletion

<img class="image_resized op-uc-image op-uc-image_inline" Begin of the insertionstyle="width:310px;"End of the insertion Begin of the deletion style="width:398px;"End of the deletion src="https://community.openproject.org/api/v3/attachments/264138/content"> Begin of the insertion<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 insertion**AndEnd of the insertion Begin of the deletion AndEnd of the deletion go towards Begin of the insertioncleaner sub-headers like:**End of the insertion Begin of the deletion something like this:End of the deletion

<img class="image_resized op-uc-image op-uc-image_inline" Begin of the insertionstyle="width:303px;" src="/api/v3/attachments/435314/content">End of the insertion Begin of the deletion style="width:467px;" src="/api/v3/attachments/310839/content">

And from this:

End of the deletion <img class="image_resized op-uc-image op-uc-image_inline" Begin of the insertionstyle="width:306px;" src="/api/v3/attachments/435312/content">End of the insertion Begin of the deletion style="width:368px;" src="/api/v3/attachments/314831/content">

To this:

End of the deletion <img class="image_resized op-uc-image op-uc-image_inline" Begin of the insertionstyle="width:297px;" src="/api/v3/attachments/435315/content">End of the insertion Begin of the deletion style="width:375px;" src="/api/v3/attachments/314833/content">End of the deletion