Reduce tab bar height

[yuya-oc]

Before submitting, please confirm you've

• read and understood our Contributing Guidelines
• completed Mattermost Contributor Agreement
• executed npm run lint:js for proper code formatting

Please provide the following information:

Summary
Reduce tab bar height.

It seems that Chrome's tabs have about 28px of height at 100% of scaling.
But 28px looked a little narrow for me. So I used 32px. It always becomes an integer on monitor at all scaling.

• 100% -> 32 dots on monitor
• 125% -> 40 dots on monitor
• 150% -> 48 dots on monitor

Issue link
#462

Test Cases

1. Add two servers at least to show the tab bar.
2. Get unread mention to show badges.

Please also check that webapp doesn't looks blurry.

Additional Notes
https://circleci.com/gh/yuya-oc/desktop/196#artifacts

[jasonblais]

I still found it blurry at 125% and above - not sure if it's visible from the screenshot below

The tab height itself looks good to me (screenshot below at 100% for comparison). All text in the server bar is vertically centered 👍

[yuya-oc]

Did you log out from Windows after changing the scaling? It's necessary in order to properly apply the new scaling. Would you try again?

[jasonblais]

Ah, right -- I'll test this out during the work week

[jasonblais]

Confirmed that after system logout, the screen is no longer blurry. So all good for Windows

[yuya-oc]

Thanks! But the way to enable HiDPI on Mac is no longer working for me... Is there anyone who can use HiDPI?

[jasonblais]

Lindsay helped test on a Retina display and said it looks good. I think we're okay to merge this one @yuya-oc even if we couldn't test on HiDPI mode (which is a retina mode in non-retina display)

[yuya-oc]

I see. Thanks!