# Feature DREAM-612 - Improve PageHeader behaviour on mobile interfaces

Project: Stream Design System
Status: specified
URL: https://community.openproject.org/work_packages/DREAM-612

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Low |
| Target versions | Product Backlog |
| Sprint |  |
| Backlog bucket |  |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

_No work packages_

## Technical Details

| Attribute | Value |
| --- | --- |
| Module | Frontend components and Primer design system, Native apps / Mobile |
| Feature Flag |  |
| Requires doc change | No |
| Enterprise plan |  |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups |  |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable | Henriette Darge |
| Product manager |  |
| Developers |  |
| Designer | Parimal Satyal |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

**Context**

The PageHeader already has specific behaviour to improve its usability in mobile interfaces. For example, if there are multiple actions, they collapse to a single more menu. 

This work package seeks to further improve it so that users benefit from even more available vertical space, which is currently limited since the PageHeader takes a lot of space.

**Acceptance criteria**

On mobile viewports, modify the PageHeader as follows:

  - If there is only one action (button), reduce to an icon button on mobile
    
      - Context: The actions only collapse to a more icon when there are *multiple* actions but do not when there is only one

  - On scroll down on mobile:
    
      - The top bar is hidden (this already happens in most places, but not in all, eg. Documents)
    
      - The breadcrumb is hidden
    
      - The title goes where the breadcrumb was previously (next to the expand/collapse icon for the sidebar) and uses a small font style
    
      - The description is hidden

  - On scroll up (same trigger as when the top bar is shown),
    
      - Go back to the 'regular' view pre-scroll

**Technical notes**

  - 
    <br>

**Permissions and visibility considerations**

  - None,

**Translation considerations**

  - None

**Out of scope**

  - None