changeNote input UI field not showing up in edit view when versioning behaviour is active on content type due to CSS "display: none;" #6105

[acsr]

This is a general Volto Light Theme related version of my Plone.de ticket: plone/plone.de#66 and was encouraged by @tisto.

It replaces plone/volto#6105 due to not related to volto in general.

Desription of the bug

The input field to enter a changeNote is not visible when editing content and Versioning behaviour is active on that object.

source file https://github.com/kitconcept/volto-light-theme/blob/main/packages/volto-light-theme/src/theme/_content.scss#L225 ff

.field - wrapper - changeNote {
    display: none;
}

Expected behavior

The input field should be visible, and the input should be visible in the history after a save.

Software

Still valid in Volto 18.9.0 and Plone 6.1 and @kitconcept/volto-light-theme 6.0.0-alpha.15 (since 6.0.0-alpha-6)

Missing functionality

The changeNote is intended to keep track of the purpose of changes over time and is displayed in the workflow history of the object in the same column with the state change note.

Remarks:

• @tisto mentioned some background here Copytext of Stories, News, Events mentioning dates in the future is not properly transformed after the event date. How to improve the workflows. plone/plone.de#65 (comment) related to a more prominent position of the UI element to enter the changeNote. Actually the element was hidden but never showed up at a better position. (Proposal for Pastanage UI seems to exist.

• The kind of ugly appearance and bad UX (same as core Volto) is not reason enough to hide this until fixed.

To Reproduce

Steps to reproduce the behavior:

• The effect can be checked at time of ticket creation on https:demo.plone.org, https://demo.plone.de or https://plone.de (needs an account)
  with Volto Light Theme installed!
• https://plone.org shows a proper changeNote field.

1. Go to 'site setup' and enable behaviour "Versioning" for e.g. the content type page if not already active.
2. Create a new page or Click on the 'Edit Icon' (Pencil) of an existing page.
3. There is no input field for the changeNote visible.
4. Enter Dom inspector and navigate to the HTML code at the end of the preview image text elements (it is in the <div id="metadataform-fieldset-default">)
5. You find the full HTML structure in the source