chore(tabs): fixed styles & overlaps

[mhuggins]

Description

This fixes the tab styling to:

1. prevent tabs from overlapping with the window controls, and
2. prevent tab close button from overlapping with tab label.

Motivation and Context

Because it looks broken and makes clicking buttons non-functional.

How Has This Been Tested?

Opening many tabs, interacting with them, and closing them.

Screenshots (if appropriate)

Types of changes

• Chore (tests, refactors, and fixes)
• New feature (adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

• I have read the CONTRIBUTING guidelines and confirm that my code follows the code style of this project.
• Tests for the changes have been added (for bug fixes/features)

Documentation

• Docs need to be added/updated (for bug fixes/features)

Closing issues

Fixes #542

[codecov]

Codecov Report

Merging #753 into develop will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff            @@
##           develop     #753   +/-   ##
========================================
  Coverage    53.27%   53.27%           
========================================
  Files          207      207           
  Lines         1772     1772           
  Branches       249      249           
========================================
  Hits           944      944           
  Misses         688      688           
  Partials       140      140

[codecov]

Codecov Report

Merging #753 into develop will increase coverage by 0.04%.
The diff coverage is 66.66%.

@@             Coverage Diff             @@
##           develop     #753      +/-   ##
===========================================
+ Coverage     53.4%   53.44%   +0.04%     
===========================================
  Files          207      207              
  Lines         1777     1783       +6     
  Branches       249      249              
===========================================
+ Hits           949      953       +4     
- Misses         689      691       +2     
  Partials       139      139

[DalderupMaurice]

It still seems to move below the logo and over the buttons 😅
Also, the icons are displayed on top of the tab separation and on top of the X-button/loading indicator

The good part is that it doesn't brake as early as it did before :P Now it only breaks after a shitton of tabs

This is a reference for chrome:

When they hit a certain amount of tabs, they're opened but you cannot see them open up :P It's hidden behind the right shade and it had certain break points where icons are removed and the X-button/loading indicator where hidden

[fabric-8]

@mhuggins @DalderupMaurice Hey guys gave it a stab and tried to improve the appearance once tabs get very narrow. What I basically did:

• tabs have a min-width
• close-icon will overlay the favicon so that it's always visible/closable
• paddings are now equal which makes things look a bit more consistent overall IMO, esp. when dealing with small tabs

What would be nice: Adding a conditional class to the close icon once the tab is smaller than 50px: We could then hide the close icon and only show it when the user hovers the tab.