Bug 1977741 - Only update pinned tabs height when sidebar width changes r=nsharpley

MasterIfeanyi · nikk15 · commit e7c1bff35d36 · 2026-04-01T15:48:04.000Z
Differential Revision: https://phabricator.services.mozilla.com/D290058
diff --git a/browser/components/sidebar/browser-sidebar.js b/browser/components/sidebar/browser-sidebar.js
@@ -1492,7 +1492,10 @@ var SidebarController = {
     );
     this._panelResizeObserver.observe(this._box);
 
-    this._launcherDropHandler = () => (this._state.launcherDragActive = false);
+    this._launcherDropHandler = () => {
+      this._state.launcherDragActive = false;
+      this.updatePinnedTabsHeightOnResize();
+    };
     this._launcherSplitter.addEventListener(
       "command",
       this._launcherDropHandler
@@ -1516,15 +1519,19 @@ var SidebarController = {
       }
     });
 
-    this._itemsWrapperResizeObserver = new ResizeObserver(async () => {
+    this._itemsWrapperResizeObserver = new ResizeObserver(async ([entry]) => {
       await window.promiseDocumentFlushed(() => {
-        // Adjust pinned tabs container height if needed
         requestAnimationFrame(() => {
-          // If we are currently moving tabs, don't resize
           if (this._pinnedTabsContainer.hasAttribute("dragActive")) {
             return;
           }
-
+          // Only respond to WIDTH changes (sidebar being resized wider/narrower).
+          // Ignoring height changes prevents an infinite resize loop.
+          const newWidth = entry.contentBoxSize[0].inlineSize;
+          if (newWidth === this._pinnedTabsItemsWrapperWidth) {
+            return;
+          }
+          this._pinnedTabsItemsWrapperWidth = newWidth;
           this.updatePinnedTabsHeightOnResize();
         });
       });
@@ -1579,17 +1586,32 @@ var SidebarController = {
   },
 
   updatePinnedTabsHeightOnResize() {
+    // Skip during sidebar width drag to prevent unpinned tabs from jumping.
+    // The drop handler calls this function once cleanly after drag ends.
+    if (this.isLauncherDragging) {
+      return;
+    }
+
+    const preferredHeight = this._state.launcherExpanded
+      ? this._state.expandedPinnedTabsHeight
+      : this._state.collapsedPinnedTabsHeight;
+
+    if (!preferredHeight) {
+      return;
+    }
+
+    if (this.isLauncherDragging) {
+      // Clear height during drag so we can measure the natural content height accurately
+      this._pinnedTabsContainer.style.height = "";
+    }
+
     let itemsWrapperHeight = window.windowUtils.getBoundsWithoutFlushing(
       this._pinnedTabsItemsWrapper
     ).height;
-    if (this._state.pinnedTabsHeight > itemsWrapperHeight) {
-      this._state.pinnedTabsHeight = itemsWrapperHeight;
-      if (this._state.launcherExpanded) {
-        this._state.expandedPinnedTabsHeight = this._state.pinnedTabsHeight;
-      } else {
-        this._state.collapsedPinnedTabsHeight = this._state.pinnedTabsHeight;
-      }
-    }
+
+    // Clamp for display only — never overwrite the user's saved preference
+    const clampedHeight = Math.min(preferredHeight, itemsWrapperHeight);
+    this._pinnedTabsContainer.style.height = `${clampedHeight}px`;
   },
 
   /**
