v4.0 UI cleanup

[jeremystretch]

Proposed Changes

This issue serves to track miscellaneous cleanup work following the UI refresh in #12128 for NetBox v4.0. It will be kept open for a while as we continue to uncover and address minor UI issues. (Note that this issue is not a suitable place for proposing any new functionality or otherwise substantial UI changes.)

Please add any new items in a comment below (including a screenshot where helpful), and it will be added here.

• Restyle login form
• Fix styling of nav pills
• Markdown form fields should use monospaced font
• Fix header wrapping w/large number of buttons (e.g. aggregate prefixes view)
• Fix styling of paginator for CustomFieldChoicesSet choices
• Fix preview tab styling for comments fields
• Fix empty text for related changes under ObjectChange view
• Add padding between dark mode toggle and login button in top menu
• Audit for unused templates
• Reduce vertical space between a checkbox field and its help text
• Remove ghost shadow from hidden "clear" button on quick search
• Active nav pill has no background color in dark mode
• Fix placement of hide/show dropdown button under device interfaces view
• Allow object list tables to expand horizontally beyond the default page width where beneficial See Limit screen width for object detail views but use full screen for list views #15339
• Fix spacing of "highlight in rack" button under device view
• Fix styling of custom field group names under object view
• Make add/import buttons on nav menu items a bit wider for easier clicking
• Relocate "add" buttons for embedded object tables
• Fix margin around the "map it" button for site addresses
• Remove netbox-data block from the base template & and the obsolete getNetboxData() function
• Remove bottom margin from last <p> element in rendered Markdown inside a table cell
• Apply a corner radius to small (.btn-sm) buttons
• Eliminate "flash" on load when dark mode has been set via toggle button (vs. user preference) See Fix flicker on page load when color mode is set to dark #15340
• Fix field selection widgets in table configuration dialog
• Tweak color of nav menu group headings to better differentiate from menu items
• Fix border color of circuit commit rate dropdown button
• Change span.color-label display to inline-block
• The border of the "copy-to-clipboard" button is too dark
• The labels/images dropdown at top right of rack view renders oddly
• Row headings for attribute tables have too little contrast in dark mode
• Fix toast text color in dark mode
• Fix object selector functionality

Justification

We're tracking this work under a shared issue as they're mostly small, iterative changes that alone aren't very significant (e.g. tweaking HTML templates or applying a missing CSS class).

[jeremystretch]

@ITJamie the scope of this issue is limited to UI changes resulting from work done under #12128. Anything else needs to be tracked under a separate issue.

[peteeckel]

Another aesthetic issue: When switching views in dark mode, the new stuff on the right side is often initially loaded in bright mode and then immediately switches to dark mode. This results in an unpleasant "flashing" while navigating.

Tested with Safari, Chromium and Firefox. With Chromium and Firefox the effect is more pronounced, but with Safari it's visible as well.

Screen.Recording.2024-02-08.at.19.19.07.mov

Update: This only happens when the current light/dark mode setting is different from the one in the user's preferences, i.e. if the mode has been set via the "light bulb" button in the upper right corner. If the current setting is the same as the one in the preferences it's OK.

If the preferences are set to "dark mode" and the current mode is set to "light", the effect is reversed, i.e. dark flashing.

[jeremystretch]

@peteeckel sorry I think I deleted your latest comment by mistake.

[jeremystretch]

Just a reminder: This thread is for cosmetic issues stemming from the migration to Tabler. Any functional issues with tom-select or other components are out of scope for this thread, and will need to be addressed separately.

[jeremystretch]

Closing this as all the minor items have been addressed, and the others have been spun off into separate issues. For any suspected UI issues moving forward, please submit a new bug report.