Text length can extend beyond the boundary of its container panel on a model's detail page

[atownson]

NetBox version

v3.3.5

Python version

3.8

Steps to Reproduce

1. Create a custom field name "json_example" with a Type of JSON for any given model.
2. Add a value to any given instantiated model for the "json_example" field that is rather long, say 100 characters.
3. View the model's detail page and observe the value extends beyond the panel boundary, given the width of the webpage.

Expected Behavior

The horizontally-long text should either wrap or a scrollbar should be shown.

Observed Behavior

The text extends beyond the panel boundaries.

demo.netbox.dev:

The Config Context works well with a scrollbar:

The JSON field is the most obvious offender as it's quite common for the text to be long, but other, more exaggerated, examples are given in the illustration.

My suggestion would be to implement an automatic scrollbar if the content overflows for just the single field value, so that users don't have to scroll the entire panel and they don't have to scroll to access buttons that are justified to the right.

[jeremystretch]

Bootstrap provides utility classes to control how overflow is handled, however using them would require application to all potentially relevant areas. It might be prudent to just set overflow: scroll on all card bodies application-wide.

[jeremystretch]

Unfortunately the solution under PR #10621 (applying overflow-auto to all card bodies) interferes with dropdown menus within a card. Not sure what the optimal fix is here.

[arthanson]

@jeremystretch can you provide a page where this shows the issue (where there is a dropdown menu within a card) and I will take a look.

[jeremystretch]

I've been recreating it by setting the description for a site to its max length using a string of As. The unbroken string pushes past the right hand boundary of the card (assuming a narrow enough browser window).

[kkthxbye-code]

@jeremystretch - I think he was asking for an example of the broken dropdown because of the initial fix.

[jeremystretch]

Sorry, no coffee yet. IIRC I noticed it on the "connect" dropdown when viewing an unconnected interface.

[arthanson]

This (https://css-tricks.com/popping-hidden-overflow/) looks like it explains the issue, uses some javascript. Tried overflow-wrap: break-word; and overflow-x: auto to no avail... Not sure of a good solution for this yet.

[jeremystretch]

Closing this for inactivity. It's something we're sure to revisit under #12128.