# Feature OP-6682 - Flexible width of edit field of widget title

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

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Low |
| Target versions | 11.0.0 |
| Sprint | 11.0.0 |
| 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 |  |
| Feature Flag |  |
| Requires doc change | No |
| Enterprise plan |  |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups |  |
| Found in mobile app version |  |
| Follow-up feedback e-mail |  |
| Accessibility | No |

## People

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

## Estimates and progress

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

## Description

### Current

While renaming a dashboard widget title the edit field takes the entire width:

![](/api/v3/attachments/17048/content)

  - The widget can only be moved using the drag and drop handle icon left to the title which is not very intuitive.

### Expected

  - When hovering the title
      - There is an slim border around the current title text indicating that the text could become an editable field (depending on the user's permissions)
  - After clicking into the title
      - The border becomes thicker
      - The border remains thick also when the mouse is outside the field but the focus is still inside
      - The width of the text input field changes dynamically
      - It is possible to click in the middle of a title. So the editing starts exactly where clicked e.g. in the middle of a word
  - Drag and drop behavior
      - When clicking on a title without releasing the mouse button you can drag and drop the entire widget (similar to Asana).

### Example 1: editing a document title in Google Docs 

![](/api/v3/attachments/17049/content)

### Example 2: Drag and drop an editable field in Asana boards

![](/api/v3/attachments/18595/content)

Please note that Asana misses two important things:

1.  Indicating that the list title is editable (thin border at hover)
2.  When click and release on the title the position of the cursor is not where you clicked