Implement scrolling to active tab, fix styles, add release guard

packages/widgets/src/tabbar.ts

@@ -370,7 +370,7 @@ export class TabBar<T> extends Widget {
     if (value) {
       this.node.classList.add('lm-mod-scrollable');
     } else {
-      this.node.classList.add('lm-mod-scrollable');
+      this.node.classList.remove('lm-mod-scrollable');
     }
     this.maybeSwitchScrollButtons();
   }
@@ -708,14 +708,40 @@ export class TabBar<T> extends Widget {
       content[i] = renderer.renderTab({ title, current, zIndex });
     }
     VirtualDOM.render(content, this.contentNode);
+
     this.maybeSwitchScrollButtons();
+
+    // Scroll the current tab into view.
+    this.scrollCurrentIntoView();
   }
 
   protected onResize(msg: Widget.ResizeMessage): void {
     super.onResize(msg);
     this.maybeSwitchScrollButtons();
   }
 
+  /**
+   * Scroll the current tab into view.
+   */
+  protected scrollCurrentIntoView() {
+    if (this.scrollingEnabled) {
+      const currentNode = this.contentNode.children.item(this.currentIndex);
+      if (currentNode) {
+        currentNode.scrollIntoView();
+        if (this.orientation == 'horizontal') {
+          currentNode.scrollTop = 0;
+        } else {
+          currentNode.scrollLeft = 0;
+        }
+      } else {
+        console.error('Current tab node not found');
+      }
+    }
+  }
+
+  /**
+   * Show/hide scroll buttons if needed.
+   */
   protected maybeSwitchScrollButtons() {
     const scrollBefore = this.scrollBeforeButtonNode;
     const scrollAfter = this.scrollAfterButtonNode;
@@ -1174,6 +1200,11 @@ export class TabBar<T> extends Widget {
         return;
       }
 
+      // Do nothing if neither press nor release was on a tab.
+      if (index === -1 && data.index === -1) {
+        return;
+      }
+
       // Ignore the release if the title is not closable.
       let title = this._titles[index];
       if (!title.closable) {

packages/widgets/style/tabbar.css

@@ -94,7 +94,7 @@
   display: none !important;
 }
 
-.lm-TabBar-addButton.lm-mod-hidden {
+.lm-TabBar-button.lm-mod-hidden {
   display: none !important;
 }