Visual design: add some padding to areas of the sidebar

[Stephen Nixon]

Currently, many areas in the sidebar have no padding, which makes them slightly stressful to look at and use, especially if the window is full screen and these are right on the edge of my clickable area.

A very simple and effective improvement would be adding padding: 0.5 rem to the divs inside each panel:

This is actually achievable with just a couple lines of CSS:

.panel>div {
    padding: 0.25rem 0.75rem;   /* 4px of space at top & bottom, 12px space on left & right */
    box-sizing: border-box; /* prevents width of div from exceed width of parent */
}

[Laurence Penney]

Thanks. There’s some crufty hard-coded element widths in there that I need to fix first, and then the padding can be sorted out. Some panels are bit tight (e.g. I want to leave decent space for the axis name in the Axes panel to stop it cropping or line-breaking).

[Stephen Nixon]

Some panels are bit tight (e.g. I want to leave decent space for the axis name in the Axes panel to stop it cropping or line-breaking).

Understandable! Fitting in this much complexity is not an easy task, and you’ve done this quite nicely so far. My three thoughts on this challenge are:

1. This is a desktop-only application, so you could probably make the sidebar somewhat wider without much negative impact
2. The sidebar is scrollable, so if lines are breaking a lot, you could split them into more lines from the start
3. People probably mostly know the axis names they are inspecting, and for things that do get cropped, you could perhaps show the full name on mouse hover

[Laurence Penney]

I think @cadars’ excellent updates fix this. Comments welcome of course. Closing.