v4.0 UI cleanup #9117

@jeremystretch commented on GitHub (Jan 23, 2024):

It appears that dcim/inventoryitem_bulk_delete.html is no longer in use; there may be other obsolete templates as well. We should do a quick audit.

@jeremystretch commented on GitHub (Jan 23, 2024): It appears that `dcim/inventoryitem_bulk_delete.html` is no longer in use; there may be other obsolete templates as well. We should do a quick audit.

adam commented

@jeremystretch commented on GitHub (Jan 23, 2024):

Reduce vertical space between a checkbox field and its help text.

@jeremystretch commented on GitHub (Jan 23, 2024): Reduce vertical space between a checkbox field and its help text. ![Screenshot 2024-01-23 at 10-37-42 Editing circuit termination 1002841093 Termination Z NetBox](https://github.com/netbox-community/netbox/assets/13487278/1f0bd1e7-a88d-4278-9500-b7be40851586)

adam commented

@jeremystretch commented on GitHub (Jan 23, 2024):

Remove ghost shadow from hidden "clear" button on quick search (barely visible to right of search field)

@jeremystretch commented on GitHub (Jan 23, 2024): Remove ghost shadow from hidden "clear" button on quick search (barely visible to right of search field) ![Screenshot 2024-01-23 at 10-46-57 192 168 0 0_16 NetBox](https://github.com/netbox-community/netbox/assets/13487278/493e715e-009d-4a7a-ae15-ff45cd86350f)

adam commented

2025-12-29 20:45:43 +01:00

@jeremystretch commented on GitHub (Jan 23, 2024):

Hide/show dropdown button on new line under device interfaces view

@jeremystretch commented on GitHub (Jan 23, 2024): Hide/show dropdown button on new line under device interfaces view ![Screenshot 2024-01-23 at 14-35-08 dmi01-akron-rtr01 NetBox](https://github.com/netbox-community/netbox/assets/13487278/3ebdb92f-9aad-4556-9f38-d7d95306745a)

adam commented

@cybarox commented on GitHub (Jan 25, 2024):

Tables in tableviews using not the full width

Sites:

Prefixes:

Circuits:

The margin of the little red cross for unset the sorting setting is also overlapped by the column title.

@cybarox commented on GitHub (Jan 25, 2024): Tables in tableviews using not the full width Sites: ![Site View](https://github.com/netbox-community/netbox/assets/60612073/7b85a03b-a296-4b81-aca0-a4b27e59331b) Prefixes: ![Prefix View](https://github.com/netbox-community/netbox/assets/60612073/9fcfe10b-1337-424d-b579-be75c81435df) Circuits: ![Circuit View](https://github.com/netbox-community/netbox/assets/60612073/07d64e51-e2f8-4884-9139-8fe42f69b05f) The margin of the little red cross for unset the sorting setting is also overlapped by the column title.

adam commented

2025-12-29 20:45:43 +01:00

@cybarox commented on GitHub (Jan 25, 2024):

On Device View:
The button "highlight device" has no margin to the right.
Custom Field Topics are not styled.

@cybarox commented on GitHub (Jan 25, 2024): On Device View: The button "highlight device" has no margin to the right. Custom Field Topics are not styled. ![Device View](https://github.com/netbox-community/netbox/assets/60612073/2fc731e0-7d63-4df5-9e42-23e12609f97e)

adam commented

2025-12-29 20:45:43 +01:00

@jeremystretch commented on GitHub (Jan 25, 2024):

Tables in tableviews using not the full width

We're currently using a maximum width for all page content (this was done to bolster readability for object detail views) but I suppose we could use a full-width view for object lists. We should however give some thought to limiting the width of tables with few columns: Viewing e.g. the platforms list on a very wide viewport is a bit taxing for the user.

@jeremystretch commented on GitHub (Jan 25, 2024): > Tables in tableviews using not the full width We're currently using a maximum width for all page content (this was done to bolster readability for object detail views) but I suppose we could use a full-width view for object lists. We should however give some thought to limiting the width of tables with few columns: Viewing e.g. the platforms list on a very wide viewport is a bit taxing for the user.

adam commented

@cybarox commented on GitHub (Jan 25, 2024):

Tables in tableviews using not the full width

We're currently using a maximum width for all page content (this was done to bolster readability for object detail views) but I suppose we could use a full-width view for object lists. We should however give some thought to limiting the width of tables with few columns: Viewing e.g. the platforms list on a very wide viewport is a bit taxing for the user.

Avoiding superfluous space in tables is certainly good, my concern would be that if different tables have different widths as a result (e.g. if the user adds custom-field columns) , the overall impression of the UI could quickly become restless or appear inconsistent.

Perhaps the max-width variant can be used for tables whose columns are narrow enough to display them in this way. All content that requires a larger width could then be displayed as a full-width table.

Another possibility would be to let the user decide for himself and add a toggle option to the configure table menu.

@cybarox commented on GitHub (Jan 25, 2024): > > Tables in tableviews using not the full width > > We're currently using a maximum width for all page content (this was done to bolster readability for object detail views) but I suppose we could use a full-width view for object lists. We should however give some thought to limiting the width of tables with few columns: Viewing e.g. the platforms list on a very wide viewport is a bit taxing for the user. Avoiding superfluous space in tables is certainly good, my concern would be that if different tables have different widths as a result (e.g. if the user adds custom-field columns) , the overall impression of the UI could quickly become restless or appear inconsistent. Perhaps the max-width variant can be used for tables whose columns are narrow enough to display them in this way. All content that requires a larger width could then be displayed as a full-width table. Another possibility would be to let the user decide for himself and add a toggle option to the configure table menu.

adam commented

@jeremystretch commented on GitHub (Jan 30, 2024):

On many pages, we include an "add" button beneath embedded object tables. For instance:

We can save a considerable amount of space by relocating this button to the card header, opposite its title, and reducing its size.

@jeremystretch commented on GitHub (Jan 30, 2024): On many pages, we include an "add" button beneath embedded object tables. For instance: ![screenshot](https://github.com/netbox-community/netbox/assets/13487278/f8a5c270-5036-4a06-8292-a11e62e4d0e4) We can save a considerable amount of space by relocating this button to the card header, opposite its title, and reducing its size.

adam commented

@jeremystretch commented on GitHub (Jan 30, 2024):

Fix margin around the "map it" button for site addresses.

@jeremystretch commented on GitHub (Jan 30, 2024): Fix margin around the "map it" button for site addresses. ![screenshot](https://github.com/netbox-community/netbox/assets/13487278/4c247727-3d83-4885-9c1f-d41577e8b977)

adam commented

@jeremystretch commented on GitHub (Feb 6, 2024):

Rendered Markdown content inside a table cell (e.g. in script output) has extra white space, due to the bottom margin applied to  elements. It's probably safe to negate this margin for the last  element inside a table cell.

@jeremystretch commented on GitHub (Feb 6, 2024): Rendered Markdown content inside a table cell (e.g. in script output) has extra white space, due to the bottom margin applied to `` elements. It's probably safe to negate this margin for the last `` element inside a table cell. ![screenshot](https://github.com/netbox-community/netbox/assets/13487278/a3d94340-b133-495c-92c5-be54ea748572)

adam commented

2025-12-29 20:45:45 +01:00

@arthanson commented on GitHub (Feb 8, 2024):

minor esthetic - the copy and action dropdown buttons on the right-side are not rounded and look out of place, the old ones were rounded and blended in better:

@arthanson commented on GitHub (Feb 8, 2024): minor esthetic - the copy and action dropdown buttons on the right-side are not rounded and look out of place, the old ones were rounded and blended in better: ![Monosnap IP Addresses | NetBox 2024-02-08 09-34-08](https://github.com/netbox-community/netbox/assets/99642/8081442a-bb02-426c-8b5a-fb32cf3a8ce2)

adam commented

@peteeckel commented on GitHub (Feb 8, 2024):

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.

https://github.com/netbox-community/netbox/assets/6815386/4767a155-1090-457c-b77c-acaf0075a57b

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.

@peteeckel commented on GitHub (Feb 8, 2024): 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. https://github.com/netbox-community/netbox/assets/6815386/4767a155-1090-457c-b77c-acaf0075a57b **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.

adam commented

2025-12-29 20:45:45 +01:00

@peteeckel commented on GitHub (Feb 8, 2024):

Another aesthetic issue ... is there any reason why dark modes sports a somewhat bluish and pale color schema? The NetBox windows stand out from all my windows in dark mode, most of which are more or less black.

@peteeckel commented on GitHub (Feb 8, 2024): Another aesthetic issue ... is there any reason why dark modes sports a somewhat bluish and pale color schema? The NetBox windows stand out from all my windows in dark mode, most of which are more or less black. ![Screenshot 2024-02-08 at 19 40 37](https://github.com/netbox-community/netbox/assets/6815386/f30e2025-affe-4bc4-afdb-7cca0cde2b90)

adam commented

2025-12-29 20:45:45 +01:00

@peteeckel commented on GitHub (Feb 9, 2024):

Some peculiarity after the switch to tom-select (at least I noticed it after pulling yesterday's commits, current SHA d63e1da):

In long pull-down menus (forms.multipleChoiceField in this case) only the first 50 entries are displayed, without an indication that the list is truncated. Entering some characters will, however, make it possible to select the later ones as well.

It would be good if there were an indicator of the truncation (ideally with an option to load and display the remainder of the items), or if that behaviour could be made optional.

@peteeckel commented on GitHub (Feb 9, 2024): Some peculiarity after the switch to `tom-select` (at least I noticed it after pulling yesterday's commits, current SHA d63e1da): In long pull-down menus (`forms.multipleChoiceField` in this case) only the first 50 entries are displayed, without an indication that the list is truncated. Entering some characters will, however, make it possible to select the later ones as well. It would be good if there were an indicator of the truncation (ideally with an option to load and display the remainder of the items), or if that behaviour could be made optional.

adam commented

2025-12-29 20:45:46 +01:00

@peteeckel commented on GitHub (Feb 9, 2024):

The "Table Configuration" form is broken:

Neither the list of available columns nor the list of selected columns is visible (wrong widget, probably). As a consequence, re-ordering columns is not possible.

@peteeckel commented on GitHub (Feb 9, 2024): The "Table Configuration" form is broken: ![Screenshot 2024-02-09 at 09 48 35](https://github.com/netbox-community/netbox/assets/6815386/f3e0083e-6424-43f1-92b1-231ab58a4a19) Neither the list of available columns nor the list of selected columns is visible (wrong widget, probably). As a consequence, re-ordering columns is not possible.

adam commented

2025-12-29 20:45:46 +01:00

@peteeckel commented on GitHub (Feb 9, 2024):

Another observation regarding the color scheme: In the old UI, the section headers had a darker colour than the actual menu items. This differentiation has gone in the new UI, which makes it difficult to differentiate between headers and menu items.

Adding to the fact is that the buttons are only displayed on mouseover, taking away a second optical differentiation.

This is also responsible for my somewhat erratic menu navigation in the screen recording above :-)

@peteeckel commented on GitHub (Feb 9, 2024): Another observation regarding the color scheme: In the old UI, the section headers had a darker colour than the actual menu items. This differentiation has gone in the new UI, which makes it difficult to differentiate between headers and menu items. ![Screenshot 2024-02-09 at 09 58 28](https://github.com/netbox-community/netbox/assets/6815386/68e330c5-704d-4880-970f-2ef7b5596f52) ![Screenshot 2024-02-09 at 09 59 18](https://github.com/netbox-community/netbox/assets/6815386/0dc6bfec-2a76-4166-bc30-b93190b85629) Adding to the fact is that the buttons are only displayed on mouseover, taking away a second optical differentiation. This is also responsible for my somewhat erratic menu navigation in the screen recording above :-)

adam commented

2025-12-29 20:45:46 +01:00

@jeremystretch commented on GitHub (Feb 9, 2024):

In long pull-down menus [...] only the first 50 entries are displayed, without an indication that the list is truncated. Entering some characters will, however, make it possible to select the later ones as well.

50 was the default limit but it was raised to 100; dropdowns should always be populating with up to 100 options currently.

I was initially going to port over the pagination functionality from the original APISelect widget, but it didn't seem to be worthwhile IMO. You figure people are generally going to stop scrolling and start typing by the time they've skimmed through a hundred options. I'm open to arguments to retain the functionality though.

@jeremystretch commented on GitHub (Feb 9, 2024): > In long pull-down menus [...] only the first 50 entries are displayed, without an indication that the list is truncated. Entering some characters will, however, make it possible to select the later ones as well. 50 was the default limit but it was raised to 100; dropdowns should always be populating with up to 100 options currently. I was initially going to port over the pagination functionality from the original APISelect widget, but it didn't seem to be worthwhile IMO. You figure people are generally going to stop scrolling and start typing by the time they've skimmed through a hundred options. I'm open to arguments to retain the functionality though.

adam commented

2025-12-29 20:45:47 +01:00

@jeremystretch commented on GitHub (Feb 9, 2024):

is there any reason why dark modes sports a somewhat bluish and pale color schema?

This is just the default dark mode color scheme provided by Tabler. I honestly didn't even notice the blue tint until you pointed it out (I struggle with differentiating between blue and black). Happy to entertain changes to the color scheme, but this probably something best tackled in a separate issue as 1) color is highly subjective and 2) we'll need to consider the entire palette for consistency.

@jeremystretch commented on GitHub (Feb 9, 2024): > is there any reason why dark modes sports a somewhat bluish and pale color schema? This is just the default dark mode color scheme provided by [Tabler](https://tabler.io/preview). I honestly didn't even notice the blue tint until you pointed it out (I struggle with differentiating between blue and black). Happy to entertain changes to the color scheme, but this probably something best tackled in a separate issue as 1) color is highly subjective and 2) we'll need to consider the entire palette for consistency.

adam commented

2025-12-29 20:45:47 +01:00

@peteeckel commented on GitHub (Feb 9, 2024):

50 was the default limit but it was raised to 100; dropdowns should always be populating with up to 100 options currently.

That gets me confused as well, I found

const MAX_OPTIONS = 100;

in netbox/project-static/src/select/dynamic.ts. But I can still only see the first 50 elements.

>>> from netbox_dns.models import RecordTypeChoices
>>> RecordTypeChoices.values()[0:50]
['A', 'A6', 'AAAA', 'AFSDB', 'AMTRELAY', 'APL', 'AVC', 'CAA', 'CDNSKEY', 'CDS', 'CERT', 'CNAME', 'CSYNC', 'DHCID', 'DLV', 'DNAME', 'DNSKEY', 'DS', 'EUI48', 'EUI64', 'GPOS', 'HINFO', 'HIP', 'HTTPS', 'IPSECKEY', 'ISDN', 'KEY', 'KX', 'L32', 'L64', 'LOC', 'LP', 'MB', 'MD', 'MF', 'MG', 'MINFO', 'MR', 'MX', 'NAPTR', 'NID', 'NINFO', 'NS', 'NSAP', 'NSAP_PTR', 'NSEC', 'NSEC3', 'NSEC3PARAM', 'NULL', 'NXT']

@peteeckel commented on GitHub (Feb 9, 2024): > 50 was the default limit but it was raised to 100; dropdowns should always be populating with up to 100 options currently. That gets me confused as well, I found ``` const MAX_OPTIONS = 100; ``` in `netbox/project-static/src/select/dynamic.ts`. But I can still only see the first 50 elements. ``` >>> from netbox_dns.models import RecordTypeChoices >>> RecordTypeChoices.values()[0:50] ['A', 'A6', 'AAAA', 'AFSDB', 'AMTRELAY', 'APL', 'AVC', 'CAA', 'CDNSKEY', 'CDS', 'CERT', 'CNAME', 'CSYNC', 'DHCID', 'DLV', 'DNAME', 'DNSKEY', 'DS', 'EUI48', 'EUI64', 'GPOS', 'HINFO', 'HIP', 'HTTPS', 'IPSECKEY', 'ISDN', 'KEY', 'KX', 'L32', 'L64', 'LOC', 'LP', 'MB', 'MD', 'MF', 'MG', 'MINFO', 'MR', 'MX', 'NAPTR', 'NID', 'NINFO', 'NS', 'NSAP', 'NSAP_PTR', 'NSEC', 'NSEC3', 'NSEC3PARAM', 'NULL', 'NXT'] ``` ![Screenshot 2024-02-09 at 15 07 14](https://github.com/netbox-community/netbox/assets/6815386/b7866bb5-5b39-4da4-a63f-6446276c3a4f)

adam commented

2025-12-29 20:45:47 +01:00

@jeremystretch commented on GitHub (Feb 9, 2024):

On the circuit edit form, the border of the dropdown button next to the commit rate field is too dark.

@jeremystretch commented on GitHub (Feb 9, 2024): On the circuit edit form, the border of the dropdown button next to the commit rate field is too dark. ![screenshot](https://github.com/netbox-community/netbox/assets/13487278/e6778ff5-6ad9-4c91-a33f-9feb61ca4f80)

adam commented

@peteeckel commented on GitHub (Feb 9, 2024):

You figure people are generally going to stop scrolling and start typing by the time they've skimmed through a hundred options. I'm open to arguments to retain the functionality though.

But in any case it would help to indicate somehow that the list isn't complete, or I'm sure people will find the record types end with 'NXT' and complain that e.g. 'SPF' is missing ...

@peteeckel commented on GitHub (Feb 9, 2024): > You figure people are generally going to stop scrolling and start typing by the time they've skimmed through a hundred options. I'm open to arguments to retain the functionality though. But in any case it would help to indicate somehow that the list isn't complete, or I'm sure people will find the record types end with 'NXT' and complain that e.g. 'SPF' is missing ...

adam commented

@jeremystretch commented on GitHub (Feb 10, 2024):

@peteeckel sorry, it just clicked with me earlier that you're looking at a static dropdown rather than one being populated via the API; I only increased MAX_ITEMS for the later. We should probably remove the limit for static dropdowns.

Edit: This has been fixed in the feature branch as part of #14917.

@jeremystretch commented on GitHub (Feb 10, 2024): @peteeckel sorry, it just clicked with me earlier that you're looking at a _static_ dropdown rather than one being populated via the API; I only increased `MAX_ITEMS` for the later. We should probably remove the limit for static dropdowns. Edit: This has been fixed in the `feature` branch as part of #14917.

adam commented

@jeremystretch commented on GitHub (Feb 13, 2024):

When viewing the dashboard, the full page width is consumed, however the search bar (top left) and user menu (top right) are constrained to the container width.

@jeremystretch commented on GitHub (Feb 13, 2024): When viewing the dashboard, the full page width is consumed, however the search bar (top left) and user menu (top right) are constrained to the container width.

adam commented

2025-12-29 20:45:49 +01:00

@peteeckel commented on GitHub (Feb 15, 2024):

Another issue with the color scheme, and again with dark mode:

I didn't notice it that much when using dark mode at night, but by day the contrast between the row headers and the background in detail view is much too low - almost unreadably. Light mode is fine.

@peteeckel commented on GitHub (Feb 15, 2024): Another issue with the color scheme, and again with dark mode: ![Screenshot 2024-02-15 at 11 05 56](https://github.com/netbox-community/netbox/assets/6815386/f734bf4d-e830-40e3-8641-3afb67a9c246) I didn't notice it that much when using dark mode at night, but by day the contrast between the row headers and the background in detail view is much too low - almost unreadably. Light mode is fine.

adam commented

@jeremystretch commented on GitHub (Feb 15, 2024):

The border of the "copy-to-clipboard" button is too dark

@jeremystretch commented on GitHub (Feb 15, 2024): The border of the "copy-to-clipboard" button is too dark ![screenshot](https://github.com/netbox-community/netbox/assets/13487278/90894c97-e6f0-49c6-ae40-f7c22d4004a9)

adam commented

2025-12-29 20:45:49 +01:00

@kkthxbye-code commented on GitHub (Feb 17, 2024):

The below commit incorrectly assumes that it is always okay to clear child select fields when the parent changes. This is not the case for the cable form where multiple interfaces from different devices can be selected in the same a/b-side interface select field.

674f794c69

The form element:

Here the interface field would be cleared if the device was changed.

@kkthxbye-code commented on GitHub (Feb 17, 2024): The below commit incorrectly assumes that it is always okay to clear child select fields when the parent changes. This is not the case for the cable form where multiple interfaces from different devices can be selected in the same a/b-side interface select field. https://github.com/netbox-community/netbox/pull/15080/commits/674f794c69196fd86ae9f32e36a1100b38021672 The form element: ![image](https://github.com/netbox-community/netbox/assets/400797/14023336-539f-49fc-aa2c-1df7b4d99859) Here the interface field would be cleared if the device was changed.

adam commented

2025-12-29 20:45:49 +01:00

@kkthxbye-code commented on GitHub (Feb 17, 2024):

The object selector doesn't work and looks wrong:

@kkthxbye-code commented on GitHub (Feb 17, 2024): The object selector doesn't work and looks wrong: ![image](https://github.com/netbox-community/netbox/assets/400797/2a0deb90-5585-4efa-8eb9-570027de17ce)

adam commented

@kkthxbye-code commented on GitHub (Feb 17, 2024):

Toast notifications look wrong in dark mode, text blends in:

@kkthxbye-code commented on GitHub (Feb 17, 2024): Toast notifications look wrong in dark mode, text blends in: ![image](https://github.com/netbox-community/netbox/assets/400797/d9585e40-a2d6-4f00-a7de-f3cd6525b510)

adam commented

@peteeckel commented on GitHub (Feb 17, 2024):

The below commit incorrectly assumes that it is always okay to clear child select fields when the parent changes.

Agreed - but it's a functionality sorely missed in NetBox < 4, so probably the best would be to have it selectable as an option.

@peteeckel commented on GitHub (Feb 17, 2024): > The below commit incorrectly assumes that it is always okay to clear child select fields when the parent changes. Agreed - but it's a functionality sorely missed in NetBox < 4, so probably the best would be to have it selectable as an option.

adam commented

@peteeckel commented on GitHub (Feb 20, 2024):

Another tom-select glitch: When you enter search text in a DynamicModelMultipleChoiceField to narrow down the selection and then click on one of the resulting items, the search text is still present in the box:

The same does not happen with DynamicModelField.

Update: This might be intended, it's just irritating - the first few times I tried to backspace until the text goes away, often inadvertently removing the last object, then I found that the text disappears on saving.

@peteeckel commented on GitHub (Feb 20, 2024): Another `tom-select` glitch: When you enter search text in a `DynamicModelMultipleChoiceField` to narrow down the selection and then click on one of the resulting items, the search text is still present in the box: <img width="666" alt="Screenshot 2024-02-20 at 12 13 23" src="https://github.com/netbox-community/netbox/assets/6815386/dbc19733-10ea-44e8-acde-f44ad2f0a933"> The same does **not** happen with `DynamicModelField`. **Update**: This might be intended, it's just irritating - the first few times I tried to backspace until the text goes away, often inadvertently removing the last object, then I found that the text disappears on saving.

adam commented