[Tabs] Tabs wrap on window resize #3980
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
WHY are these changes introduced?
Fixes #3976
The Tabs component (and specifically the TabsMeasurer) currently doesn't take into account what happens when tab widths aren't integers. This can result in the "disclosure tab" (the
...
overflow button) being wrapped to the next line.WHAT is this pull request doing?
This PR rounds up the tab width values and adds equality to the comparison check in
Tabs/utilities.ts
when determining whether a tab should be wrapped, with the end result being that tabs are hidden 1px sooner but the disclosure tab isn't wrapped.before
![Screen Shot 2021-02-04 at 4 07 30 PM](https://user-images.githubusercontent.com/3619012/106956856-35338b80-6705-11eb-9969-4e979f112f47.png)
after
![Screen Shot 2021-02-04 at 4 24 03 PM](https://user-images.githubusercontent.com/3619012/106957033-7b88ea80-6705-11eb-9853-eee1d7794574.png)
How to 🎩
🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines
Copy-paste this code in
playground/Playground.tsx
:🎩 checklist
README.md
with documentation changes