six-webcomponents
six-webcomponents copied to clipboard
fix #217: tab-group vertical scroll bar wiggle
๐ Linked issue
#217
โ Type of change
- [ ] ๐ Documentation (updates to the documentation, readme or JSdoc annotations)
- [x] ๐ Bug fix (a non-breaking change that fixes an issue)
- [ ] ๐ Enhancement (improving an existing functionality like performance)
- [ ] โจ New feature (a non-breaking change that adds functionality)
- [ ] ๐งน Chore (updates to the build process or auxiliary tools and libraries)
- [ ] โ ๏ธ Breaking change (fix or feature that would cause existing functionality to change)
๐ Description
When activating a tab, the font is set to be bold. This naturally leads to the expansion of the content width. I resorted to having a hidden "bold" element added with the ::before selector that has the exact same content as the actual Tab name. This makes it so that there is no expansion if the element is active or not. (I only applied this extra pseudo element if the layout is tab--left or tab--right.
๐ Checklist
- [x] I have linked an issue or discussion.
- [ ] It's submitted to the
main
branch - [x] When resolving a specific issue, it's referenced in the PR's title (e.g.
fix #xxx[,#xxx]
, where "xxx" is the issue number) - [ ] I have updated the documentation accordingly.
- [x] All tests are passing
- [ ] New/updated tests are included
- [x] I have updated the "upcoming" section inside docs/changelog.md explaining the changes I contributed
If adding a new feature, the PR's description includes:
- [ ] A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)
Other information:
As discussed with @ibirrer we will pause this issue until we have synced internally. We might fix multiple issues at once instead of only addressing the tab group.