**Context**

An extension of the work done in ##67203.

**Acceptance criteria**

* For the project description widget:

* On the **overview** tab, Begin of the insertionwhen hovering the actual descriptionEnd of the insertion there is a Begin of the insertionborder around it shown.End of the insertion Begin of the deletion pencil icon in the header which is an invisible icon buttonEnd of the deletion

* When clicking Begin of the deletion that,End of the deletion the Begin of the insertionbordered area, theEnd of the insertion description will switch to CKEditor edit Begin of the insertionmode,End of the insertion Begin of the deletion mode (similar to meeting notes),End of the deletion with two actions:

* Save (primary)

* Cancel (secondary)

* For the project status widget:

* On the **overview** tab, Begin of the insertionwhen hovering the actual status descriptionEnd of the insertion there is a Begin of the insertionborder around it shownEnd of the insertion Begin of the deletion pencil icon in the header which is an invisible icon buttonEnd of the deletion

* When clicking Begin of the deletion that,End of the deletion the Begin of the insertionbordered area, theEnd of the insertion description will switch to CKEditor edit Begin of the insertionmode,End of the insertion Begin of the deletion mode (similar to meeting notes),End of the deletion with two actions:

* Save (primary)

* Cancel (secondary)

* When lacking the permission, the description text can also be read-only to some users Begin of the insertion

* When there is no description provided, there is a placeholder shown. When hovered,End of the insertion Begin of the deletion (no pencil button or option inEnd of the deletion the Begin of the insertionborder is shown and behaves as aboveEnd of the insertion Begin of the deletion menu). End of the deletion


Begin of the insertion**Out of scope**End of the insertion Begin of the deletion **Screens**End of the deletion

Begin of the insertion* MigratingEnd of the insertion Begin of the deletion Display mode onEnd of the deletion the Begin of the insertionangular wigets fromEnd of the insertion Begin of the deletion dashboard tab:

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

<br>

Edit edit mode ofEnd of the deletion the Begin of the insertionDashboard tab


<br>End of the insertion Begin of the deletion description field:

<figure class="image image_resized op-uc-figure" style="width:281px;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/785764/content"></div></figure>End of the deletion

**Open questions:**

1. Shall we apply the same pattern to the dashboard page?

* On the **dashboard** tab, there is a three dots menu.

* Clicking on the three dots, will open a menu with:

* an option to edit the description

* When clicking that, the description will switch to CKEditor edit mode (similar to meeting notes) with two actions:

* Save (primary)

* Cancel (secondary)

* an option to remove the widget

* Problem: The dashboard is Angular based. The widget themselves are Angular (including the header), only the content is part of a TurboFrame. In order to use more or less the same code on both Overview and Dashboard, we&#39;d need to weaken the `WidgetBoxComponent` and implement a lot of hacks

* Possible solution: Switching from the edit button in the header to actual click-to-edit fields once we have them?


<br>