Category tab margin

[Waakul]

Resolves #7278

Changes

Margin added, Border radius, and darker color for selected category, taller side indicator

Reason for changes

Better accessibilty as mentioned in #7278

Tests

Microsoft Edge (Chromium)

[Waakul]

Should i make the indicator on the side full-height?

[Samq64]

I would suggest adding the sidebar changes from #7214 since it's unlikely to be merged any time soon.

Should i make the indicator on the side full-height?

Maybe, but I think it also looks fine the way it is now.

[Secret-chest]

Can we just make it wider? Adding a margin reduces the click area, read Fitts' law.

[BroJac5246]

Adding a margin reduces the click area, read Fitts' law.

However, your cursor generally isn't in the leftmost part of the tab, so it doesn't have to move any further. Also, the margin only slightly decreases the clickable area and therefore shouldn't have a large impact on clickability. Good UIs have find a balance between usability and design and this change will be worth it IMO.

[Secret-chest]

However, your cursor generally isn't in the leftmost part of the tab, so it doesn't have to move any further. Also, the margin only slightly decreases the clickable area and therefore shouldn't have a large impact on clickability. Good UIs have find a balance between usability and design and this change will be worth it IMO.

Can't you just make it wider?

[BroJac5246]

However, your cursor generally isn't in the leftmost part of the tab, so it doesn't have to move any further. Also, the margin only slightly decreases the clickable area and therefore shouldn't have a large impact on clickability. Good UIs have find a balance between usability and design and this change will be worth it IMO.

Can't you just make it wider?

You could, but it's already plenty wide.

[Samq64]

You're right, the full height bar does look a lot better. Could it be applied to the subcategories too?

Didn't mrean to approve

[Samq64]

You're right, the full height bar does look a lot better. Could it also be applied to the subcategories?

[Waakul]

@Samq64 @mxmou just a reminder to please review this.

[Samq64]

Seems fine although it does take up a lot of space on smaller screens.

[Waakul]

reduce margin a bit? (vote 👍 or 👎 )

[Samq64]

Also category-small has a twice the vertical margin it's supposed to.

Screenshot

[mxmou]

I don't like the amount of space this adds - the categories already have a lot of padding. Moving the selection indicator away from the edge instead of adding a margin might be a better solution:

Another option is to keep the margin but reduce the padding by 5px on each side - the result looks similar: