**Context**

An extension of the work done in ##67203.

**Acceptance criteria**

* For the project description widget:

* On the **overview** tab, there is a pencil icon in the header which is an invisible icon button

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

* Save (primary)

* Cancel (secondary) Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Begin of the insertionFor the project status widget:

* End of the insertion On the Begin of the insertion**overview**End of the insertion Begin of the deletion **dashboard**End of the deletion tab, there is a Begin of the insertionpencil icon inEnd of the insertion Begin of the deletion three dots menu.

* Clicking onEnd of the deletion the Begin of the insertionheader which isEnd of the insertion Begin of the deletion three dots, will open a menu with:

* End of the deletion an Begin of the insertioninvisible icon button

End of the insertion Begin of the deletion option to edit the description

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

End of the insertion Begin of the deletion

End of the deletion * Save (primary) Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Cancel (secondary) Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Begin of the deletion an option to remove the widget

* End of the deletion When lacking the permission, the description text can also be read-only to some users (no pencil button or option in the menu).  Begin of the insertion


End of the insertion Begin of the deletion


End of the deletion **Screens**

Display mode on the 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 of the 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>

Begin of the insertion**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?


End of the insertion <br>