diff --git a/packages/nimble-components/src/anchor-tabs/index.ts b/packages/nimble-components/src/anchor-tabs/index.ts index ffbf60114c..65bca52f05 100644 --- a/packages/nimble-components/src/anchor-tabs/index.ts +++ b/packages/nimble-components/src/anchor-tabs/index.ts @@ -81,11 +81,6 @@ export class AnchorTabs extends FoundationElement { */ public readonly leftScrollButton!: Element; - /** - * @internal - */ - public readonly rightScrollButton!: Element; - private readonly tabListResizeObserver: ResizeObserver; private tabIds: string[] = []; @@ -94,11 +89,10 @@ export class AnchorTabs extends FoundationElement { this.tabListResizeObserver = new ResizeObserver(entries => { let tabListVisibleWidth = entries[0]?.contentRect.width; if (tabListVisibleWidth !== undefined) { - const leftButtonWidth = this.leftScrollButton?.clientWidth ?? 0; - const rightButtonWidth = this.rightScrollButton?.clientWidth ?? 0; + const buttonWidth = this.leftScrollButton?.clientWidth ?? 0; tabListVisibleWidth = Math.ceil(tabListVisibleWidth); if (this.showScrollButtons) { - tabListVisibleWidth += leftButtonWidth + rightButtonWidth; + tabListVisibleWidth += (buttonWidth * 2); } this.showScrollButtons = tabListVisibleWidth < this.tablist.scrollWidth; } diff --git a/packages/nimble-components/src/anchor-tabs/tests/anchor-tabs.spec.ts b/packages/nimble-components/src/anchor-tabs/tests/anchor-tabs.spec.ts index 28d4eb815f..0658fdcbfc 100644 --- a/packages/nimble-components/src/anchor-tabs/tests/anchor-tabs.spec.ts +++ b/packages/nimble-components/src/anchor-tabs/tests/anchor-tabs.spec.ts @@ -490,7 +490,7 @@ describe('AnchorTabs', () => { expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue(); }); - it('should hide scroll buttons when tab label is updated and tabs no longer overflow the container', async () => { + fit('should hide scroll buttons when tab label is updated and tabs no longer overflow the container', async () => { await tabsPageObject.setTabsWidth(550); await waitForUpdatesAsync(); // wait for the resize observer to fire await tabsPageObject.addTab('New Tab With Extremely Long Name');