Long resource name (descriptor) causes accessibility issues in the resource editor

[SDScandrettKint]

When a resource has a name descriptor that is longer than the screen width, it causes a number of accessibility issues.

For reference, the resource descriptor in question is the name at the very top, not the one that begins with the model name "Consultation:"

Number 1 - tab wrapping

When a resource has a short name e.g. 17 characters, the wrapping works as expected (until you reach 300%)

If we increase the name to ~70 characters, then the wrapping works up to a zoom of 150%, then anything over starts to fall off the screen, as shown below:

Then, if we increase the name further to ~115 characters, then the wrapping fails to work on at 133% zoom and onwards

Finally, if we increase the name to ~200 characters, then at 100% the wrapping of the model name works, but the rest of the resource doesn't work with the end column of the table falling off the screen

The resource falling off the screen seems to be caused by a correlation between the length of the resource name descriptor and the level of zoom.

Number 2 - y scroll bar in long cards (NO LONGER AN ISSUE HERE)

This issue has been targeted in a separate issue (#11713), and resolved in a PR (#11785).

The original explanation of the issue was incorrect, as CKEditor issues made it look like a more general issue.

Number 3 - rich text widgets

At 125% zoom with a resource name descriptor of 17 characters, the text box acts as we'd expect.

If we increase the name to 150 characters, firstly the text box is larger than the screen, but secondly when entering text it stretches off screen and off focus:

AfHER_rich_text_box_descriptor.mp4

[SDScandrettKint]

This has been raised as a core issue archesproject/arches#11654

[chiatt]

This has been raised as a core issue archesproject/arches#11654

If an issue turns out to be a core issue, it's generally preferred to transfer the issue to the core repo rather than create a second ticket in core.