Limit display size of Intended/Actual config in Device tab

[justinbrink]

Environment

• Nautobot version: 2.3+
• nautobot-golden-config version: next

Proposed Functionality

Limit the size of the intended and actual config panels in the Config Compliance Device tab with css max-height. These panels usually contain most of the same information and when the lines get beyond 50 it's completely unusable for comparison anyway. In some cases, they could be hundreds or thousands of lines of config. Making a simple change to the max-height on the fields allows them to fit together and scroll. This has no impact on the copy function for each config type. It also has no impact on the extra or missing sections, or any config that is smaller than the limit.

This could easily be a configuration option, by adding it to the Golden Config Settings, and even specify a desired max-height. This also pairs well with issue #789.

Without configuration, this only requires a minor CSS change in the configcompliance_devicetab.html template:

    #compliance-content td.config_hover span[id*="_intended"] pre {
        max-height: 300px;
    }
    #compliance-content td.config_hover span[id*="_actual"] pre {
        max-height: 300px;
    }

Use Case

Any user comparing config compliance on the device tab will have an easier time identifying compliance changes and a better user experience.

Original (not user friendly):

Limited (much more usable):

[itdependsnetworks]

@jeffkala @cmsirbu thoughts?

[jeffkala]

Copy button still copy the whole block and not just what is currently visible? Otherwise I think this is a great update.

[justinbrink]

@jeffkala Yeah, copy still works the same. I'll put in a PR for this today. Do we want to make this a config option, or just put it in as the default?

[cmsirbu]

Agreed it's an improvement for the current layout! I vaguely remember seeing (maybe in the public slack?) someone suggesting a horizontal side-by-side layout instead for these tables for an even more condensed view, which I thought looked pretty good.

Found it... Dec 30th from user named Bal:

[justinbrink]

I like the side by side, but I'd really like to see the intended/actual as an actual diff in a single scroll panel. I think this current limit and Matt's section collapse together would be good for now, and this horizontal kind of layout should be the next target.