Computed Fields, detailed view is not rendering correctly with a long template

[dgarros]

Environment

• Python version: 3.6
• Nautobot version: 1.1.0b2

Steps to Reproduce

1. Create a computed field with a long template on a single line

Expected Behavior

The detailed view for all computed field should render properly.

Observed Behavior

The detailed view for a computed field with a long template is not rendering correctly

[FragmentedPacket]

This appears it may be more or less related to tables and the <pre> tag that we use in other areas as well.

I believe I have a fix for this by adding the table-layout: fixed to some CSS.

[jathanism]

IMO we should move the template over to its own panel, like on the right side, similarly to Config Contexts/Export Templates?

Right page:

Full width:

Comparing them side-by-side, I'm partial to the latter.

[glennmatthews]

+1 for moving them to the full-width content, though this may still be an issue with a long-enough template string, in which case I think @FragmentedPacket 's proposed CSS fix may also be necessary.

[jathanism]

+1 for moving them to the full-width content, though this may still be an issue with a long-enough template string, in which case I think @FragmentedPacket 's proposed CSS fix may also be necessary.

If we moved to a panel, since the right-page/full-width content panels are not a table, it will overflow and present a scroll bar (see the right panel screenshot for what that looks like).

[jathanism]

FYI in #737 I updated the detail view template to show the Template in the right page panel (observe that the overflow allows the panel to scroll):

Right page:

And here's full:

Full width:

Let's make a final decision on which one we prefer and call this done.

@dgarros You submitted the issue, so you get to decide! 😍

[itdependsnetworks]

My preference is right page :)