# Feature DREAM-631 - Make banners smaller so they do not block important content

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

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 17.3.0 |
| Sprint |  |
| Backlog bucket |  |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

| ID | Type | Subject | Status | Assignee | Target versions | Spent time | Module |
| --- | --- | --- | --- | --- | --- | --- | --- |
| DREAM-647 | Bug | Banners contained in dialogs change the dialog layout | closed |  | 17.3.0 |  | Frontend components and Primer design system |

## Technical Details

| Attribute | Value |
| --- | --- |
| Module | Frontend components and Primer design system |
| Feature Flag |  |
| Requires doc change | Yes |
| Enterprise plan |  |

## Details

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

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers | Henriette Darge |
| 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 Primer-default position for banners is top-center. This assures instant visibility at the cost of blocking content. Inline banners are not the solution; they push content and make the page 'jump' and need to be individually positioned, making them error-prone.~~

~~This feature proposes moving the banners to the bottom right corner. It still blocks content but is more out of the way, whilst still remaining prominent.~~

After trying multiple banner positions and considering their visibility (and how much they draw the user's attention), we've decided to keep it on top-center but make them narrower.

**Acceptance criteria**

  - Decrease the size of all banners (Angular and rails)
    
      - The position remains for now

  - Move the actions (primary and secondary) to a new line if the banner is smaller than 540px

  - The scroll behaviour works as before

**Technical notes**

  - 
    <br>

**Permissions and visibility considerations**

  - *No change*

**Translation considerations**

  - *No change*

**Out of scope**

  - *None*