Fix overflow behavior of sidebars

- Ensure that last visible element also gets added to `...` overflow menu if there is not enough space
- Remove special behavior for only one overflowing element
  -  This behavior would always add a second element to the `overflow` menu if only one element is currently overflowing. This did not work for the case where only two tabs where open in the first place. In addition, it unnecessarily hide a tab in some cases even if there was enough space to render it.
- Also consider potential tab margins in overflow computation

Fixes #13482

Contributed on behalf of STMicroelectronics

packages/core/src/browser/shell/side-panel-handler.ts

@@ -653,7 +653,7 @@ export class SidePanelHandler {
     }
 
     protected onTabsOverflowChanged(sender: SideTabBar, event: { titles: Title<Widget>[], startIndex: number }): void {
-        if (event.startIndex >= 0 && event.startIndex <= sender.currentIndex) {
+        if (event.startIndex > 0 && event.startIndex <= sender.currentIndex) {
             sender.revealTab(sender.currentIndex);
         } else {
             this.additionalViewsMenu.updateAdditionalViews(sender, event);

packages/core/src/browser/shell/tab-bars.ts

@@ -1212,10 +1212,13 @@ export class SideTabBar extends ScrollableTabBar {
                 let overflowStartIndex = -1;
                 for (let i = 0; i < n; i++) {
                     const hiddenTab = hiddenContent.children[i];
-                    // Extract tab padding from the computed style
+                    // Extract tab padding and margin from the computed style
                     const tabStyle = window.getComputedStyle(hiddenTab);
-                    const paddingTop = parseFloat(tabStyle.paddingTop!);
-                    const paddingBottom = parseFloat(tabStyle.paddingBottom!);
+                    const paddingTop = tabStyle.paddingTop ? parseFloat(tabStyle.paddingTop) : 0;
+                    const paddingBottom = tabStyle.paddingBottom ? parseFloat(tabStyle.paddingBottom) : 0;
+                    const marginTop = tabStyle.marginTop ? parseFloat(tabStyle.marginTop) : 0;
+                    const marginBottom = tabStyle.marginBottom ? parseFloat(tabStyle.marginBottom) : 0;
+                    const heightOffset = paddingTop + paddingBottom + marginTop + marginBottom + this.tabRowGap;
                     const rd: Partial<SideBarRenderData> = {
                         paddingTop,
                         paddingBottom
@@ -1231,9 +1234,9 @@ export class SideTabBar extends ScrollableTabBar {
                     if (iconElements.length === 1) {
                         const icon = iconElements[0];
                         rd.iconSize = { width: icon.clientWidth, height: icon.clientHeight };
-                        actualWidth += icon.clientHeight + paddingTop + paddingBottom + this.tabRowGap;
+                        actualWidth += icon.clientHeight + heightOffset;
 
-                        if (actualWidth > availableWidth && i !== 0) {
+                        if (actualWidth > availableWidth) {
                             rd.visible = false;
                             if (overflowStartIndex === -1) {
                                 overflowStartIndex = i;
@@ -1243,16 +1246,6 @@ export class SideTabBar extends ScrollableTabBar {
                     }
                 }
 
-                // Special handling if only one element is overflowing.
-                if (overflowStartIndex === n - 1 && renderData[overflowStartIndex]) {
-                    if (!this.tabsOverflowData) {
-                        overflowStartIndex--;
-                        renderData[overflowStartIndex].visible = false;
-                    } else {
-                        renderData[overflowStartIndex].visible = true;
-                        overflowStartIndex = -1;
-                    }
-                }
                 // Render into the visible node
                 this.renderTabs(this.contentNode, renderData);
                 this.computeOverflowingTabsData(overflowStartIndex);