Add scrollable div layer to Project metadata view to prevent cutoff of CLOSE button

[thadguidry]

Currently if values in the Project metadata editor are too large then the CLOSE button is not seen and clickable to users.

Current Results

If the length of values is too long in any of the keys, then sometimes the CLOSE button will be cutoff and hidden from a user preventing them from being able to close the Project metadata panel.

Expected Behavior

Provide 2 things:

1. a scrollable div layer that can hold and scroll through all the key:value rows.
2. while scrolling, keep the CLOSE button at the bottom, and the Key and Value header labeling at the top.

Screenshots

Versions

• Operating System: Windows 10
• Browser Version: Firefox
• JRE or JDK Version: JDK15
• OpenRefine: 3.5 beta1

Datasets

Additional context

Using Cypress support for Visual testing, ensure to add 1 Cypress test that can

1. click edit on Title row and add lots of text into value input box and click OK.
2. using a previously cropped baseline image of the lower left corner that includes the CLOSE button.
3. compare that cropped baseline image with a clip region of the screen during test, such as example (adjust numbers as necessary)

  .toMatchImageSnapshot({
    clip: { x: 125, y: 870, width: 75, height: 50 },
  });

4. assert that the CLOSE button is still displayed and seen

[rachittiwari8562]

I would like to work on this issue.

[rachittiwari8562]

Is there any cypress visual test already implemented ? . I am unable to find it .