bug(trace-viewer): Overflow with TabbedPane Component #36251
Conversation
Test results for "tests 1"6 flaky39357 passed, 820 skipped Merge workflow run. |
|
Hey @agg23 , Did you get a chance to review this PR? |
|
Hey @agg23 , Requesting for a review. |
There was a problem hiding this comment.
Thank you for looking into this (and particularly for creating a test). I am worried that there's a lot of complicated UI code here; we would generally prefer this to be as minimal as possible.
Additionally, it would be nice if the test validated the resize mechanics (the select changing based on available space).
| @@ -77,6 +76,7 @@ | |||
|
|
|||
| .tab-network .tabbed-pane-tab.selected { | |||
| font-weight: bold; | |||
| background-color: var(--vscode-list-inactiveSelectionBackground) !important; | |||
There was a problem hiding this comment.
Why is !important required? If necessary, the reason should be documented, but I think it's probably not necessary.
| {resourceType} | ||
| </div> | ||
| ))} | ||
| <TabbedPane |
There was a problem hiding this comment.
What about other places that use TabbedPane? Do they upgrade to the new functionality for free?
| const [visibleTabs, setVisibleTabs] = React.useState<TabbedPaneTabModel[]>(mode !== 'select' ? tabs : []); | ||
| const [overflowTabs, setOverflowTabs] = React.useState<TabbedPaneTabModel[]>(mode === 'select' ? tabs : []); | ||
| const [tabWidths, setTabWidths] = React.useState<Record<string, number>>({}); | ||
| const [, setContainerWidth] = React.useState<number>(0); |
There was a problem hiding this comment.
Are you using this for rerender management? Why does it matter, given you're also setting other state every time this is set? Those other sets will always be new/unique as well, so they will also cause a rerender.
| onSelect={setSelectedTab} | ||
| />)), | ||
| ]} | ||
| {visibleTabs.length > 0 && <div style={{ flex: 'auto', display: 'flex', height: '100%', overflow: 'hidden' }} role='tablist'> |
There was a problem hiding this comment.
Does mode continue to work in the same way?
Closes: #33930
overflowModeparam that automatically renders elements to a dropdown upon container resize.Before:
before.mp4
After:
after.mp4