# Feature DREAM-135 - Split screen nav bar: add a fading background to the right-side actions

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

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 18.0.0, Passion time |
| 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 | Modules and project features / Comments and activity, Frontend components and Primer design system, Modules and project features / Work packages |
| Feature Flag |  |
| Requires doc change | No |
| Enterprise plan | Community (COM) |

## Details

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

## People

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

## Estimates and progress

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

## Description

**Context**

At the moment, the split screen UnderlineNav bar has two buttons overlaid on its right edge, like so:

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

The bar is horizontally scrollable and the user is able to scroll to the right see to see the &quot;Meetings&quot; label in full. However, this is not always obvious to user. A basic, subtle fade behind these two buttons would made it mode evident that there are elements hidden in a horizontal scroll. It could look like this:

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

**Acceptance criteria**

*   Add a fading (gradient) background behind the button group that goes from transparent to white
    
    *   Due to the technology we use, this will currently **not** work in Firefox. However, Firefox plans to support that with version 160 as well.