When scroll buttons are in the DOM and hidden, there is a small gap on either side of the tabs list that keeps the tabs from being flush with the edge of their container.
Looks like the problem is because this var is supposed to be the width of the scroll button and it isn't. It's used as a negative margin that's animated to expand the tabs list out when the scroll buttons are hidden.
|
--#{$tabs}__scroll-button--Width: var(--pf-t--global--spacer--2xl); |
We can probably do that a better way. A couple of ideas:
-
Simplest fix is probably just updating that var with a calc() of all of the things in the button, to get an accurate width.
-
Ideally, I think we would optimize the animation performance and only animate the scroll button's position using translate, and let the tabs list resize immediately. We would need to run that by design though because the animation would change a little.
Jira Issue: PF-4461
When scroll buttons are in the DOM and hidden, there is a small gap on either side of the tabs list that keeps the tabs from being flush with the edge of their container.
Looks like the problem is because this var is supposed to be the width of the scroll button and it isn't. It's used as a negative margin that's animated to expand the tabs list out when the scroll buttons are hidden.
patternfly/src/patternfly/components/Tabs/tabs.scss
Line 164 in 5ec242c
We can probably do that a better way. A couple of ideas:
Simplest fix is probably just updating that var with a
calc()of all of the things in the button, to get an accurate width.Ideally, I think we would optimize the animation performance and only animate the scroll button's position using
translate, and let the tabs list resize immediately. We would need to run that by design though because the animation would change a little.Jira Issue: PF-4461