# Bug OP-9877 - Toolbar: Placement and spacing of butons and date need adjusting

Project: OpenProject
Status: closed
URL: https://community.openproject.org/work_packages/OP-9877

## Open points

_No work packages_

## Details

| Attribute | Value |
| --- | --- |
| Date | 2021-11-01 – 2022-02-27 |
| Priority | Medium |
| Module |  |
| Target versions | 12.1.0 |
| Observed in versions |  |
| Sprint | 12.1.0 |
| Backlog bucket |  |
| Bug found in version (deprecated) |  |
| Found in mobile app version |  |
| Follow-up feedback e-mail |  |
| Requires doc change | No |
| Accessibility | No |
| Pull preview |  |
| List |  |
| Labels |  |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers |  |
| Designer |  |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Planning

| Attribute | Value |
| --- | --- |
| Relevance |  |

## Costs

| Attribute | Value |
| --- | --- |
| Votes |  |
| Work |  |
| Labor costs |  |

## Description

### Environment

Edge

### Steps to reproduce:

1.  Open Team planner

### Problem 1: Spacing and vertical alignment of elements

The buttons and text on the toolbar are not properly aligned:

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27513/content"></div></figure>

1.  The height of the Add Existing button is not the same as the buttons on the right edge.
2.  The current date (February 13 – 19, 2022) is not vertically centered.
3.  The spacing between the back/forward button group and &quot;today&quot; and the spacing between &quot;today&quot; and the 1-week/2-week toggle are not the same.

### Problem 2: Horizontal alignment and positioning of current date

1.  The current is not horizontally centered (distance to the add existing button to the left is smaller than distance to the backwards/forwards button on the right).
2.  The current date is shifted when the Add Existing pane is open.

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27524/content"></div></figure>

### Expected behaviour

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27511/content"></div></figure>

1.  All buttons have the same height.
2.  The space between buttons is be 0.5rem = 8px.
3.  The date text is center-aligned, both vertically and horizontally (between the button groups to the left and to the right)
4.  The position of the is unaffected by the presence (or not) of the left-side add existing pane.

### Note

The new button styles are of course to be ignored for now.