Sidebar content in the library overflows horizontally

[meegido]

Describe the bug The images overdose the sidebar horizontal space.

To Reproduce Steps to reproduce the behavior:

1. Create an entity with an image property and upload an image
2. Go to the library
3. In the library, open the sidebar of that entity with image
4. See that the content overflows with the sidebar, not allowing you to see the full image or read the full text.

Expected behavior The content inside the sidebar should fit whatever type of content it is.

Screenshots

Device (please select all that apply)

• [✔ ] Desktop
• [ ✔ ] Mobile

Browser Firefox, Safari and Chrome

Additional context The screenshot shows that the display table could be the reason for the error. If it is, I think it could be a quick-win issue.

[RafaPolit]

This is working correctly on unmodified instances. Could it be an issue introduced by custom CSS on this particular collection?

[meegido]

Hi @RafaPolit!

Some images in the sidebar fit well, and others, like the one above, do not. The difference between them is the size of the image (attached screenshots), and the issue is with the big one.

The same images in another instance with the same settings configuration for the images behave ok. It's clear that using flex instead table fixes the error, and all image sizes render the same; however, I can override the table display value in this instance. I cannot find any other value that I could override that which affects this error to only some images.

I was looking for information about display table accessibility in case this is the reason why this value is there. As I understood, if we want the reader to understand this is a table, it would be better to add the aria-label instead.

We can close the issue, I will continue watching it in case I find something more.