Decrease amount of padding in data tables from the current 64% of vertical space #7878

@sleepinggenius2 commented on GitHub (Apr 11, 2023):

I can completely understand that perspective, which is why I proposed adding a user preference to control the density of lists and data table rows. UX design is a complex field and the "efficiency" of an interface can take many factors into account. In addition to the biological factors, people have screens with different pixel densities, different mouse sensitivities, different lighting conditions, the list goes on and on. Imposing one person's preferences on the entire user base, especially when they don't necessarily meet established web accessibility standards, is not really fair. I have seen in the code where ARIA attributes have been included, in addition to discussions made during the last UI redesign, which indicate that accessibility is a concern of the NetBox developers. I support this feature request, but I was merely bringing attention to the fact that it is not as simple as just making willy nilly changes to the CSS.

@sleepinggenius2 commented on GitHub (Apr 11, 2023): I can completely understand that perspective, which is why I proposed adding a user preference to control the density of lists and data table rows. UX design is a complex field and the "efficiency" of an interface can take many factors into account. In addition to the biological factors, people have screens with different pixel densities, different mouse sensitivities, different lighting conditions, the list goes on and on. Imposing one person's preferences on the entire user base, especially when they don't necessarily meet established web accessibility standards, is not really fair. I have seen in the code where ARIA attributes have been included, in addition to discussions made during the last UI redesign, which indicate that accessibility is a concern of the NetBox developers. I support this feature request, but I was merely bringing attention to the fact that it is not as simple as just making willy nilly changes to the CSS.

adam commented

@bluikko commented on GitHub (Apr 11, 2023):

Some example screenshots.

The starting point from demo instance:

Here the padding is decreased from 1 rem (!!) to 0.2 rem, which is a rather conservative decrease (it could be decreased even further but I wanted to stay at the magical 24 px even though I've not seen any policy regarding NetBox and accessibility):

The "target size" seems to still be above the "AA" level at 24x31.38.
The amount of data lines on the first page increases from 17 to 21, that's a massive gain of almost a fourth and full data pages gain proportionally even more. And all by this simple change that takes NetBox more towards how it used to be with data being the main point.

Note how now the padding at left/right is so pronounced. This is all just wasted space but reducing it is not so simple in order to keep the controls neat:

Here I decreased the padding around the table which is simple and gains good results. But there is still 1-2 levels of padding at the sides - chiefly the are highlighted by the blue line at the left.
But this padding at the left/right side should not be decreased willy-nilly, since the padding highlighted with the green boxes should probably be taken into account/kept as is.

I would definitely look at reducing at least some of that padding highlighted with the blue line.

A separate proposal, if it is too much for this issue, should probably look at decreasing padding at left/right of the data tables to.. dare I say it: zero.

@bluikko commented on GitHub (Apr 11, 2023): Some example screenshots. The starting point from demo instance: ![image](https://user-images.githubusercontent.com/14869000/231043097-45c954d1-6b11-439f-bbf1-4f8bf6e3968d.png) Here the padding is decreased from 1 rem (!!) to 0.2 rem, which is a rather conservative decrease (it could be decreased even further but I wanted to stay at the magical 24 px even though I've not seen any policy regarding NetBox and accessibility): ![image](https://user-images.githubusercontent.com/14869000/231042381-2829372e-b225-4f39-b2fb-4ec0a2d00997.png) The "target size" seems to still be above the "AA" level at 24x31.38. The amount of data lines on the first page increases from 17 to 21, that's a _massive gain of almost a fourth_ and full data pages gain proportionally even more. And all by this simple change that takes NetBox more towards how it used to be with _data_ being the main point. Note how now the padding at left/right is so pronounced. This is all just wasted space but reducing it is not so simple in order to keep the controls neat: ![image](https://user-images.githubusercontent.com/14869000/231042462-4770d0c4-5c5c-464f-bffa-9f31e319f821.png) Here I decreased the padding around the table which is simple and gains good results. But there is still 1-2 levels of padding at the sides - chiefly the are highlighted by the blue line at the left. But this padding at the left/right side should not be decreased willy-nilly, since the padding highlighted with the green boxes should probably be taken into account/kept as is. I would definitely look at reducing at least some of that padding highlighted with the blue line. A separate proposal, if it is too much for this issue, should probably look at decreasing padding at left/right of the data tables to.. dare I say it: **zero**.

adam commented

@bluikko commented on GitHub (Apr 11, 2023):

And here is a tighter example with 3 different padding changed:

html[data-netbox-color-mode=dark] .table>:not(caption)>*>* {
    padding: 0.1rem; /* decrease from 1rem */
}

html[data-netbox-color-mode=dark] .card-body {
    padding: 0.2rem; /* decrease from 1rem */
}

html[data-netbox-color-mode=dark] .tab-content {
    padding-left: 0.2rem; /* added, padding was 1rem */
    padding-right: 0.2rem; /* added, padding was 1rem */
}

Another 3 lines are gained in the first page and horizontal padding gain is more than the yellow control at the right.
Please note that we are still staying at the 24px magical double-A limit!

But the header row doesn't look good, it would need some additional padding.
Also the left/right padding of "quick search" and "Configure Table" controls are too tight IMO (the green boxes in the previous post screenshot....) - while vertical padding for these controls should be decreased.

I do digress - this example goes beyond the issue of "row vertical spacing" but I wanted to have a more complete example as well.

Edited to add: in closing I want to stress again that trying to force a touch-centric paradigm on pointer/mouse users is a big mistake and I am surprised I even need to debate this. Even Microsoft couldn't make it work, Win8 was universally panned and disliked.
This is why responsive design exists.

Also I do not remember seeing even 1 issue requesting more padding or whitespace. On the contrary, there are plenty of issues about moving back to an efficient UI.

@bluikko commented on GitHub (Apr 11, 2023): And here is a tighter example with 3 different padding changed: ```css html[data-netbox-color-mode=dark] .table>:not(caption)>*>* { padding: 0.1rem; /* decrease from 1rem */ } html[data-netbox-color-mode=dark] .card-body { padding: 0.2rem; /* decrease from 1rem */ } html[data-netbox-color-mode=dark] .tab-content { padding-left: 0.2rem; /* added, padding was 1rem */ padding-right: 0.2rem; /* added, padding was 1rem */ } ``` ![image](https://user-images.githubusercontent.com/14869000/231046711-bdaedee6-78a1-41ee-a311-c168b270f617.png) Another 3 lines are gained in the first page and horizontal padding gain is more than the yellow control at the right. Please note that we are still staying at the 24px magical double-A limit! But the header row doesn't look good, it would need some additional padding. Also the left/right padding of "quick search" and "Configure Table" controls are too tight IMO (the green boxes in the previous post screenshot....) - while vertical padding for these controls should be decreased. I do digress - this example goes beyond the issue of "row vertical spacing" but I wanted to have a more complete example as well. Edited to add: in closing I want to stress again that trying to force a touch-centric paradigm on pointer/mouse users is a big mistake and I am surprised I even need to debate this. Even Microsoft couldn't make it work, Win8 was universally panned and disliked. **This is why responsive design exists.** Also I do not remember seeing even 1 issue requesting _more_ padding or whitespace. On the contrary, there are plenty of issues about moving back to an efficient UI.

adam commented

https://github.com/netbox-community/netbox/issues/7497

@kkthxbye-code commented on GitHub (Apr 11, 2023):

On the contrary, there are plenty of issues about moving back to an efficient UI.

Please link them for context, it helps gauge actual interest. I only remember one though, which is this one:

Also, please try to avoid hyperbole and speaking like an expert if you are not one. UI design is hard and I'm certain that there's room for improvement, however changes must be carefully thought out. In the end you have argued your personal preference, which is fine, but try to realize that not everyone will share it.

My personal opinion is that trying to make netbox look like a spreadsheet, as seem to be your goal, is not a great way to design modern websites. Your last example here would look absolutely terrible on any monitor with a larger resolution imo.

I do think that providing a compact list preference could be a fine idea.

@kkthxbye-code commented on GitHub (Apr 11, 2023): > On the contrary, there are plenty of issues about moving back to an efficient UI. Please link them for context, it helps gauge actual interest. I only remember one though, which is this one: https://github.com/netbox-community/netbox/issues/7497 Also, please try to avoid hyperbole and speaking like an expert if you are not one. UI design is hard and I'm certain that there's room for improvement, however changes must be carefully thought out. In the end you have argued your personal preference, which is fine, but try to realize that not everyone will share it. My personal opinion is that trying to make netbox look like a spreadsheet, as seem to be your goal, is not a great way to design modern websites. Your last example here would look absolutely terrible on any monitor with a larger resolution imo. I do think that providing a compact list preference could be a fine idea.

adam commented

@bluikko commented on GitHub (Apr 11, 2023):

Please link them for context, it helps gauge actual interest.

In addition to that 11682, 6975, 6372 come up with keyword "padding" and they seem to be relevant to general "whitespace"/"padding".

I note that some of those are even pre-3.0 and if I remember correctly the amount of whitespace has really blown up at/after 3.0.
2.x was much more conservative with whitespace and I do not recall anyone requesting for more padding or complaining. I could not find any such issues either.

My personal opinion is that trying to make netbox look like a spreadsheet, as seem to be your goal, is not a great way to design modern websites

Nowhere do I argue for zero padding between rows. Initially I had proposed halving from the current 1rem but looking at the results (in the above screenshots) I feel that the 0.2rem may be closer to the sweet spot on my current 1080p screen.

Your last example here would look absolutely terrible on any monitor with a larger resolution imo.

I am currently not with my high-dpi screen and unfortunately may not be with it in some weeks so I could not answer to this right now. Maybe you have an example then?
However - I suspect that those users who want to have larger UI elements would have configured their OS-level controls according to their screen and personal preferences.
I totally agree that this scenario is absolutely something that needs to be considered!

I also want to return to your statement about "not a great way to design modern websites". Would you care to expand this with something constructive?
In my OP I had stated my rationale and I try to rephrase it here: the main point of NetBox is to show data tables. The reason it exists is for data which may be sometimes be viewed by users through the web interface. Shouldn't that data then be the basis of the design and not "making it look shiny" or "fruity" or "trendy"?
Some whitespace is definitely a requirement due to our neurophysiology. But what argument is there for having two thirds of vertical screen real estate as padding? One of the features that help here, shading alternating rows with slightly different background colors has seemingly been dropped at some point - I think it used to be done before (together with much less vertical padding).

There is currently a trend towards excessive whitespace everywhere and this can be seen even in Windows 11. Whitespace may be a usability requirement for touch UI but as I had argued above I suspect that these users are in an overwhelming minority and as such could be satisfied with a responsive design instead of making a suboptimal experience for traditional pointer users.

@bluikko commented on GitHub (Apr 11, 2023): >Please link them for context, it helps gauge actual interest. In addition to that 11682, 6975, 6372 come up with keyword "padding" and they seem to be relevant to general "whitespace"/"padding". I note that some of those are even pre-3.0 and if I remember correctly the amount of whitespace has really blown up at/after 3.0. 2.x was much more conservative with whitespace and I do not recall anyone requesting for more padding or complaining. I could not find any such issues either. > My personal opinion is that trying to make netbox look like a spreadsheet, as seem to be your goal, is not a great way to design modern websites Nowhere do I argue for zero padding between rows. Initially I had proposed halving from the current 1rem but looking at the results (in the above screenshots) I feel that the 0.2rem may be closer to the sweet spot *on my current 1080p screen*. > Your last example here would look absolutely terrible on any monitor with a larger resolution imo. I am currently not with my high-dpi screen and unfortunately may not be with it in some weeks so I could not answer to this right now. Maybe you have an example then? However - I suspect that those users who want to have larger UI elements would have configured their OS-level controls according to their screen and personal preferences. I totally agree that this scenario is *absolutely* something that needs to be considered! I also want to return to your statement about "not a great way to design modern websites". Would you care to expand this with something constructive? In my OP I had stated my rationale and I try to rephrase it here: the main point of NetBox is to show data tables. The reason it exists is for data which may be sometimes be viewed by users through the web interface. Shouldn't that data then be the basis of the design and not "making it look shiny" or "fruity" or "trendy"? Some whitespace is definitely a requirement due to our neurophysiology. But what argument is there for having two thirds of vertical screen real estate as padding? One of the features that help here, shading alternating rows with slightly different background colors has seemingly been dropped at some point - I think it used to be done before (together with much less vertical padding). There is currently a trend towards excessive whitespace everywhere and this can be seen even in Windows 11. Whitespace may be a usability requirement for touch UI but as I had argued above I suspect that these users are in an overwhelming minority and as such could be satisfied with a responsive design instead of making a suboptimal experience for traditional pointer users.

adam commented

@kkthxbye-code commented on GitHub (Apr 11, 2023):

In addition to that 11682, 6975, 6372 come up with keyword "padding" and they seem to be relevant to general "whitespace"/"padding".

11682 is about a very specific inline padding for search highlighting, nothing to do with your FR. 6975 is regarding footer padding, not list padding, and it was fixed. 6372 is regarding pre-3.0 ui. You are clearly misrepresenting the amount of complaints that have been about table row padding.

Nowhere do I argue for zero padding between rows.

Not sure where this came from. Spreadsheets do not have zero padding afaik.

However - I suspect that those users who want to have larger UI elements would have configured their OS-level controls according to their screen and personal preferences.

Playing devils advocate, could the same advise not just be given to you?

I also want to return to your statement about "not a great way to design modern websites". Would you care to expand this with something constructive?

As none of us are frontenders or UX designers, it would not be constructive, which was kinda my point. My subjective opinion is that almost zero padding lists look terrible, control terribly and provide little benefit for me personally. You have the oposite opinion, but you present some of your arguments as facts, like the efficiancy of less padding (see. your use case).

the main point of NetBox is to show data tables

I don't think that is a given.

Shouldn't that data then be the basis of the design and not "making it look shiny" or "fruity" or "trendy"?

Now you are just making stuff up. We are pretty much using the default table from bootstrap, just because you dislike something doesn't mean it's wrong.

Again, I think a compact mode would be fine. I also think the extremely small values for padding that you have shown are too much, even for a compact mode. The only other issue was even accepted as needs owner, but no one made a concrete suggestion for changes.

Edit:

For reference, here's the difference in padding between v3.4.x and v2.11.12 - while ever so slightly more, it doesn't seem to match your memory of the situation:

@kkthxbye-code commented on GitHub (Apr 11, 2023): > In addition to that 11682, 6975, 6372 come up with keyword "padding" and they seem to be relevant to general "whitespace"/"padding". 11682 is about a very specific inline padding for search highlighting, nothing to do with your FR. 6975 is regarding footer padding, not list padding, and it was fixed. 6372 is regarding pre-3.0 ui. You are clearly misrepresenting the amount of complaints that have been about table row padding. > Nowhere do I argue for zero padding between rows. Not sure where this came from. Spreadsheets do not have zero padding afaik. > However - I suspect that those users who want to have larger UI elements would have configured their OS-level controls according to their screen and personal preferences. Playing devils advocate, could the same advise not just be given to you? > I also want to return to your statement about "not a great way to design modern websites". Would you care to expand this with something constructive? As none of us are frontenders or UX designers, it would not be constructive, which was kinda my point. My subjective opinion is that almost zero padding lists look terrible, control terribly and provide little benefit for me personally. You have the oposite opinion, but you present some of your arguments as facts, like the efficiancy of less padding (see. your use case). > the main point of NetBox is to show data tables I don't think that is a given. > Shouldn't that data then be the basis of the design and not "making it look shiny" or "fruity" or "trendy"? Now you are just making stuff up. We are pretty much using the default table from bootstrap, just because you dislike something doesn't mean it's wrong. Again, I think a compact mode would be fine. I also think the extremely small values for padding that you have shown are too much, even for a compact mode. The only other issue was even accepted as needs owner, but no one made a concrete suggestion for changes. Edit: For reference, here's the difference in padding between v3.4.x and v2.11.12 - while ever so slightly more, it doesn't seem to match your memory of the situation: ![image](https://user-images.githubusercontent.com/400797/231116450-387e6437-bbf1-4a81-ab74-f61e1decf2e3.png)

adam commented

@bluikko commented on GitHub (Apr 11, 2023):

You are clearly misrepresenting the amount of complaints that have been about table row padding.

Are you intentionally reading what I wrote wrong? I specifically said seem to be relevant to general "whitespace"/"padding"!

Playing devils advocate, could the same advise not just be given to you?

Whitespace will be increased the same way as actual data, the proportions stay the same. Whitespace proportion will not be decreased this way. While your original statement was very non-specific and lacking of constructive substance, in line with most of what's written here, I assume you originally argued that there is too much in the screen on high-dpi screens and this will be rectified by using OS level zoom.

The rest seems to continue in the same non-constructive manner so I will just address this point:

We are pretty much using the default table from bootstrap

It used to not be like this, so something has been changed. Compare to screenshot in your own link issue 7497. The padding has increased considerably:

9 px above/below the tickbox at left

vs

14 currently.

You are clearly misrepresenting the amount of whitespace that used to be used earlier in your screenshots.

@bluikko commented on GitHub (Apr 11, 2023): > You are clearly misrepresenting the amount of complaints that have been about table row padding. Are you intentionally reading what I wrote wrong? I specifically said `seem to be relevant to general "whitespace"/"padding"`! > Playing devils advocate, could the same advise not just be given to you? Whitespace will be increased the same way as actual data, the proportions stay the same. Whitespace proportion will not be decreased this way. While your original statement was very non-specific and lacking of constructive substance, in line with most of what's written here, I assume you originally argued that there is too much in the screen on high-dpi screens and this will be rectified by using OS level zoom. The rest seems to continue in the same non-constructive manner so I will just address this point: > We are pretty much using the default table from bootstrap It used to not be like this, so something has been changed. Compare to screenshot in your own link issue 7497. The padding has increased considerably: - 9 px above/below the tickbox at left vs - 14 currently. You are clearly misrepresenting the amount of whitespace that used to be used earlier in your screenshots.

adam commented

@kkthxbye-code commented on GitHub (Apr 11, 2023):

There seems to be a communication barrier here that I'm not sure we'll be able to surmount and to be frank you have a very combative way of arguing that seems less than constructive.

I'll refrain from handling this, but please update your FR to contain the specific changes you are suggesting. If it needs more discussion before you can propose the actual change, feel free to create a discussion instead.

@kkthxbye-code commented on GitHub (Apr 11, 2023): There seems to be a communication barrier here that I'm not sure we'll be able to surmount and to be frank you have a very combative way of arguing that seems less than constructive. I'll refrain from handling this, but please update your FR to contain the specific changes you are suggesting. If it needs more discussion before you can propose the actual change, feel free to create a discussion instead.

adam commented

@bluikko commented on GitHub (Apr 11, 2023):

please update your FR to contain the specific changes you are suggesting

I have done that and summarized some of the concerns listed in the replies.

to be frank you have a very combative way of arguing that seems less than constructive

Must indeed be some barrier since this phrase exactly fits how it seemed to me!

@bluikko commented on GitHub (Apr 11, 2023): > please update your FR to contain the specific changes you are suggesting I have done that and summarized some of the concerns listed in the replies. > to be frank you have a very combative way of arguing that seems less than constructive Must indeed be some barrier since this phrase exactly fits how it seemed to me!

adam commented

@jeremystretch commented on GitHub (Apr 11, 2023):

A few thoughts:

The depth of discussion here is wildly disproportionate to the change being proposed, and the wording of this proposal is unnecessarily assertive and confrontational.
I'm not interested in making any substantial changes to the UI styling at this time. We're planning to migrate to Tabler for v4.0 (see #12128) in the near future.
Bootstrap 5 provides a table-sm (small) class that reduces cell padding by 50%, which I believe is the ultimate goal of this FR. I've included screenshots below showing the original and reduced padding.

There are two options moving forward:

Adopt the reduced padding style provided by BS5.
Do nothing.

Please limit discussion to the merits of either of these two options.

@jeremystretch commented on GitHub (Apr 11, 2023): A few thoughts: 1. The depth of discussion here is _wildly_ disproportionate to the change being proposed, and the wording of this proposal is unnecessarily assertive and confrontational. 2. I'm not interested in making any substantial changes to the UI styling at this time. We're planning to migrate to Tabler for v4.0 (see #12128) in the near future. 3. Bootstrap 5 provides a `table-sm` (small) class that reduces cell padding by 50%, which I believe is the ultimate goal of this FR. I've included screenshots below showing the original and reduced padding. There are two options moving forward: 1. Adopt the reduced padding style provided by BS5. 2. Do nothing. Please limit discussion to the merits of either of these two options. ![original_padding](https://user-images.githubusercontent.com/13487278/231161508-f6d6f10b-7aa5-4b03-a537-a83a8ad4cb50.png) ![reduced_padding](https://user-images.githubusercontent.com/13487278/231161514-d40ab7a4-97f4-47e9-bd71-3368b8c12e77.png)

adam commented

@bluikko commented on GitHub (Apr 11, 2023):

the wording of this proposal is unnecessarily assertive and confrontational

We must see it differently then - the OP was not supposed to be confrontational and I have to say I fail to see it. I use conditionals and questions when I do not present facts, even humor at the last line.
Things like percentages that I state as facts are based on my calculations. I am at a loss at how to make it more neutral. But also I do not want to distract from the main subject more by this discussion. Must be something wrong in my language.

There are two options moving forward:

I suggest that:
+1 on https://github.com/netbox-community/netbox/issues/12199#issuecomment-1503242751 for screenshot 2 which seems to achieve what the OP proposes; -1 for the first screenshot (do nothing).

What's still missing is a highdpi screenshot, unfortunately I can't do a test myself until some weeks.

@bluikko commented on GitHub (Apr 11, 2023): > the wording of this proposal is unnecessarily assertive and confrontational We must see it differently then - the OP was not supposed to be confrontational and I have to say I fail to see it. I use conditionals and questions when I do not present facts, even humor at the last line. Things like percentages that I state as facts are based on my calculations. I am at a loss at how to make it more neutral. But also I do not want to distract from the main subject more by this discussion. Must be something wrong in my language. > There are two options moving forward: I suggest that: +1 on https://github.com/netbox-community/netbox/issues/12199#issuecomment-1503242751 for screenshot 2 which seems to achieve what the OP proposes; -1 for the first screenshot (do nothing). What's still missing is a highdpi screenshot, unfortunately I can't do a test myself until some weeks.

adam commented

@sleepinggenius2 commented on GitHub (Apr 11, 2023):

There are two options moving forward:

Adopt the reduced padding style provided by BS5.

Do nothing.

Would you be open to making this a setting under User Preferences?

Here are the same screenshots from the mobile interface for reference as well.

@sleepinggenius2 commented on GitHub (Apr 11, 2023): > There are two options moving forward: > > 1. Adopt the reduced padding style provided by BS5. > 2. Do nothing. Would you be open to making this a setting under User Preferences? Here are the same screenshots from the mobile interface for reference as well. ![demo netbox dev_dcim_devices_(Pixel 5)](https://user-images.githubusercontent.com/24281183/231173219-08559468-a708-49bc-a110-b64055bcd5c0.png) ![demo netbox dev_dcim_devices_(Pixel 5)_sm](https://user-images.githubusercontent.com/24281183/231173223-cd25bf7f-a44f-4c27-a7ce-3b1cca762844.png)

adam commented