Repository: spyder-ide/spyder

Issue:
Minor visual glitch when hovering tabs of the Editor.
## Problem Description

There is a little glitch when hovering tabs of the Editor. As we can see in the animation below, the first letter of the tab name gets clipped when the tab is hovered, except when it is selected.

![glitch_tab_editor](https://user-images.githubusercontent.com/10170372/115804047-27121480-a3b0-11eb-8d89-161580448bb1.gif)

I think that we need to set left and right padding values in the stylesheet that take into account the width of the border when the tabs are in the `hover` state.

Adding the following lines :
```python
        css['QTabBar::tab:hover'].setValues(
            paddingLeft='3px' if is_macos else '9px',
            paddingRight='9px' if is_macos else '3px'
        )
        css['QTabBar::tab:selected'].setValues(
            paddingLeft='4px' if is_macos else '10px',
            paddingRight='10px' if is_macos else '4px'
        )
``` 
below the following block in `stylesheet.py`

https://github.com/spyder-ide/spyder/blob/7f119b2d8ec62595fb15c9666d63befc6c6d0412/spyder/utils/stylesheet.py#L265-L271

seems to solve the problem for me.

## Versions
<!--- You can get this information from Help > About Spyder...
or (if Spyder won't launch) the "conda list" command
from the Anaconda Prompt/Terminal/command line. --->

* Spyder version: 5.1.0.dev0 2d27b6228
* Python version: 3.8.8 64-bit
* Qt version: 5.12.9
* PyQt5 version: 5.12.3
* Operating System: Windows 10

### Dependencies
<!--- Please go to the menu entry Help > Dependencies,
press the Copy to clipboard button and paste below --->

```

# Mandatory:
atomicwrites >=1.2.0          :  1.4.0 (OK)
chardet >=2.0.0               :  4.0.0 (OK)
cloudpickle >=0.5.0           :  1.6.0 (OK)
cookiecutter >=1.6.0          :  1.7.2 (OK)
diff_match_patch >=20181111   :  20200713 (OK)
intervaltree >=3.0.2          :  3.0.2 (OK)
IPython >=7.6.0               :  7.22.0 (OK)
jedi =0.17.2                  :  0.17.2 (OK)
jsonschema >=3.2.0            :  3.2.0 (OK)
keyring >=17.0.0              :  23.0.1 (OK)
nbconvert >=4.0               :  6.0.7 (OK)
numpydoc >=0.6.0              :  1.1.0 (OK)
paramiko >=2.4.0              :  2.7.2 (OK)
parso =0.7.0                  :  0.7.0 (OK)
pexpect >=4.4.0               :  4.8.0 (OK)
pickleshare >=0.4             :  0.7.5 (OK)
psutil >=5.3                  :  5.8.0 (OK)
pygments >=2.0                :  2.8.1 (OK)
pylint >=1.0                  :  2.7.2 (OK)
pyls >=0.36.2;<1.0.0          :  v5.0.1+4.gcde398286.dirty (NOK)
pyls_black >=0.4.6            :  0.4.6 (OK)
pyls_spyder >=0.3.2           :  0.3.2 (OK)
qdarkstyle =3.0.2             :  3.0.dev (NOK)
qstylizer >=0.1.10            :  0.1.10 (OK)
qtawesome >=1.0.2             :  1.1.0.dev0 (OK)
qtconsole >=5.0.3             :  5.0.3 (OK)
qtpy >=1.5.0                  :  1.9.0 (OK)
rtree >=0.8.3                 :  0.9.7 (OK)
setuptools >=39.0.0           :  49.6.0.post20210108 (OK)
sphinx >=0.6.6                :  3.5.4 (OK)
spyder_kernels >=2.0.1;<2.1.0 :  2.1.0.dev0 (OK)
textdistance >=4.2.0          :  4.2.1 (OK)
three_merge >=0.1.1           :  0.1.1 (OK)
watchdog >=0.10.3;<2.0.0      :  1.0.2 (OK)
zmq >=17                      :  22.0.3 (OK)

# Optional:
cython >=0.21                 :  None (NOK)
matplotlib >=2.0.0            :  None (NOK)
numpy >=1.7                   :  None (NOK)
pandas >=1.1.1                :  None (NOK)
scipy >=0.17.0                :  None (NOK)
sympy >=0.7.3                 :  None (NOK)

```



Discussion:
Even though it doesn't really cause any visual glitch, I think we the border of the tabs should also be taken into account in the values use for the vertical padding (this becomes apparent though when we add icons to the tabs).

So to cover all cases, I think we should have in `PanesTabBarStyleSheet`:

```python
css['QTabBar::tab'].setValues(
    marginTop=self.TOP_MARGIN,
    paddingTop='4px',
    paddingBottom='4px',
    paddingLeft='4px' if is_macos else '10px',
    paddingRight='10px' if is_macos else '4px'
)
css['QTabBar::tab:hover'].setValues(
    paddingTop='3px',
    paddingBottom='3px',
    paddingLeft='3px' if is_macos else '9px',
    paddingRight='9px' if is_macos else '3px'
)
css['QTabBar::tab:selected'].setValues(
    paddingTop='4px',
    paddingBottom='3px',
    paddingLeft='4px' if is_macos else '10px',
    paddingRight='10px' if is_macos else '4px'
)
css['QTabBar::tab:selected:hover'].setValues(
    paddingTop='4px',
    paddingBottom='3px',
    paddingLeft='4px' if is_macos else '10px',
    paddingRight='10px' if is_macos else '4px'
)
```
HI @jnsebgosselin thanks for reporting this. @dalthviz can you test if this code fixes the issue on Windows so @jnsebgosselin or I can open a PR?
@juanis2112 @jnsebgosselin I was able to reproduce and the changes proposed seem to work for me :+1:
@jnsebgosselin, instead of making an entry for each style, you could set `QTabBar::tab:selected` and `QTabBar::tab:selected:hover` in a `for` loop because they are exactly the same.
> 
> 
> @jnsebgosselin, instead of making an entry for each style, you could set `QTabBar::tab:selected` and `QTabBar::tab:selected:hover` in a `for` loop because they are exactly the same.

Oh yeah, nice catch.

So I am going to open a PR with these changes against the 5.x branch.
Thanks @jnsebgosselin! If you do that before the end of the week, it'll be part of 5.0.2

Resolving patch:
diff --git a/spyder/utils/stylesheet.py b/spyder/utils/stylesheet.py
--- a/spyder/utils/stylesheet.py
+++ b/spyder/utils/stylesheet.py
@@ -270,6 +270,23 @@ def set_stylesheet(self):
             paddingRight='10px' if is_macos else '4px'
         )
 
+        # Fix minor visual glitch when hovering tabs
+        # See spyder-ide/spyder#15398
+        css['QTabBar::tab:hover'].setValues(
+            paddingTop='3px',
+            paddingBottom='3px',
+            paddingLeft='3px' if is_macos else '9px',
+            paddingRight='9px' if is_macos else '3px'
+        )
+
+        for state in ['selected', 'selected:hover']:
+            css[f'QTabBar::tab:{state}'].setValues(
+                paddingTop='4px',
+                paddingBottom='3px',
+                paddingLeft='4px' if is_macos else '10px',
+                paddingRight='10px' if is_macos else '4px'
+            )
+
         # This crops the close button a bit at the bottom in order to
         # center it. But a bigger negative padding-bottom crops it even
         # more.


Test patch: