Implement scrollbar state management and adjust overflowing behavior in Zen UI components

src/browser/base/content/ZenStartup.mjs

@@ -101,7 +101,8 @@
         // to how Gecko internally rounds in those cases, we allow for some
         // minor differences (the internal Gecko layout size is 1/60th of a
         // pixel, so 0.02 should cover it).
-        let overflowing = contentSize - tabContainer.arrowScrollbox.scrollClientSize > 0.02;
+        //let overflowing = contentSize - tabContainer.arrowScrollbox.scrollClientSize > 0.02;
+        let overflowing = true; // cheatign the system, because we want to always show make the element overflowing
 
         window.requestAnimationFrame(() => {
           tabContainer.arrowScrollbox.toggleAttribute('overflowing', overflowing);

src/browser/base/content/ZenUIManager.mjs

@@ -29,6 +29,7 @@ var gZenUIManager = {
     });
 
     window.addEventListener('TabClose', this.onTabClose.bind(this));
+    this.tabsWrapper.addEventListener('scroll', this.saveScrollbarState.bind(this));
   },
 
   updateTabsToolbar() {
@@ -68,10 +69,13 @@ var gZenUIManager = {
     this._scrollbarState = this.tabsWrapper.scrollTop;
   },
 
+  restoreScrollbarState() {
+    this.tabsWrapper.scrollTop = this._scrollbarState;
+  },
+
   onTabClose(event) {
     this.updateTabsToolbar();
-    this.tabsWrapper.scrollTop = this._scrollbarState;
-    this._scrollbarState = 0;
+    this.restoreScrollbarState();
   },
 
   openAndChangeToTab(url, options) {

src/browser/base/zen-components/ZenCompactMode.mjs

@@ -144,6 +144,7 @@ var gZenCompactModeManager = {
   getAndApplySidebarWidth() {
     let sidebarWidth = this.sidebar.getBoundingClientRect().width;
     if (sidebarWidth > 1) {
+      gZenUIManager.restoreScrollbarState();
       this.sidebar.style.setProperty('--zen-sidebar-width', `${sidebarWidth}px`);
     }
     return sidebarWidth;