# Bug OP-9927 - Add Existing panel: Anomalies with the way the search bar is rendered

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

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

  - OpenProject Edge
  - macOS 12,1 / Firefox 97,0 / EN
  - macOS 12,1 / Safari 15,2 / EN

### **Steps to reproduce:**

1.  Go to Team Planner
2.  Click on the "Add existing" button
3.  Interact with the search field

### **Actual Behavior**

**In Firefox (Mac):**

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27791/content"></div></figure>

  - The search icon on the left is not vertically centered
  - The left-margin seems more than 8px (0.5rem)
  - The "clear" (×) icon is the wrong colour

**In Safari (Mac):**

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27792/content"></div></figure>

  - The border around the search field does not render correctly
  - The icon seems vertically centered, but the issues with the left-margin and the colour of the "clear" (×) button remain

### **Expected Behavior**

  - The button is vertically centered.
  - Left-margin is 8px (0.5rem).
  - The colour of the "clear" (×) button is *Basic/Gray 3* (<mention class="mention" data-id="878787" data-type="work_package" data-text="#878787">#878787</mention>).