Begin of the insertion####End of the insertion **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**⚠️ 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 insertion **Acceptance criteria**

The Sub Header adapts to mobile screens:

* The actions on the left side always turn into icon buttons without labels Begin of the insertion

End of the insertion Begin of the deletion

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

End of the insertion Begin of the deletion

End of the deletion * Begin of the insertionAll subheader items must have an icon specified, even if the desktop version does not show an icon (eg. 'Filter')

* End of the insertion Currently, three types of actions have been identified: Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Search (on mobile, the currently implementation takes the full length when clicked) Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Filter Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Segmented controls Begin of the insertion

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

* Begin of the insertionButtons

* End of the insertion If there were no actions on the left side of the Sub Header on desktop, this space will remain empty on mobile too

* The right-side Begin of the insertionactionsEnd of the insertion Begin of the deletion actionEnd of the deletion (usually a Begin of the insertionsolitaryEnd of the insertion primary add "+ {Object} button) will remain in its full form. Begin of the insertionTheyEnd of the insertion Begin of the deletion ItEnd of the deletion will not go into icon-only mode.

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


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

* Begin of the insertionThese adaptation don't takeEnd of the insertion Begin of the deletion Once we implement quick filters, this will challengeEnd of the deletion the Begin of the insertionupcoming quick filters into account:End of the insertion Begin of the deletion current design since it'll add a lot more elements:End of the deletion

* ###57964


**Tasks**

* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Mobile behaviour for the Sub header is defined and agreed upon
* [ ] The LookBook documentation is updated with code examples
* [ ] The mobile behaviour is implemented as documented in all relevant pages (see below)

**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


**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:398px;" src="https://community.openproject.org/api/v3/attachments/264138/content">

And go towards something like this:

<img class="image_resized op-uc-image op-uc-image_inline" style="width:467px;" src="/api/v3/attachments/310839/content">

And from this:

<img class="image_resized op-uc-image op-uc-image_inline" style="width:368px;" src="/api/v3/attachments/314831/content">

To this:

<img class="image_resized op-uc-image op-uc-image_inline" style="width:375px;" src="/api/v3/attachments/314833/content">