Merge branch 'dev' into glance-buttons-overflow

2025-10-16 14:56:14 +00:00 · 2025-03-22 16:24:01 +01:00
parent d808e72d2a 75a75d78ec
commit af0eeb710e
64 changed files with 1133 additions and 771 deletions
--- a/src/browser/base/content/ZenCustomizableUI.sys.mjs
+++ b/src/browser/base/content/ZenCustomizableUI.sys.mjs
@@ -125,12 +125,5 @@ export var ZenCustomizableUI = new (class {
  registerToolbarNodes(window) {
    window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-top-buttons'));
    window.CustomizableUI.registerToolbarNode(window.document.getElementById('zen-sidebar-bottom-buttons'));
-    window.addEventListener(
-      'DOMContentLoaded',
-      () => {
-        this._dispatchResizeEvent(window);
-      },
-      { once: true }
-    );
  }
 })();
--- a/src/browser/base/content/ZenStartup.mjs
+++ b/src/browser/base/content/ZenStartup.mjs
@@ -58,6 +58,7 @@

    closeWatermark() {
      document.documentElement.removeAttribute('zen-before-loaded');
+      window.dispatchEvent(new window.Event('resize')); // To recalculate the layout
      if (Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
        gZenUIManager.motion
          .animate(
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/src/browser/base/content/ZenUIManager.mjs
@@ -65,6 +65,7 @@ var gZenUIManager = {
    tabs.style.removeProperty('flex');
    tabs.style.maxHeight = height + 'px';
    gZenVerticalTabsManager.actualWindowButtons.removeAttribute('zen-has-hover');
+    gURLBar.updateLayoutBreakout();
  },

  get tabsWrapper() {
@@ -249,7 +250,7 @@ var gZenUIManager = {
    const toast = this._createToastElement(messageId, options);
    this._toastContainer.removeAttribute('hidden');
    this._toastContainer.appendChild(toast);
-    await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', bounce: 0.5, duration: 0.5 });
+    await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', bounce: 0.5, duration: 0.7 });
    await new Promise((resolve) => setTimeout(resolve, 3000));
    await this.motion.animate(toast, { opacity: [1, 0], scale: [1, 0.9] }, { duration: 0.2, bounce: 0 });
    const toastHeight = toast.getBoundingClientRect().height;
@@ -260,6 +261,10 @@ var gZenUIManager = {
      this._toastContainer.setAttribute('hidden', 'true');
    }
  },
+
+  get panelUIPosition() {
+    return gZenVerticalTabsManager._hasSetSingleToolbar ? 'bottomleft topleft' : 'bottomright topright';
+  },
 };

 var gZenVerticalTabsManager = {
@@ -361,7 +366,7 @@ var gZenVerticalTabsManager = {
            marginBottom: isLastTab() ? [] : [transform, '0px'],
          },
          {
-            duration: 0.2,
+            duration: 0.12,
            easing: 'ease-out',
          }
        )
@@ -371,9 +376,16 @@ var gZenVerticalTabsManager = {
          aTab.style.removeProperty('opacity');
        });
      gZenUIManager.motion
-        .animate(aTab.querySelector('.tab-content'), {
-          filter: ['blur(1px)', 'blur(0px)'],
-        })
+        .animate(
+          aTab.querySelector('.tab-content'),
+          {
+            filter: ['blur(1px)', 'blur(0px)'],
+          },
+          {
+            duration: 0.12,
+            easing: 'ease-out',
+          }
+        )
        .then(() => {
          aTab.querySelector('.tab-stack').style.removeProperty('filter');
        });
--- a/src/browser/base/content/browser-box-inc-xhtml.patch
+++ b/src/browser/base/content/browser-box-inc-xhtml.patch
@@ -1,8 +1,8 @@
 diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
-index 7f71abe7d80e4c09dd088517ec9ef106c7cb8654..7e764f08346a048fd352d7f7c06ea434f9b19903 100644
+index 7d7e8697f02f90d4f336c9ab0a73a89848e0c21c..2fd19f3b43db4bdd99e65fecd1481f80d4541a7a 100644
 --- a/browser/base/content/browser-box.inc.xhtml
 +++ b/browser/base/content/browser-box.inc.xhtml
-@@ -22,7 +22,14 @@
+@@ -23,7 +23,14 @@
     <browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
   </vbox>
   <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
--- a/src/browser/base/content/zen-images/note-indicator.svg
+++ b/src/browser/base/content/zen-images/note-indicator.svg
@@ -1,13 +1,13 @@
 <svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="none"/>
-  
+
    <style type="text/css"><![CDATA[
    .note {
-      fill: white;
+      fill: currentColor;
      transform-box: fill-box;
      transform-origin: center;
    }
-    
+
    @keyframes flyUpLeft {
      from {
        opacity: 1;
@@ -41,7 +41,7 @@
    }*/
  ]]></style>

-  
+
  <g class="note-group">
    <g class="note" style="animation: flyUpLeft 3s ease-in-out infinite; animation-delay: 0s;">
      <path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
@@ -51,7 +51,7 @@
        c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
        C475.403,321.974,514.2,236.599,448.231,166.755z"/>
    </g>
-    
+
    <g class="note" style="animation: flyUpRight 3s ease-in-out infinite; animation-delay: 0.5s;">
      <path transform="translate(15,40) scale(0.0078)" d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
        c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292
@@ -60,7 +60,7 @@
        c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
        H512V90.785V2.152L133.703,45.86z"/>
    </g>
-    
+
    <g class="note" style="animation: flyUpCenter 3s ease-in-out infinite; animation-delay: 1s;">
      <path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
        c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
@@ -78,7 +78,7 @@
        c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
        H512V90.785V2.152L133.703,45.86z"/>
    </g>
-    
+
    <g class="note" style="animation: flyUpRight 3s ease-in-out infinite; animation-delay: 2s;">
      <path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
        c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
@@ -87,7 +87,7 @@
        c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
        C475.403,321.974,514.2,236.599,448.231,166.755z"/>
    </g>
-    
+
    <g class="note" style="animation: flyUpCenter 3s ease-in-out infinite; animation-delay: 2.5s;">
      <path transform="translate(15,40) scale(0.0078)" d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
        c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292
--- a/src/browser/base/content/zen-media-player.inc.xhtml
+++ b/src/browser/base/content/zen-media-player.inc.xhtml
@@ -5,30 +5,30 @@
  hidden="true">
  <toolbaritem>
    <vbox id="zen-media-main-vbox">
-      <hbox id="zen-media-service-hbox" class="show-on-hover">
-        <hbox id="zen-media-service-button">
-          <image/>
+      <vbox>
+        <hbox id="zen-media-info-container" class="show-on-hover">
+          <vbox id="zen-media-info-vbox">
+            <label id="zen-media-title" fadein="true"/>
+            <label id="zen-media-artist" fadein="true"/>
+          </vbox>
+          <hbox id="zen-media-buttons-hbox">
+            <toolbarbutton id="zen-media-pip-button"
+              class="toolbarbutton-1"
+              oncommand="gZenMediaController.onMediaPip();" />
+            <toolbarbutton id="zen-media-close-button"
+              class="toolbarbutton-1"
+              oncommand="gZenMediaController.onControllerClose();" />
+          </hbox>
        </hbox>
-        <hbox id="zen-media-service-title" fadein="true">
-          <label class="service" />
-          <label class="tld" />
+        <hbox id="zen-media-progress-hbox"  class="show-on-hover">
+          <label id="zen-media-current-time">0:00</label>
+          <html:input type="range" id="zen-media-progress-bar"
+            value="0" min="0" max="100" step="0.1"
+            oninput="gZenMediaController.onMediaSeekDrag(event);"
+            onchange="gZenMediaController.onMediaSeekComplete(event);"/>
+          <label id="zen-media-duration">0:00</label>
        </hbox>
-      </hbox>
-      
-      <vbox id="zen-media-info-vbox" class="show-on-hover">
-        <label id="zen-media-title" fadein="true"/>
-        <label id="zen-media-artist" fadein="true"/>
      </vbox>
-
-      <hbox id="zen-media-progress-hbox"  class="show-on-hover">
-        <label id="zen-media-current-time">0:00</label>
-        <html:input type="range" id="zen-media-progress-bar" 
-          value="0" min="0" max="100" step="0.1"
-          oninput="gZenMediaController.onMediaSeekDrag(event);"
-          onchange="gZenMediaController.onMediaSeekComplete(event);"/>
-        <label id="zen-media-duration">0:00</label>
-      </hbox>
-      
      <hbox id="zen-media-controls-hbox">
        <toolbarbutton id="zen-media-focus-button"
          class="toolbarbutton-1"
--- a/src/browser/base/content/zen-styles/zen-animations.css
+++ b/src/browser/base/content/zen-styles/zen-animations.css
@@ -290,3 +290,23 @@
    transform: scale(1);
  }
 }
+
+@keyframes zen-back-and-forth-text {
+  0%,
+  10% {
+    transform: translateX(0);
+    left: 0;
+  }
+
+  45%,
+  65% {
+    transform: translateX(calc(-100% - 5px));
+    left: 100%;
+  }
+
+  90%,
+  100% {
+    transform: translateX(0);
+    left: 0;
+  }
+}
--- a/src/browser/base/content/zen-styles/zen-browser-ui.css
+++ b/src/browser/base/content/zen-styles/zen-browser-ui.css
@@ -109,7 +109,7 @@
 }

 #zen-main-app-wrapper {
-  background: transparent;
+  background: var(--zen-themed-toolbar-bg-transparent);
  overflow: hidden;

  & > * {
--- a/src/browser/base/content/zen-styles/zen-compact-mode.css
+++ b/src/browser/base/content/zen-styles/zen-compact-mode.css
@@ -16,10 +16,12 @@
    #zen-tabbox-wrapper {
      /* Remove extra 1px of margine we have to add to the tabbox */
      margin-left: 0 !important;
+      margin-right: 0 !important;
    }

    #zen-appcontent-wrapper {
      margin-left: var(--zen-element-separation) !important;
+      margin-right: var(--zen-element-separation) !important;

      & #tabbrowser-tabbox {
        margin-left: 0 !important;
@@ -92,7 +94,7 @@

      & .browserSidebarContainer {
        margin-left: 0 !important;
-        margin-right: var(--zen-element-separation) !important;
+        margin-right: 0 !important;
      }
    }

--- a/src/browser/base/content/zen-styles/zen-decks.css
+++ b/src/browser/base/content/zen-styles/zen-decks.css
@@ -278,6 +278,10 @@

  &[side='right'] {
    right: 0;
+
+    &[has-split-view='true'] {
+      right: var(--zen-element-separation);
+    }
  }

  &::after {
--- a/src/browser/base/content/zen-styles/zen-glance.css
+++ b/src/browser/base/content/zen-styles/zen-glance.css
@@ -54,6 +54,10 @@

    & label {
      display: none;
+
+      &::before {
+        text-overflow: unset;
+      }
    }

    & image {
@@ -78,7 +82,7 @@
      color: white;
      fill: white;
      & label {
-        max-width: 100px;
+        max-width: 4rem;
        margin-left: 8px;
      }

--- a/src/browser/base/content/zen-styles/zen-gradient-generator.css
+++ b/src/browser/base/content/zen-styles/zen-gradient-generator.css
@@ -5,7 +5,7 @@
 */

 #PanelUI-zen-gradient-generator {
-  --panel-width: 300px;
+  --panel-width: 320px;
  --panel-padding: 10px;
  min-width: var(--panel-width);
 }
--- a/src/browser/base/content/zen-styles/zen-media-controls.css
+++ b/src/browser/base/content/zen-styles/zen-media-controls.css
@@ -1,5 +1,5 @@
 #zen-media-controls-toolbar {
-  --progress-height: 5px;
+  --progress-height: 4px;
  --button-spacing: 2px;

  display: flex;
@@ -13,6 +13,23 @@
    color: white;
  }

+  #zen-media-buttons-hbox {
+    align-items: start;
+    margin-top: -4px;
+    --toolbarbutton-outer-padding: 2px;
+  }
+
+  &:not([can-pip]) {
+    #zen-media-info-vbox {
+      width: calc(100% - 26px);
+      flex-shrink: 0;
+    }
+
+    #zen-media-pip-button {
+      display: none;
+    }
+  }
+
  #zen-media-prev-button,
  #zen-media-play-pause-button,
  #zen-media-next-button {
@@ -50,42 +67,49 @@
    &::-moz-range-thumb {
      background: var(--zen-primary-color);
      border: none;
-      width: 14px;
-      height: 14px;
+      width: calc(var(--progress-height) * 2);
+      height: calc(var(--progress-height) * 2);
      border-radius: 50%;
      cursor: pointer;
+      transform: scale(0);
+      transition: transform 0.15s ease-out;
+    }
+
+    &:hover::-moz-range-thumb {
+      transform: scale(1);
    }
  }

  &:hover {
-    & #zen-media-main-vbox {
-      transition-delay: 0s;
-      gap: 6px;
-    }
-
    .show-on-hover {
      max-height: 50px;
-      padding: 2px 6px;
+      padding: 5px;
      margin-bottom: 0;
      opacity: 1;
-      transform: translateY(0);
+      transform: translateY(0) !important;
+      pointer-events: auto;
    }
  }

-  &:not(:hover) {
-    &.playing:not([muted]) #zen-media-focus-button::after {
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background-repeat: no-repeat;
-      opacity: 1;
-      background: url('chrome://browser/content/zen-images/note-indicator.svg') no-repeat;
-      top: -50%;
-      left: 50%;
-      transform: translateX(-50%);
-      z-index: -1;
-    }
+  & #zen-media-focus-button::after {
+    content: '';
+    position: absolute;
+    width: 110%;
+    height: 110%;
+    background-repeat: no-repeat;
+    opacity: 1;
+    background: url('chrome://browser/content/zen-images/note-indicator.svg') no-repeat;
+    top: -70%;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 0;
+    pointer-events: none;
+    transition: opacity 0.8s ease;
+    opacity: 1;
+  }
+
+  &:is(:not(.playing:not([muted])), :hover) #zen-media-focus-button::after {
+    opacity: 0;
  }

  #zen-media-focus-button {
@@ -93,47 +117,44 @@
    transition:
      opacity 0.2s ease,
      transform 0.2s ease;
+    position: relative;

-    @container (max-width: 185px) {
-      width: 0;
-      height: 0;
-      opacity: 0;
-      padding: 0;
-      margin-right: -10%;
-      transform: translateX(-20px);
-      transition: margin 0.15s ease-in-out;
-    }
-
-    @container (min-width: 185px) {
-      opacity: 1;
-      transform: translateX(0);
+    & image {
+      &:-moz-broken {
+        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3C/svg%3E") !important;
+        background: color-mix(in srgb, var(--zen-primary-color) 70%, transparent 30%);
+      }
    }
  }

-  toolbaritem {
+  & > toolbaritem {
+    --zen-media-control-bg: light-dark(rgba(255, 255, 255, 0.87), rgba(0, 0, 0, 0.87));
    flex-grow: 1;
    padding: 0;
    transition: padding 0.3s ease-out;
    position: absolute;
    left: 0;
    bottom: 0;
-    padding: 4px;
+    padding: 4px 6px;
    border-radius: var(--border-radius-medium);
-    background: light-dark(rgb(255, 255, 255), rgb(11, 11, 11)) !important;
+    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+    background-color: var(--zen-media-control-bg);
+    backdrop-filter: saturate(3) contrast(2) blur(10px);
    width: 100%;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+    will-change: transform;
  }

  .show-on-hover {
    max-height: 0;
    opacity: 0;
-    transform: translateY(5px);
+    transform: translateY(1rem);
    padding: 0 6px;
+    pointer-events: none;
    transition:
-      max-height 0.1s ease-in-out,
-      opacity 0.1s ease-in-out,
-      transform 0.05s ease-in-out,
-      padding 0.15s ease-in-out;
+      max-height 0.2s ease,
+      opacity 0.2s ease,
+      transform 0.2s ease,
+      padding 0.2s ease;
  }

  #zen-media-current-time,
@@ -142,6 +163,7 @@
    font-size: x-small;
    opacity: 0.7;
    font-weight: 500;
+    font-variant-numeric: tabular-nums;
  }
 }

@@ -159,28 +181,6 @@
  }
 }

-#zen-media-service-title,
-#zen-media-title,
-#zen-media-artist {
-  white-space: nowrap;
-  width: 0;
-  margin-left: 0;
-}
-
-#zen-media-service-title {
-  align-self: center;
-  font-size: math;
-  margin-left: 6px;
-
-  & label {
-    margin: 0;
-  }
-
-  & .tld {
-    opacity: 0.5;
-  }
-}
-
 #zen-media-title,
 #zen-media-artist {
  align-self: start;
@@ -188,48 +188,73 @@

 #zen-media-artist {
  opacity: 0.7;
-  font-weight: 500;
  font-size: smaller;
+
+  &:empty {
+    display: none;
+  }
 }

 #zen-media-title {
  height: 16px;
  font-size: math;
-  font-weight: bold;
 }

 #zen-media-main-vbox,
-#zen-media-service-hbox,
 #zen-media-info-vbox,
 #zen-media-progress-hbox {
  width: 100%;
 }

-#zen-media-service-hbox {
-  padding-top: 6px;
-}
-
 #zen-media-info-vbox {
+  #zen-media-controls-toolbar:not([media-position-hidden='true']) & {
+    transition-delay: 0.01s !important;
+  }
+  overflow-x: hidden;
+  overflow-x: visible;
+  white-space: nowrap;
+  /* Overflow inner box shadow from the left to simulate overflow */
+  mask-image: linear-gradient(to left, transparent, var(--zen-media-control-bg) 0.6em);
+  min-width: 1px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 0.6em;
+    background: linear-gradient(to right, var(--zen-media-control-bg) 0%, transparent 100%);
+    pointer-events: none;
+    top: 6px;
+    left: 0;
+    height: calc(100% - 6px);
+    z-index: 1;
+  }
+
  & label {
-    width: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
+    min-height: 16px;
+    margin-left: 0;
+    font-weight: 500;
+    position: relative; /* For the animation */
+
+    &[overflow] {
+      animation: zen-back-and-forth-text 10s infinite ease-in-out;
+    }
  }
 }

 #zen-media-main-vbox {
  height: 100%;
  justify-content: space-between;
-  transition: gap 0.1s ease-out;
-  transition-delay: 0.1s;
-  gap: 0px;
 }

 #zen-media-progress-hbox {
  flex-grow: 1;
  height: 1.1rem;
  align-items: center;
+  padding-top: 0px !important;
+
+  #zen-media-controls-toolbar[media-position-hidden='true'] & {
+    display: none;
+  }
 }

 #zen-media-controls-hbox {
@@ -239,13 +264,17 @@
  --toolbarbutton-outer-padding: 0;
 }

-#zen-media-service-button {
-  align-items: center;
+#zen-media-info-container {
+  padding-right: 0 !important;
+}

-  & image {
-    width: 16px;
-    height: 16px;
-    border-radius: 4px;
+#zen-media-controls-toolbar[can-pip] {
+  #zen-media-info-vbox {
+    flex-shrink: 1;
+  }
+
+  #zen-media-pip-button {
+    display: flex;
  }
 }

--- a/src/browser/base/content/zen-styles/zen-popup.css
+++ b/src/browser/base/content/zen-styles/zen-popup.css
@@ -360,9 +360,14 @@ menuitem {
  & .zen-toast {
    padding: 0.9rem 0.8rem;
    border-radius: 12px;
-    background-color: var(--button-primary-bgcolor);
+    background: linear-gradient(
+      170deg,
+      var(--zen-primary-color) -40%,
+      color-mix(in srgb, var(--zen-primary-color) 85%, #0f0f0f 15%)
+    );
    color: var(--button-primary-color);
-    box-shadow: var(--zen-big-shadow);
+    box-shadow: 0 0 14px 3px rgba(0, 0, 0, 0.05);
+    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    font-weight: 500;
    gap: 5px;
--- a/src/browser/base/content/zen-styles/zen-sidebar-panels.css
+++ b/src/browser/base/content/zen-styles/zen-sidebar-panels.css
@@ -111,7 +111,7 @@
  background: transparent;
  border: none;
  cursor: ew-resize;
-  z-index: 2;
+  z-index: 3;

  &:is(.zen-split-view-splitter[orient='vertical']) {
    /* Bit of a hacky solution, but it works */
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -108,7 +108,7 @@
  }

  & #zen-sidebar-top-buttons {
-    margin: var(--zen-element-separation) 0 calc(var(--zen-toolbox-padding) / 2) 0;
+    margin: var(--zen-toolbox-padding) 0 calc(var(--zen-toolbox-padding) / 2) 0;
  }

  & #PanelUI-menu-button {
@@ -153,8 +153,6 @@
  min-width: var(--zen-toolbox-min-width);
  margin-top: 0 !important; /* Fix full screen mode */

-  padding-bottom: var(--zen-element-separation) !important;
-
  border: none;
  order: 0 !important;

@@ -257,16 +255,31 @@
  }

  & .tabbrowser-tab {
-    transition: scale 0.07s ease;
+    &,
+    & .tab-content > image {
+      transition: scale 0.07s ease;
+    }

    &[zen-empty-tab] {
      display: none;
    }

-    #tabbrowser-tabs:not([movingtab]) &:active {
+    #tabbrowser-tabs:not([movingtab]) &:active:not(:has(.tab-content > image:active)) {
      scale: var(--zen-active-tab-scale);
    }

+    #tabbrowser-tabs:not([movingtab]) & .tab-content > image:active {
+      scale: 0.92;
+    }
+
+    & .tab-icon-image {
+      &:not([src]),
+      &:-moz-broken {
+        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3C/svg%3E") !important;
+        background: color-mix(in srgb, var(--zen-primary-color) 30%, transparent 70%);
+      }
+    }
+
    max-width: unset;
    padding: 0 !important;

@@ -456,18 +469,11 @@
    margin-top: 0;
  }

-  & #zen-workspaces-button[as-button='true'] {
-    width: calc(100% - 10px) !important;
-  }
-
  & .zen-current-workspace-indicator-icon[no-icon='true'] {
    display: none;
  }

  & #zen-workspaces-button {
-    margin-left: 2px;
-    margin-right: 2px;
-
    & .zen-workspace-sidebar-icon[no-icon='true'] {
      display: none;
    }
@@ -756,14 +762,6 @@
  }
  & #zen-workspaces-button {
    flex-direction: column;
-    &:not([as-button='true']) {
-      & toolbarbutton {
-        &[active='true']::after {
-          bottom: 50% !important;
-          transform: translateY(50%) !important;
-        }
-      }
-    }
  }
 }

@@ -1049,14 +1047,14 @@
 #zen-essentials-container {
  padding-bottom: var(--zen-toolbox-padding);
  overflow: hidden;
-  gap: 3px;
+  gap: calc(var(--zen-toolbox-padding) - 2px);
 }

 #zen-essentials-container {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  opacity: 1;
-  grid-template-columns: repeat(auto-fit, minmax(48px, auto));
+  grid-template-columns: repeat(auto-fit, minmax(49px, auto));
  overflow: hidden;
  scrollbar-width: thin;
  display: grid;
--- a/src/browser/base/content/zen-styles/zen-theme.css
+++ b/src/browser/base/content/zen-styles/zen-theme.css
@@ -155,16 +155,16 @@

  --input-bgcolor: var(--zen-colors-tertiary) !important;
  --input-border-color: var(--zen-input-border-color) !important;
-  --zen-themed-toolbar-bg: light-dark(rgb(240, 240, 244), #161616);
-  --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #161616);
+  --zen-themed-toolbar-bg: light-dark(rgb(240, 240, 244), #171717);
+  --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #171717);

-  --zen-workspace-indicator-height: 45px;
+  --zen-workspace-indicator-height: 48px;

  @media (-moz-windows-mica) or (-moz-platform: macos) {
    background: transparent;
    --zen-themed-toolbar-bg-transparent: transparent;
    @media (-moz-bool-pref: 'zen.widget.windows.acrylic') {
-      --zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 75%, transparent 25%);
+      --zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 35%, transparent 65%);
    }
  }

--- a/src/browser/base/content/zen-styles/zen-workspaces.css
+++ b/src/browser/base/content/zen-styles/zen-workspaces.css
@@ -17,98 +17,83 @@
    display: none !important;
  }

-  &:not([as-button='true']) {
-    --toolbarbutton-hover-background: transparent !important;
-    border-radius: var(--zen-button-border-radius) !important;
-    background: transparent;
-    padding: 2px;
-    appearance: unset !important;
-    height: fit-content;
-    gap: 3px;
+  --toolbarbutton-hover-background: transparent !important;
+  border-radius: var(--zen-button-border-radius) !important;
+  background: transparent;
+  appearance: unset !important;
+  height: fit-content;
+  gap: 3px;
+
+  container-type: inline-size;
+  width: 100%;
+
+  & toolbarbutton {
+    margin: 0;
+    width: 25px;
+    display: flex;
+    justify-content: center;
+    padding: 0 !important;
+    align-items: center;
+    position: relative;
+
+    & .zen-workspace-icon[no-icon='true'] {
+      width: 6px;
+      height: 6px;
+      background: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
+      border-radius: 50%;
+    }
+
+    filter: grayscale(1);
+    opacity: 0.5;
+    transition:
+      filter 0.2s,
+      opacity 0.2s,
+      width 0.1s;
+
+    &[active='true'],
+    &:hover {
+      filter: grayscale(0);
+      opacity: 1;
+    }
+
+    &:hover {
+      background-color: var(--zen-toolbar-element-bg);
+    }
+  }
+
+  &[overflow] {
+    gap: 0 !important;

    & toolbarbutton {
-      margin: auto;
-      width: 25px;
-      display: flex;
-      justify-content: center;
-      padding: 0 !important;
-      align-items: center;
-      position: relative;
-
-      @media (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
-        &:not([active='true']):not(:hover) {
-          &::after {
-            content: '';
-            position: absolute;
-            width: 4px;
-            border-radius: 99px;
-            height: 4px;
-            background: color-mix(
-              in srgb,
-              var(--zen-primary-color) 10%,
-              light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4)) 90%
-            );
-            left: 50%;
-            top: 50%;
-            filter: saturate(140%) brightness(110%) !important;
-            transform: translate(-50%, -50%);
-          }
-
-          & .zen-workspace-icon {
-            display: none;
-          }
-        }
-      }
-
-      @media not (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
-        & {
-          filter: grayscale(1);
-          opacity: 0.5;
-          transition:
-            filter 0.2s,
-            opacity 0.2s;
-        }
-
-        &[active='true'],
-        &:hover {
-          filter: grayscale(0);
-          opacity: 1;
-        }
-
-        &:hover {
-          background-color: var(--zen-toolbar-element-bg);
-        }
-      }
-    }
-  }
-
-  &[as-button='true'] {
-    border-radius: var(--tab-border-radius);
-
-    &:hover {
-      background: var(--toolbarbutton-hover-background);
-    }
-  }
-
-  &[as-button='true'] {
-    margin: auto;
-    padding: var(--toolbarbutton-inner-padding) !important;
-    width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
-    height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
-    border-radius: var(--tab-border-radius) !important;
-
-    :root:not([zen-sidebar-expanded='true']) #navigator-toolbox & {
-      & .zen-workspace-sidebar-name {
-        display: none;
-      }
-
-      & .zen-workspace-sidebar-icon {
-        margin-inline-end: 0 !important;
-      }
+      margin: 0;
    }

-    &:hover {
-      background: var(--toolbarbutton-hover-background) !important;
+    & toolbarbutton:not([active='true']),
+    &:has(toolbarbutton:hover) toolbarbutton[active='true'] {
+      &:not(:hover) {
+        width: min(var(--zen-overflowed-workspace-button-width), 25px);
+
+        &::after {
+          content: '';
+          position: absolute;
+          width: 4px;
+          border-radius: 99px;
+          height: 4px;
+          background: color-mix(
+            in srgb,
+            var(--zen-primary-color) 10%,
+            light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4)) 90%
+          );
+          left: 50%;
+          top: 50%;
+          filter: saturate(140%) brightness(110%) !important;
+          transform: translate(-50%, -50%);
+        }
+
+        & .zen-workspace-icon {
+          display: none;
+        }
+      }
    }
  }
 }
@@ -133,13 +118,6 @@

 /** Keep these selectors in sync with the ones in vertical-tabs.css */
 #navigator-toolbox {
-  & #zen-workspaces-button[as-button='true'] {
-    width: calc(100% - var(--toolbarbutton-outer-padding));
-    margin: 2px;
-    min-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
-    height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
-  }
-
  & #zen-workspaces-button .zen-workspace-sidebar-name {
    display: block;
  }
@@ -150,8 +128,6 @@

  & #zen-workspaces-button {
    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
    display: flex;
    gap: 0.5ch;
  }
@@ -457,7 +433,7 @@
 }

 .zen-current-workspace-indicator {
-  padding: 15px calc(4px + var(--tab-inline-padding));
+  padding: calc(15px + var(--zen-toolbox-padding)) calc(4px + var(--tab-inline-padding));
  font-weight: 600;
  position: absolute;
  max-height: var(--zen-workspace-indicator-height);
@@ -475,11 +451,10 @@
    pointer-events: none;
    content: '';
    position: absolute;
-    top: 4px;
-    left: 2px;
-    z-index: -1;
-    width: calc(100% - 4px);
-    height: calc(100% - 10px);
+    top: var(--zen-toolbox-padding);
+    left: calc(var(--zen-toolbox-padding) / 2);
+    width: calc(100% - var(--zen-toolbox-padding));
+    height: calc(100% - var(--zen-toolbox-padding) * 2);
  }

  &:hover,
--- a/src/browser/base/zen-components/ZenCompactMode.mjs
+++ b/src/browser/base/zen-components/ZenCompactMode.mjs
@@ -40,6 +40,14 @@ var gZenCompactModeManager = {

    // Clear hover states when window state changes (minimize, maximize, etc.)
    window.addEventListener('sizemodechange', () => this._clearAllHoverStates());
+
+    if (AppConstants.platform == 'macosx') {
+      window.addEventListener('mouseover', (event) => {
+        const buttons = gZenVerticalTabsManager.actualWindowButtons;
+        if (event.target.closest('.titlebar-buttonbox-container') === buttons) return;
+        buttons.removeAttribute('zen-has-hover');
+      });
+    }
  },

  get preference() {
@@ -72,7 +80,7 @@ var gZenCompactModeManager = {
  },

  get sidebarIsOnRight() {
-    if (this._sidebarIsOnRight) {
+    if (typeof this._sidebarIsOnRight !== 'undefined') {
      return this._sidebarIsOnRight;
    }
    this._sidebarIsOnRight = Services.prefs.getBoolPref('zen.tabs.vertical.right-side');
@@ -337,9 +345,9 @@ var gZenCompactModeManager = {
  },

  flashElement(element, duration, id, attrName = 'flash-popup') {
-    if (element.matches(':hover')) {
-      return;
-    }
+    //if (element.matches(':hover')) {
+    //  return;
+    //}
    if (this._flashTimeouts[id]) {
      clearTimeout(this._flashTimeouts[id]);
    } else {
@@ -363,6 +371,8 @@ var gZenCompactModeManager = {
      let target = this.hoverableElements[i].element;
      const onEnter = (event) => {
        if (event.type === 'mouseenter' && !event.target.matches(':hover')) return;
+        // Dont register the hover if the urlbar is floating and we are hovering over it
+        if (event.target.querySelector('#urlbar[zen-floating-urlbar]')) return;
        this.clearFlashTimeout('has-hover' + target.id);
        window.requestAnimationFrame(() => target.setAttribute('zen-has-hover', 'true'));
      };
--- a/src/browser/base/zen-components/ZenGradientGenerator.mjs
+++ b/src/browser/base/zen-components/ZenGradientGenerator.mjs
@@ -500,9 +500,8 @@
      const centerPosition = { x: rect.width / 2, y: rect.height / 2 };

      const harmonyAngles = getColorHarmonyType(dots.length + (action === 'add' ? 1 : action === 'remove' ? -1 : 0), this.dots);
-      if (!harmonyAngles || harmonyAngles.angles.length === 0) return dots;
-
      this.useAlgo = harmonyAngles.type;
+      if (!harmonyAngles || harmonyAngles.angles.length === 0) return dots;

      let primaryDot = dots.find((dot) => dot.ID === 0);
      if (!primaryDot) return [];
@@ -638,7 +637,7 @@
          }
        });

-        let colorPositions = this.calculateCompliments(this.dots, 'remove', this.useAlgo);
+        let colorPositions = this.calculateCompliments(this.dots, 'remove');
        this.handleColorPositions(colorPositions);
        this.updateCurrentWorkspace();
        return;
@@ -780,7 +779,7 @@
          }
        });

-        let colorPositions = this.calculateCompliments(this.dots, 'remove', this.useAlgo);
+        let colorPositions = this.calculateCompliments(this.dots, 'remove');
        this.handleColorPositions(colorPositions);

        this.updateCurrentWorkspace();
@@ -870,8 +869,11 @@
      if (color.isCustom) {
        return color.c;
      }
-      const toolbarBg = forToolbar ? this.getToolbarModifiedBase() : 'var(--zen-themed-toolbar-bg-transparent)';
-      return `color-mix(in srgb, rgb(${color.c[0]}, ${color.c[1]}, ${color.c[2]}) ${this.currentOpacity * 100}%, ${toolbarBg} ${(1 - this.currentOpacity) * 100}%)`;
+      if (forToolbar) {
+        const toolbarBg = this.getToolbarModifiedBase();
+        return `color-mix(in srgb, rgb(${color.c[0]}, ${color.c[1]}, ${color.c[2]}) ${this.currentOpacity * 100}%, ${toolbarBg} ${(1 - this.currentOpacity) * 100}%)`;
+      }
+      return `rgba(${color.c[0]}, ${color.c[1]}, ${color.c[2]}, ${this.currentOpacity})`;
    }

    getGradient(colors, forToolbar = false) {
--- a/src/browser/base/zen-components/ZenMediaController.mjs
+++ b/src/browser/base/zen-components/ZenMediaController.mjs
@@ -6,8 +6,6 @@ class ZenMediaController {
  mediaTitle = null;
  mediaArtist = null;
  mediaControlBar = null;
-  mediaServiceIcon = null;
-  mediaServiceTitle = null;
  mediaProgressBar = null;
  mediaCurrentTime = null;
  mediaDuration = null;
@@ -16,114 +14,215 @@ class ZenMediaController {

  supportedKeys = ['playpause', 'previoustrack', 'nexttrack'];

+  pipEligibilityMap = new Map();
+  mediaControllersMap = new Map();
+
+  _tabTimeout = null;
+  _controllerSwitchTimeout = null;
+
  init() {
+    if (!Services.prefs.getBoolPref('zen.mediacontrols.enabled', true)) return;
+
    this.mediaTitle = document.querySelector('#zen-media-title');
    this.mediaArtist = document.querySelector('#zen-media-artist');
    this.mediaControlBar = document.querySelector('#zen-media-controls-toolbar');
-    this.mediaServiceIcon = document.querySelector('#zen-media-service-button > image');
-    this.mediaServiceTitle = document.querySelector('#zen-media-service-title');
    this.mediaProgressBar = document.querySelector('#zen-media-progress-bar');
    this.mediaCurrentTime = document.querySelector('#zen-media-current-time');
    this.mediaDuration = document.querySelector('#zen-media-duration');
    this.mediaFocusButton = document.querySelector('#zen-media-focus-button');
    this.mediaProgressBarContainer = document.querySelector('#zen-media-progress-hbox');

+    this.onPositionstateChange = this._onPositionstateChange.bind(this);
+    this.onPlaybackstateChange = this._onPlaybackstateChange.bind(this);
+    this.onSupportedKeysChange = this._onSupportedKeysChange.bind(this);
+    this.onMetadataChange = this._onMetadataChange.bind(this);
+    this.onDeactivated = this._onDeactivated.bind(this);
+    this.onPipModeChange = this._onPictureInPictureModeChange.bind(this);
+
    window.addEventListener('TabSelect', (event) => {
-      if (this._currentBrowser) {
-        if (event.target.linkedBrowser.browserId === this._currentBrowser.browserId) {
-          gZenUIManager.motion
-            .animate(this.mediaControlBar, {
-              opacity: [1, 0],
-              y: [0, 10],
-            })
-            .then(() => {
-              this.mediaControlBar.setAttribute('hidden', 'true');
-            });
-        } else if (this.mediaControlBar.hasAttribute('hidden')) {
-          this.mediaControlBar.removeAttribute('hidden');
-          window.requestAnimationFrame(() => {
-            this.mediaControlBar.style.height =
-              this.mediaControlBar.querySelector('toolbaritem').getBoundingClientRect().height + 'px';
-            gZenUIManager.motion.animate(
-              this.mediaControlBar,
-              {
-                opacity: [0, 1],
-                y: [10, 0],
-              },
-              {}
-            );
-          });
-        }
+      const linkedBrowser = event.target.linkedBrowser;
+      this.switchController();

-        gZenUIManager.updateTabsToolbar();
-      }
-    });
-
-    window.addEventListener('TabClose', (event) => {
      if (this._currentBrowser) {
-        if (event.target.linkedBrowser.browserId === this._currentBrowser.browserId) {
-          this.deinitMediaController(this._currentMediaController);
+        if (linkedBrowser.browserId === this._currentBrowser.browserId) {
+          if (this._tabTimeout) {
+            clearTimeout(this._tabTimeout);
+            this._tabTimeout = null;
+          }
+
+          this.hideMediaControls();
+        } else {
+          this._tabTimeout = setTimeout(() => {
+            if (!this.mediaControlBar.hasAttribute('pip')) this.showMediaControls();
+            else this._tabTimeout = null;
+          }, 500);
        }
      }
    });
+
+    const onTabDiscardedOrClosed = this.onTabDiscardedOrClosed.bind(this);
+    window.addEventListener('TabClose', onTabDiscardedOrClosed);
+
+    window.addEventListener('DOMAudioPlaybackStarted', (event) => {
+      setTimeout(() => {
+        if (
+          this._currentMediaController?.isPlaying &&
+          this.mediaControlBar.hasAttribute('hidden') &&
+          !this.mediaControlBar.hasAttribute('pip')
+        ) {
+          const { selectedBrowser } = gBrowser;
+          if (selectedBrowser.browserId !== this._currentBrowser.browserId) {
+            this.showMediaControls();
+          }
+        }
+      }, 1000);
+
+      this.activateMediaControls(event.target.browsingContext.mediaController, event.target);
+    });
+
+    window.addEventListener('DOMAudioPlaybackStopped', () => this.updateMuteState());
  }

-  /**
-   * Deinitializes a media controller, removing all event listeners and resetting state.
-   * @param {Object} mediaController - The media controller to deinitialize.
-   */
-  deinitMediaController(mediaController) {
+  onTabDiscardedOrClosed(event) {
+    const linkedBrowser = event.target.linkedBrowser;
+    if (!linkedBrowser?.browsingContext?.mediaController) return;
+    this.deinitMediaController(
+      linkedBrowser.browsingContext.mediaController,
+      true,
+      linkedBrowser.browserId === this._currentBrowser?.browserId,
+      true
+    );
+  }
+
+  async deinitMediaController(mediaController, shouldForget = true, shouldOverride = true, shouldHide = true) {
    if (!mediaController) return;

-    mediaController.onpositionstatechange = null;
-    mediaController.onplaybackstatechange = null;
-    mediaController.onsupportedkeyschange = null;
-    mediaController.onmetadatachange = null;
-    mediaController.ondeactivated = null;
+    const retrievedMediaController = this.mediaControllersMap.get(mediaController.id);

-    this._currentMediaController = null;
-    this._currentBrowser = null;
+    if (shouldForget) {
+      mediaController.removeEventListener('pictureinpicturemodechange', this.onPipModeChange);
+      mediaController.removeEventListener('positionstatechange', this.onPositionstateChange);
+      mediaController.removeEventListener('playbackstatechange', this.onPlaybackstateChange);
+      mediaController.removeEventListener('supportedkeyschange', this.onSupportedKeysChange);
+      mediaController.removeEventListener('metadatachange', this.onMetadataChange);
+      mediaController.removeEventListener('deactivated', this.onDeactivated);

-    if (this._mediaUpdateInterval) {
-      clearInterval(this._mediaUpdateInterval);
-      this._mediaUpdateInterval = null;
+      this.mediaControllersMap.delete(mediaController.id);
+      this.pipEligibilityMap.delete(retrievedMediaController?.browser?.browserId);
    }

-    this.mediaControlBar.setAttribute('hidden', 'true');
-    this.mediaControlBar.removeAttribute('muted');
-    this.mediaControlBar.classList.remove('playing');
+    if (shouldOverride) {
+      this._currentMediaController = null;
+      this._currentBrowser = null;

-    gZenUIManager.updateTabsToolbar();
+      if (this._mediaUpdateInterval) {
+        clearInterval(this._mediaUpdateInterval);
+        this._mediaUpdateInterval = null;
+      }
+
+      if (shouldHide) await this.hideMediaControls();
+      this.mediaControlBar.removeAttribute('muted');
+      this.mediaControlBar.classList.remove('playing');
+    }
  }

-  /**
-   * Sets up the media control UI with metadata and position state.
-   * @param {Object} metadata - The media metadata (title, artist, etc.).
-   * @param {Object} positionState - The position state (position, duration).
-   */
-  setupMediaControl(metadata, positionState) {
-    if (!this.mediaControlBar.classList.contains('playing')) {
+  hideMediaControls() {
+    if (this.mediaControlBar.hasAttribute('hidden')) return;
+
+    return gZenUIManager.motion
+      .animate(
+        this.mediaControlBar,
+        {
+          opacity: [1, 0],
+          y: [0, 10],
+        },
+        {
+          duration: 0.1,
+        }
+      )
+      .then(() => {
+        this.mediaControlBar.setAttribute('hidden', 'true');
+        gZenUIManager.updateTabsToolbar();
+        gZenUIManager.restoreScrollbarState();
+      });
+  }
+
+  showMediaControls() {
+    if (this._currentMediaController.isBeingUsedInPIPModeOrFullscreen) return this.hideMediaControls();
+    if (!this.mediaControlBar.hasAttribute('hidden')) return;
+
+    this.updatePipButton();
+    const mediaInfoElements = [this.mediaTitle, this.mediaArtist];
+    for (const element of mediaInfoElements) {
+      element.removeAttribute('overflow'); // So we can properly recalculate the overflow
+    }
+
+    this.mediaControlBar.removeAttribute('hidden');
+    window.requestAnimationFrame(() => {
+      this.mediaControlBar.style.height =
+        this.mediaControlBar.querySelector('toolbaritem').getBoundingClientRect().height + 'px';
+      this.mediaControlBar.style.opacity = 0;
+      gZenUIManager.updateTabsToolbar();
+      gZenUIManager.restoreScrollbarState();
+      gZenUIManager.motion.animate(
+        this.mediaControlBar,
+        {
+          opacity: [0, 1],
+          y: [10, 0],
+        },
+        {}
+      );
+      this.addLabelOverflows(mediaInfoElements);
+    });
+  }
+
+  addLabelOverflows(elements) {
+    for (const element of elements) {
+      const parent = element.parentElement;
+      if (element.scrollWidth > parent.clientWidth) {
+        element.setAttribute('overflow', '');
+      } else {
+        element.removeAttribute('overflow');
+      }
+    }
+  }
+
+  setupMediaController(mediaController, browser) {
+    this._currentMediaController = mediaController;
+    this._currentBrowser = browser;
+
+    this.updatePipButton();
+
+    const positionState = mediaController.getPositionState();
+    this.mediaControllersMap.set(mediaController.id, {
+      controller: mediaController,
+      browser,
+      position: positionState.position,
+      duration: positionState.duration,
+      lastUpdated: Date.now(),
+    });
+  }
+
+  setupMediaControlUI(metadata, positionState) {
+    this.updatePipButton();
+
+    if (!this.mediaControlBar.classList.contains('playing') && this._currentMediaController.isPlaying) {
      this.mediaControlBar.classList.add('playing');
    }

-    // Have it displayed as e.g. <white>youtube</white><grey>.com</grey>
-    let host = this._currentBrowser._originalURI.displayHost;
-    if (host.startsWith('www.')) host = host.slice(4);
-    // note: we might have subdomains, so we need to split the host
-    const [service, ...tld] = host.split('.');
-    this.mediaServiceTitle.querySelector('.service').textContent = service;
-    this.mediaServiceTitle.querySelector('.tld').textContent = '.' + tld.join('.');
-
-    this.mediaServiceIcon.src = this._currentBrowser.mIconURL;
-    this.mediaFocusButton.style.listStyleImage = `url(${this._currentBrowser.mIconURL})`;
+    const iconURL = this._currentBrowser.mIconURL || `page-icon:${this._currentBrowser.currentURI.spec}`;
+    this.mediaFocusButton.style.listStyleImage = `url(${iconURL})`;

    this.mediaTitle.textContent = metadata.title || '';
    this.mediaArtist.textContent = metadata.artist || '';

    gZenUIManager.updateTabsToolbar();
+    gZenUIManager.restoreScrollbarState();

    this._currentPosition = positionState.position;
    this._currentDuration = positionState.duration;
+    this._currentPlaybackRate = positionState.playbackRate;
+
    this.updateMediaPosition();

    for (const key of this.supportedKeys) {
@@ -132,110 +231,149 @@ class ZenMediaController {
    }
  }

-  /**
-   * @param {Object} mediaController - The media controller to activate.
-   * @param {Object} browser - The browser associated with the media controller.
-   */
  activateMediaControls(mediaController, browser) {
    this.updateMuteState();
+    this.switchController();

-    if (this._currentBrowser?.browserId === browser.browserId) return;
-    else {
-      this.deinitMediaController(this._currentMediaController);
-      this._currentMediaController = mediaController;
-      this._currentBrowser = browser;
-    }
-
-    mediaController.onpositionstatechange = this.onPositionstateChange.bind(this);
-    mediaController.onplaybackstatechange = this.onPlaybackstateChange.bind(this);
-    mediaController.onsupportedkeyschange = this.onSupportedKeysChange.bind(this);
-    mediaController.onmetadatachange = this.onMetadataChange.bind(this);
-    mediaController.ondeactivated = this.onDeactivated.bind(this);
+    if (!mediaController.isActive || this._currentBrowser?.browserId === browser.browserId) return;

    const metadata = mediaController.getMetadata();
    const positionState = mediaController.getPositionState();
+    this.mediaControllersMap.set(mediaController.id, {
+      controller: mediaController,
+      browser,
+      position: positionState.position,
+      duration: positionState.duration,
+      lastUpdated: Date.now(),
+    });

-    this.setupMediaControl(metadata, positionState);
+    if (!this._currentBrowser) {
+      this.setupMediaController(mediaController, browser);
+      this.setupMediaControlUI(metadata, positionState);
+    }
+
+    mediaController.addEventListener('pictureinpicturemodechange', this.onPipModeChange);
+    mediaController.addEventListener('positionstatechange', this.onPositionstateChange);
+    mediaController.addEventListener('playbackstatechange', this.onPlaybackstateChange);
+    mediaController.addEventListener('supportedkeyschange', this.onSupportedKeysChange);
+    mediaController.addEventListener('metadatachange', this.onMetadataChange);
+    mediaController.addEventListener('deactivated', this.onDeactivated);
  }

-  /**
-   * @param {Event} event - The deactivation event.
-   */
-  onDeactivated(event) {
-    if (event.target === this._currentMediaController) {
-      this.deinitMediaController(event.target);
+  updatePipEligibility(browser, isEligible) {
+    this.pipEligibilityMap.set(browser.browserId, isEligible);
+  }
+
+  _onDeactivated(event) {
+    this.deinitMediaController(event.target, true, event.target.id === this._currentMediaController.id, true);
+    this.switchController();
+  }
+
+  _onPlaybackstateChange() {
+    if (this._currentMediaController?.isPlaying) {
+      this.mediaControlBar.classList.add('playing');
+    } else {
+      this.switchController();
+      this.mediaControlBar.classList.remove('playing');
    }
  }

-  /**
-   * Updates playback state and UI based on changes.
-   * @param {Event} event - The playback state change event.
-   */
-  onPlaybackstateChange(event) {
-    this.mediaControlBar.classList.toggle('playing', event.target.isPlaying);
-  }
-
-  /**
-   * Updates supported keys in the UI.
-   * @param {Event} event - The supported keys change event.
-   */
-  onSupportedKeysChange(event) {
+  _onSupportedKeysChange(event) {
+    if (event.target.id !== this._currentMediaController?.id) return;
    for (const key of this.supportedKeys) {
      const button = this.mediaControlBar.querySelector(`#zen-media-${key}-button`);
      button.disabled = !event.target.supportedKeys.includes(key);
    }
  }

-  /**
-   * Updates position state and UI when the media position changes.
-   * @param {Event} event - The position state change event.
-   */
-  onPositionstateChange(event) {
-    if (event.target !== this._currentMediaController) return;
+  _onPositionstateChange(event) {
+    const mediaController = this.mediaControllersMap.get(event.target.id);
+    this.mediaControllersMap.set(event.target.id, {
+      ...mediaController,
+      position: event.position,
+      duration: event.duration,
+      lastUpdated: Date.now(),
+    });
+
+    if (event.target.id !== this._currentMediaController?.id) return;

    this._currentPosition = event.position;
    this._currentDuration = event.duration;
+    this._currentPlaybackRate = event.playbackRate;
+
    this.updateMediaPosition();
  }

-  /**
-   * Updates the media progress bar and time display.
-   */
+  switchController(force = false) {
+    let timeout = 3000;
+
+    if (this._controllerSwitchTimeout) {
+      clearTimeout(this._controllerSwitchTimeout);
+      this._controllerSwitchTimeout = null;
+    }
+
+    if (this.mediaControllersMap.size === 1) timeout = 0;
+    this._controllerSwitchTimeout = setTimeout(() => {
+      if (!this._currentMediaController?.isPlaying || force) {
+        const nextController = Array.from(this.mediaControllersMap.values())
+          .filter(
+            (ctrl) =>
+              ctrl.controller.isPlaying &&
+              gBrowser.selectedBrowser.browserId !== ctrl.browser.browserId &&
+              ctrl.controller.id !== this._currentMediaController?.id
+          )
+          .sort((a, b) => b.lastUpdated - a.lastUpdated)
+          .shift();
+
+        if (nextController) {
+          this.deinitMediaController(this._currentMediaController, false, true).then(() => {
+            this.setupMediaController(nextController.controller, nextController.browser);
+            const elapsedTime = Math.floor((Date.now() - nextController.lastUpdated) / 1000);
+
+            this.setupMediaControlUI(nextController.controller.getMetadata(), {
+              position: nextController.position + (nextController.controller.isPlaying ? elapsedTime : 0),
+              duration: nextController.duration,
+            });
+
+            this.showMediaControls();
+          });
+        }
+      }
+
+      this._controllerSwitchTimeout = null;
+    }, timeout);
+  }
+
  updateMediaPosition() {
    if (this._mediaUpdateInterval) {
      clearInterval(this._mediaUpdateInterval);
      this._mediaUpdateInterval = null;
    }

-    if (this._currentDuration >= 900_000) return this.mediaProgressBarContainer.setAttribute('hidden', 'true');
-    else this.mediaProgressBarContainer.removeAttribute('hidden');
+    if (this._currentDuration >= 900_000) return this.mediaControlBar.setAttribute('media-position-hidden', 'true');
+    else this.mediaControlBar.removeAttribute('media-position-hidden');
+
+    if (!this._currentDuration) return;

    this.mediaCurrentTime.textContent = this.formatSecondsToTime(this._currentPosition);
    this.mediaDuration.textContent = this.formatSecondsToTime(this._currentDuration);
    this.mediaProgressBar.value = (this._currentPosition / this._currentDuration) * 100;

-    if (this._currentMediaController?.isPlaying) {
-      this._mediaUpdateInterval = setInterval(() => {
-        if (this._currentMediaController?.isPlaying) {
-          this._currentPosition += 1;
-          if (this._currentPosition > this._currentDuration) {
-            this._currentPosition = this._currentDuration;
-          }
-          this.mediaCurrentTime.textContent = this.formatSecondsToTime(this._currentPosition);
-          this.mediaProgressBar.value = (this._currentPosition / this._currentDuration) * 100;
-        } else {
-          clearInterval(this._mediaUpdateInterval);
-          this._mediaUpdateInterval = null;
+    this._mediaUpdateInterval = setInterval(() => {
+      if (this._currentMediaController?.isPlaying) {
+        this._currentPosition += 1 * this._currentPlaybackRate;
+        if (this._currentPosition > this._currentDuration) {
+          this._currentPosition = this._currentDuration;
        }
-      }, 1000);
-    }
+        this.mediaCurrentTime.textContent = this.formatSecondsToTime(this._currentPosition);
+        this.mediaProgressBar.value = (this._currentPosition / this._currentDuration) * 100;
+      } else {
+        clearInterval(this._mediaUpdateInterval);
+        this._mediaUpdateInterval = null;
+      }
+    }, 1000);
  }

-  /**
-   * Formats seconds into a hours:minutes:seconds string.
-   * @param {number} seconds - The time in seconds.
-   * @returns {string} Formatted time string.
-   */
  formatSecondsToTime(seconds) {
    if (!seconds || isNaN(seconds)) return '0:00';

@@ -251,14 +389,35 @@ class ZenMediaController {
    return `${minutes}:${secs.padStart(2, '0')}`;
  }

-  /**
-   * Updates metadata in the UI.
-   * @param {Event} event - The metadata change event.
-   */
-  onMetadataChange(event) {
+  _onMetadataChange(event) {
+    if (event.target.id !== this._currentMediaController?.id) return;
+    this.updatePipButton();
+
    const metadata = event.target.getMetadata();
    this.mediaTitle.textContent = metadata.title || '';
    this.mediaArtist.textContent = metadata.artist || '';
+
+    const mediaInfoElements = [this.mediaTitle, this.mediaArtist];
+    for (const element of mediaInfoElements) {
+      element.removeAttribute('overflow');
+    }
+
+    this.addLabelOverflows(mediaInfoElements);
+  }
+
+  _onPictureInPictureModeChange(event) {
+    if (event.target.id !== this._currentMediaController?.id) return;
+    if (event.target.isBeingUsedInPIPModeOrFullscreen) {
+      this.hideMediaControls();
+      this.mediaControlBar.setAttribute('pip', '');
+    } else {
+      const { selectedBrowser } = gBrowser;
+      if (selectedBrowser.browserId !== this._currentBrowser.browserId) {
+        this.showMediaControls();
+      }
+
+      this.mediaControlBar.removeAttribute('pip');
+    }
  }

  onMediaPlayPrev() {
@@ -288,7 +447,10 @@ class ZenMediaController {
  }

  onMediaFocus() {
-    this._currentMediaController?.focus();
+    if (!this._currentBrowser) return;
+    const sidebarId = this._currentBrowser.getAttribute('zen-sidebar-id');
+    if (sidebarId) gZenBrowserManagerSidebar.open(sidebarId);
+    else this._currentMediaController?.focus();
  }

  onMediaMute() {
@@ -309,6 +471,18 @@ class ZenMediaController {
    }
  }

+  onControllerClose() {
+    this._currentMediaController?.pause();
+    this.switchController(true);
+    this.deinitMediaController(this._currentMediaController);
+  }
+
+  onMediaPip() {
+    this._currentBrowser.browsingContext.currentWindowGlobal
+      .getActor('PictureInPictureLauncher')
+      .sendAsyncMessage('PictureInPicture:KeyToggle');
+  }
+
  updateMuteState() {
    if (!this._currentBrowser) return;
    if (this._currentBrowser._audioMuted) {
@@ -317,6 +491,12 @@ class ZenMediaController {
      this.mediaControlBar.removeAttribute('muted');
    }
  }
+
+  updatePipButton() {
+    const isPipEligible = this.pipEligibilityMap.get(this._currentBrowser.browserId);
+    if (isPipEligible) this.mediaControlBar.setAttribute('can-pip', '');
+    else this.mediaControlBar.removeAttribute('can-pip');
+  }
 }

 window.gZenMediaController = new ZenMediaController();
--- a/src/browser/base/zen-components/ZenPinnedTabManager.mjs
+++ b/src/browser/base/zen-components/ZenPinnedTabManager.mjs
@@ -510,6 +510,10 @@
        case 'unload-switch':
        case 'reset-switch':
        case 'switch':
+          let { permitUnload } = selectedTab.linkedBrowser?.permitUnload();
+          if (!permitUnload) {
+            return;
+          }
          this._handleTabSwitch(selectedTab);
          if (behavior.includes('reset')) {
            this._resetTabToStoredState(selectedTab);
@@ -520,8 +524,7 @@
            }
            // Do not unload about:* pages
            if (!selectedTab.linkedBrowser?.currentURI.spec.startsWith('about:')) {
-              gBrowser.explicitUnloadTabs([selectedTab]);
-              selectedTab.removeAttribute('linkedpanel');
+              gZenTabUnloader.explicitUnloadTabs([selectedTab], { permitUnload });
            }
          }
          break;
@@ -831,7 +834,7 @@
    removeTabContainersDragoverClass() {
      this.dragIndicator.remove();
      this._dragIndicator = null;
-      ZenWorkspaces.activeWorkspaceIndicator.removeAttribute('open');
+      ZenWorkspaces.activeWorkspaceIndicator?.removeAttribute('open');
    }

    get dragIndicator() {
@@ -891,9 +894,9 @@
      targetTab = targetTab?.group || targetTab;
      if (event.target.closest('.zen-current-workspace-indicator')) {
        this.removeTabContainersDragoverClass();
-        ZenWorkspaces.activeWorkspaceIndicator.setAttribute('open', true);
+        ZenWorkspaces.activeWorkspaceIndicator?.setAttribute('open', true);
      } else {
-        ZenWorkspaces.activeWorkspaceIndicator.removeAttribute('open');
+        ZenWorkspaces.activeWorkspaceIndicator?.removeAttribute('open');
      }

      // If there's no valid target tab, nothing to do
--- a/src/browser/base/zen-components/ZenSidebarManager.mjs
+++ b/src/browser/base/zen-components/ZenSidebarManager.mjs
@@ -280,8 +280,10 @@ class ZenBrowserManagerSidebar extends ZenDOMOperatedFeature {
    this.close();
  }

-  open() {
+  open(id = null) {
    let sidebar = document.getElementById('zen-sidebar-web-panel');
+    if (id) this._currentPanel = id;
+
    sidebar.removeAttribute('hidden');
    this.update();
  }
--- a/src/browser/base/zen-components/ZenTabUnloader.mjs
+++ b/src/browser/base/zen-components/ZenTabUnloader.mjs
@@ -22,8 +22,6 @@
      'TabAttrModified',
      'TabPinned',
      'TabUnpinned',
-      'TabBrowserInserted',
-      'TabBrowserDiscarded',
      'TabShow',
      'TabHide',
      'TabOpen',
@@ -150,8 +148,6 @@
      switch (action) {
        case 'TabPinned':
        case 'TabUnpinned':
-        case 'TabBrowserInserted':
-        case 'TabBrowserDiscarded':
        case 'TabShow':
        case 'TabHide':
          break;
@@ -235,9 +231,9 @@
      this.explicitUnloadTabs(tabs);
    }

-    explicitUnloadTabs(tabs) {
+    explicitUnloadTabs(tabs, extraArgs = {}) {
      for (let i = 0; i < tabs.length; i++) {
-        if (this.canUnloadTab(tabs[i], Date.now(), this.intervalUnloader.excludedUrls, true)) {
+        if (this.canUnloadTab(tabs[i], Date.now(), this.intervalUnloader.excludedUrls, true, extraArgs)) {
          this.unload(tabs[i]);
        }
      }
@@ -259,15 +255,15 @@
      }
    }

-    canUnloadTab(tab, currentTimestamp, excludedUrls, ignoreTimestamp = false) {
+    canUnloadTab(tab, currentTimestamp, excludedUrls, ignoreTimestamp = false, extraArgs = {}) {
      if (
        (tab.pinned && !ignoreTimestamp) ||
        tab.selected ||
        (tab.multiselected && !ignoreTimestamp) ||
        (tab.hasAttribute('busy') && !ignoreTimestamp) ||
-        tab.hasAttribute('pending') ||
        !tab.linkedPanel ||
        tab.splitView ||
+        tab.group?.hasAttribute('split-view-group') ||
        tab.attention ||
        tab.hasAttribute('glance-id') ||
        tab.linkedBrowser?.zenModeActive ||
@@ -280,7 +276,7 @@
        return false;
      }
      if (ignoreTimestamp) {
-        return true;
+        return this._tabPermitsUnload(tab, extraArgs);
      }
      const lastActivity = tab.lastActivity;
      if (!lastActivity) {
@@ -288,7 +284,13 @@
      }
      const diff = currentTimestamp - lastActivity;
      // Check if the tab has been inactive for more than the timeout
-      return diff > lazy.zenTabUnloaderTimeout * 60 * 1000;
+      return diff > lazy.zenTabUnloaderTimeout * 60 * 1000 && this._tabPermitsUnload(tab, extraArgs);
+    }
+
+    _tabPermitsUnload(tab, extraArgs) {
+      return typeof extraArgs.permitUnload === 'undefined'
+        ? tab.linkedBrowser?.permitUnload()?.permitUnload
+        : extraArgs.permitUnload;
    }
  }

--- a/src/browser/base/zen-components/ZenViewSplitter.mjs
+++ b/src/browser/base/zen-components/ZenViewSplitter.mjs
@@ -49,9 +49,13 @@ class SplitNode extends SplitLeafNode {
    return this._children;
  }

-  addChild(child) {
+  addChild(child, prepend = true) {
    child.parent = this;
-    this._children.unshift(child);
+    if (prepend) {
+      this._children.unshift(child);
+    } else {
+      this._children.push(child);
+    }
  }
 }

@@ -226,11 +230,13 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
      const halfWidth = panelsWidth / 2;
      const side = event.clientX > halfWidth ? 'right' : 'left';
      this.fakeBrowser = document.createXULElement('vbox');
-      this.fakeBrowser.addEventListener('dragleave', this.onBrowserDragEndToSplit);
      window.addEventListener('dragend', this.onBrowserDragEndToSplit, { once: true });
      const padding = Services.prefs.getIntPref('zen.theme.content-element-separation', 0);
      this.fakeBrowser.setAttribute('flex', '1');
      this.fakeBrowser.id = 'zen-split-view-fake-browser';
+      if (oldTab.splitView) {
+        this.fakeBrowser.setAttribute('has-split-view', 'true');
+      }
      gBrowser.tabbox.appendChild(this.fakeBrowser);
      this.fakeBrowser.style.setProperty('--zen-split-view-fake-icon', `url(${draggedTab.getAttribute('image')})`);
      draggedTab._visuallySelected = true;
@@ -270,6 +276,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
      ]);
      if (this._finishAllAnimatingPromise) {
        this._finishAllAnimatingPromise.then(() => {
+          this.fakeBrowser.addEventListener('dragleave', this.onBrowserDragEndToSplit);
          this._canDrop = true;
          draggedTab._visuallySelected = true;
        });
@@ -988,10 +995,10 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
    this.activateSplitView(splitData);
  }

-  addTabToSplit(tab, splitNode) {
+  addTabToSplit(tab, splitNode, prepend = true) {
    const reduce = splitNode.children.length / (splitNode.children.length + 1);
    splitNode.children.forEach((c) => (c.sizeInParent *= reduce));
-    splitNode.addChild(new SplitLeafNode(tab, (1 - reduce) * 100));
+    splitNode.addChild(new SplitLeafNode(tab, (1 - reduce) * 100), prepend);
  }

  /**
@@ -1599,7 +1606,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
            if (parentNode.direction !== splitDirection) {
              this.splitIntoNode(droppedOnSplitNode, new SplitLeafNode(draggedTab, 50), hoverSide, 0.5);
            } else {
-              this.addTabToSplit(draggedTab, parentNode);
+              this.addTabToSplit(draggedTab, parentNode, /* prepend = */ hoverSide === 'left' || hoverSide === 'top');
            }
          } else {
            this.addTabToSplit(draggedTab, group.layoutTree);
--- a/src/browser/base/zen-components/ZenWelcome.mjs
+++ b/src/browser/base/zen-components/ZenWelcome.mjs
@@ -52,13 +52,6 @@
    }
  }

-  function openWelcomeTab() {
-    const tab = window.gBrowser.addTrustedTab('https://zen-browser.app/welcome', {
-      inBackground: true,
-    });
-    gBrowser.selectedTab = tab;
-  }
-
  class ZenWelcomePages {
    constructor(pages) {
      this._currentPage = -1;
@@ -410,7 +403,6 @@
            _tabsToPinEssentials.push(createdTab);
          }
          openInitialPinTab();
-          openWelcomeTab();
        },
      },
      {
--- a/src/browser/base/zen-components/ZenWorkspaces.mjs
+++ b/src/browser/base/zen-components/ZenWorkspaces.mjs
@@ -36,10 +36,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
    this._resolveInitialized = resolve;
  });

-  promiseEmptyTabInitialized = new Promise((resolve) => {
-    this._resolveEmptyTabInitialized = resolve;
-  });
-
  workspaceIndicatorXUL = `
    <hbox class="zen-current-workspace-indicator-icon"></hbox>
    <hbox class="zen-current-workspace-indicator-name"></hbox>
@@ -61,13 +57,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
    XPCOMUtils.defineLazyPreferenceGetter(this, 'activationMethod', 'zen.workspaces.scroll-modifier-key', 'ctrl');
    XPCOMUtils.defineLazyPreferenceGetter(this, 'naturalScroll', 'zen.workspaces.natural-scroll', true);
    XPCOMUtils.defineLazyPreferenceGetter(this, 'shouldWrapAroundNavigation', 'zen.workspaces.wrap-around-navigation', true);
-    XPCOMUtils.defineLazyPreferenceGetter(
-      this,
-      'shouldShowIconStrip',
-      'zen.workspaces.show-icon-strip',
-      true,
-      this._expandWorkspacesStrip.bind(this)
-    );
    XPCOMUtils.defineLazyPreferenceGetter(
      this,
      'shouldForceContainerTabsToWorkspace',
@@ -88,6 +77,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
    );
    ChromeUtils.defineLazyGetter(this, 'tabContainer', () => document.getElementById('tabbrowser-tabs'));
    this._activeWorkspace = Services.prefs.getStringPref('zen.workspaces.active', '');
+
+    window.addEventListener('resize', this.onWindowResize.bind(this));
  }

  async afterLoadInit() {
@@ -143,7 +134,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
  async _createDefaultWorkspaceIfNeeded() {
    const workspaces = await this._workspaces();
    if (!workspaces.workspaces.length) {
-      await this.createAndSaveWorkspace('Default Workspace', true, '🏠', true);
+      await this.createAndSaveWorkspace('Default', true, null, true);
      this._workspaceCache = null;
    }
  }
@@ -610,6 +601,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
      } catch (e) {
        console.error('ZenWorkspaces: Error initializing theme picker', e);
      }
+      this.onWindowResize();
      await this._selectStartPage();
      this._fixTabPositions();
      this._resolveInitialized();
@@ -621,11 +613,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
    if (Services.prefs.getBoolPref('zen.workspaces.disable_empty_state_for_testing', false)) {
      return;
    }
+    if (this._initialTab) {
+      this.moveTabToWorkspace(this._initialTab, this.activeWorkspace);
+      gBrowser.selectedTab = this._initialTab;
+      gBrowser.moveTabTo(this._initialTab, 0, { forceStandaloneTab: true });
+      this._initialTab._possiblyEmpty = false;
+      this._initialTab = null;
+    }
    const currentTab = gBrowser.selectedTab;
    let showed = false;
-    await this.promiseEmptyTabInitialized;
-    this._resolveEmptyTabInitialized = null;
-    this.promiseEmptyTabInitialized = null;
    if (currentTab.pinned) {
      this.selectEmptyTab();
      try {
@@ -640,8 +636,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
      if (
        (currentTab.isEmpty &&
          (currentTab.getAttribute('image') === gPageIcons[currentTabURL] || !currentTab.hasAttribute('image'))) ||
-        currentTab.hasAttribute('zen-empty-tab') ||
-        (currentTab._possibleEmptyTab && currentTab.isEmpty)
+        currentTab._possiblyEmpty
      ) {
        this.selectEmptyTab();
        this._removedByStartupPage = true;
@@ -654,6 +649,14 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
    }
  }

+  handleInitialTab(tab, isEmpty) {
+    if (isEmpty) {
+      tab._possiblyEmpty = true;
+    } else {
+      this._initialTab = tab;
+    }
+  }
+
  initIndicatorContextMenu(indicator) {
    const th = (event) => {
      event.preventDefault();
@@ -870,6 +873,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
    await ZenWorkspacesStorage.removeWorkspace(windowID);
    await this._propagateWorkspaceData();
    await this._updateWorkspacesChangeContextMenu();
+    this.onWindowResize();
  }

  isWorkspaceActive(workspace) {
@@ -1316,82 +1320,55 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {

    button.setAttribute('showInPrivateBrowsing', 'false');
    button.setAttribute('tooltiptext', 'Workspaces');
-    if (this.shouldShowIconStrip) {
-      let workspaces = await this._workspaces();
+    let workspaces = await this._workspaces();

-      for (let workspace of workspaces.workspaces) {
-        let workspaceButton = browser.document.createXULElement('toolbarbutton');
-        workspaceButton.className = 'subviewbutton';
-        workspaceButton.setAttribute('tooltiptext', workspace.name);
-        workspaceButton.setAttribute('zen-workspace-id', workspace.uuid);
+    for (let workspace of workspaces.workspaces) {
+      let workspaceButton = browser.document.createXULElement('toolbarbutton');
+      workspaceButton.className = 'subviewbutton';
+      workspaceButton.setAttribute('tooltiptext', workspace.name);
+      workspaceButton.setAttribute('zen-workspace-id', workspace.uuid);

-        if (this.isWorkspaceActive(workspace)) {
-          workspaceButton.setAttribute('active', 'true');
-        } else {
-          workspaceButton.removeAttribute('active');
-        }
-        if (workspace.default) {
-          workspaceButton.setAttribute('default', 'true');
-        } else {
-          workspaceButton.removeAttribute('default');
-        }
-
-        workspaceButton.addEventListener('click', async (event) => {
-          if (event.button !== 0) {
-            return;
-          }
-          await this.changeWorkspace(workspace);
-        });
-
-        let icon = browser.document.createXULElement('div');
-        icon.className = 'zen-workspace-icon';
-        icon.textContent = this.getWorkspaceIcon(workspace);
-        workspaceButton.appendChild(icon);
-        button.appendChild(workspaceButton);
-      }
-
-      if (workspaces.workspaces.length <= 1) {
-        button.setAttribute('dont-show', true);
+      if (this.isWorkspaceActive(workspace)) {
+        workspaceButton.setAttribute('active', 'true');
      } else {
-        button.removeAttribute('dont-show');
+        workspaceButton.removeAttribute('active');
+      }
+      if (workspace.default) {
+        workspaceButton.setAttribute('default', 'true');
+      } else {
+        workspaceButton.removeAttribute('default');
      }

-      this._workspaceButtonContextMenuListener = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        this.openWorkspacesDialog(event);
-      };
-      button.addEventListener('contextmenu', this._workspaceButtonContextMenuListener.bind(browser.ZenWorkspaces));
-    } else {
-      let activeWorkspace = await this.getActiveWorkspace();
-      if (activeWorkspace) {
-        button.setAttribute('as-button', 'true');
-        button.classList.add('toolbarbutton-1', 'zen-sidebar-action-button');
-
-        this._workspacesButtonClickListener = browser.ZenWorkspaces.openWorkspacesDialog.bind(browser.ZenWorkspaces);
-        button.addEventListener('click', this._workspacesButtonClickListener);
-
-        const wrapper = browser.document.createXULElement('hbox');
-        wrapper.className = 'zen-workspace-sidebar-wrapper';
-
-        const icon = browser.document.createXULElement('div');
-        icon.className = 'zen-workspace-sidebar-icon';
-        icon.textContent = this.getWorkspaceIcon(activeWorkspace);
-
-        const name = browser.document.createXULElement('div');
-        name.className = 'zen-workspace-sidebar-name';
-        name.textContent = activeWorkspace.name;
-
-        if (!this.workspaceHasIcon(activeWorkspace)) {
-          icon.setAttribute('no-icon', 'true');
+      workspaceButton.addEventListener('click', async (event) => {
+        if (event.button !== 0) {
+          return;
        }
+        await this.changeWorkspace(workspace);
+      });

-        wrapper.appendChild(icon);
-        wrapper.appendChild(name);
-
-        button.appendChild(wrapper);
+      let icon = browser.document.createXULElement('div');
+      icon.className = 'zen-workspace-icon';
+      if (this.workspaceHasIcon(workspace)) {
+        icon.textContent = this.getWorkspaceIcon(workspace);
+      } else {
+        icon.setAttribute('no-icon', 'true');
      }
+      workspaceButton.appendChild(icon);
+      button.appendChild(workspaceButton);
    }
+
+    if (workspaces.workspaces.length <= 1) {
+      button.setAttribute('dont-show', true);
+    } else {
+      button.removeAttribute('dont-show');
+    }
+
+    this._workspaceButtonContextMenuListener = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.openWorkspacesDialog(event);
+    };
+    button.addEventListener('contextmenu', this._workspaceButtonContextMenuListener.bind(browser.ZenWorkspaces));
  }

  closeWorkspacesSubView() {
@@ -1955,6 +1932,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
      }
      await this.changeWorkspace(workspaceData);
    }
+    this.onWindowResize();
    return workspaceData;
  }

@@ -2373,9 +2351,12 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {

  async switchIfNeeded(browser, i) {
    const tab = gBrowser.getTabForBrowser(browser);
-    const workspaceId = tab.getAttribute('zen-workspace-id');
-    if (!tab.hasAttribute('zen-essential') && workspaceId !== this.activeWorkspace) {
-      await this.changeWorkspace({ uuid: workspaceId });
+    await this.switchTabIfNeeded(tab);
+  }
+
+  async switchTabIfNeeded(tab) {
+    if (!tab.hasAttribute('zen-essential') && tab.getAttribute('zen-workspace-id') !== this.activeWorkspace) {
+      await this.changeWorkspace({ uuid: tab.getAttribute('zen-workspace-id') });
    }
    gBrowser.selectedTab = tab;
  }
@@ -2392,4 +2373,26 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
    const workspace = workspaces.workspaces.find((workspace) => workspace.uuid === activeWorkspace);
    return workspace.containerTabId;
  }
+
+  onWindowResize(event = undefined) {
+    if (!(!event || event.target === window)) return;
+    // Check if workspace icons overflow the parent container
+    const parent = document.getElementById('zen-workspaces-button');
+    if (!parent || this._processingResize) {
+      return;
+    }
+    this._processingResize = true;
+    // Once we are overflowing, we align the buttons to always stay inside the container,
+    // meaning we need to remove the overflow attribute to reset the width
+    parent.removeAttribute('overflow');
+    requestAnimationFrame(() => {
+      const overflow = parent.scrollWidth > parent.clientWidth;
+      parent.toggleAttribute('overflow', overflow);
+      // The maximum width a button has when it overflows based on the number of buttons
+      const numButtons = parent.children.length + 1; // +1 to exclude the active button
+      const maxWidth = 100 / numButtons;
+      parent.style.setProperty('--zen-overflowed-workspace-button-width', `${maxWidth}%`);
+      this._processingResize = false;
+    });
+  }
 })();
--- a/src/browser/base/zen-components/moz.build
+++ b/src/browser/base/zen-components/moz.build
@@ -2,3 +2,10 @@
 BROWSER_CHROME_MANIFESTS += [
    "tests/browser.toml",
 ]
+
+FINAL_TARGET_FILES.actors += [
+    "actors/ZenGlanceChild.sys.mjs",
+    "actors/ZenGlanceParent.sys.mjs",
+    "actors/ZenThemeMarketplaceChild.sys.mjs",
+    "actors/ZenThemeMarketplaceParent.sys.mjs",
+]