Use 100% of horizontal screen real estate for table pages

[bluikko]

Environment

• Python version: 3.6.8
• NetBox version: 2.9.3

Proposed Functionality

Use 100% of horizontal screen real estate for pages (at minimum pages with tables).

Currently pages with tables, for example "Virtual Machines" page, have quite large margins or whitespace at the left and right side of the pages.

I understand that this is a current trend in design but what does it contribute to usability of NetBox? If the page would utilize 100% of horizontal width then the tables could avoid wrapping text in cells to a second or third line, or additional columns could be fit. I counted roughly 15-20% of horizontal screen real estate is "wasted" to the margin at the sides of the page.

Screenshot of the margins highlighted in red:

Edit:

• This proposal is to, at minimum, allow the vertical part of the page that has the data table to use 100% of the width. If the other parts (like the page header shown in above screenshot) does not use 100% that is not an issue.
• Further, if the "Search" widget at the right side of the table could be "collapsed" when not needed to allow further 20-25% of horizontal screen real estate for the table would be nice but that might be more complex change.

Use Case

For tables with long text in cells or tables where additional columns have been added now do not fit horizontally on the screen due to the 15-20% margins.

Database Changes

Should be none? Should be just a CSS change?

External Dependencies

None?

[jeremystretch]

I understand that this is a current trend in design but what does it contribute to usability of NetBox?

Tables with fewer columns are much more difficult to read when they are too wide.

[bluikko]

Tables with fewer columns are much more difficult to read when they are too wide.

I see, yes this is a valid concern. Especially in the absence of alternating row background colors and in the absence of highlighting the row that cursor is hovering on.

The issue depends on several things:

• Screen width / resolution
• Font size
• Number of columns
• Length of data in the cells

For my FHD screen (1920x1080), at the default zoom of the web browser, several main tables wrap the text to two or even three lines even with default column setup. Arguable those are more difficult to read than cells that are not wrapped, and also take a lot of vertical space due to wrapping.

Would it be feasible to let wide tables overflow into the left/right margins?

Some other data-driven web apps have "widescreen mode" that reduces the margins but I'm not sure that's a good solution.

Edit: on 2.9.3 and with the data I have, all of the cramped tables have the Search widget at the right side. Large portion of "loose" tables do not have it. It might be enough if the search widget could be collapsed and then the left/right margins could stay consistent. Having said that, we might just narrow down the margins in the CSS locally, it should be simple enough to do.

[bluikko]

The issue is pronounced on a 4k screen:

[jeremystretch]

Conversely, here's how a table with few columns renders at full width on a 2560x1440 monitor:

It's not ideal, but not terrible. It would be much worse on a 4K display with no scaling (but so would a lot of things).

The other issue is maintaining a sensible width ratio between the object list and right-hand panel (where present). Currently, the panel consumes 25% of the container width (three of 12 vertical columns). Bootstrap's highest built-in breakpoint is as 1200px, which isn't quite high enough to step it down to two columns. So, we'd need to define a custom breakpoint above which the proportion is adjusted.

@bluikko would you like to volunteer for this work?

[bluikko]

@jeremystretch I have no experience in modern web technologies but I will read about bootstrap and try to understand what you are saying about breakpoints.

I take it that allowing the right-hand panel to be "collapsed" is not feasible,

[jeremystretch]

Made this change for the upcoming v2.10 release.