fix: improve panel background contrast and adjust min width logic for browser elements

src/browser/base/content/zen-styles/zen-panel-ui.css

@@ -25,7 +25,7 @@ panel {
     -moz-default-appearance: menupopup;
     /* The blur behind doesn't blur all that much, add a semi-transparent
      * background to improve contrast */
-    --panel-background: light-dark(rgba(255, 255, 255, .5), rgba(0, 0, 0, .5)) !important;
+    --panel-background: light-dark(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5)) !important;
     --panel-border-color: transparent !important;
     --panel-shadow-margin: 0px !important;
   }

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

@@ -228,13 +228,18 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
         }
       }
       // Add a min width to all the browser elements to prevent them from resizing
-      for (const browser of gBrowser.browsers) {
-        const width = browser.getBoundingClientRect().width;
-        browser.style.minWidth = `${width}px`;
-      }
       const panelsWidth = gBrowser.tabbox.getBoundingClientRect().width;
       const halfWidth = panelsWidth / 2;
       const side = event.clientX > halfWidth ? 'right' : 'left';
+      for (const browser of gBrowser.browsers) {
+        const width = browser.getBoundingClientRect().width;
+        // Only apply it to the left side because if we add it to the right side,
+        // we wont be able to move the element to the left.
+        // FIXME: This is a workaround, we should find a better way to do this
+        if (side === 'left') {
+          browser.style.minWidth = `${width}px`;
+        }
+      }
       this.fakeBrowser = document.createXULElement('vbox');
       window.addEventListener('dragend', this.onBrowserDragEndToSplit, { once: true });
       const padding = Services.prefs.getIntPref('zen.theme.content-element-separation', 0);

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

@@ -1414,7 +1414,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     const parent = tab.pinned ? '#vertical-pinned-tabs-container ' : '#tabbrowser-arrowscrollbox ';
     const container = document.querySelector(parent + `.zen-workspace-tabs-section[zen-workspace-id="${workspaceID}"]`);
 
-    if (container.contains(tab)) {
+    if (container?.contains(tab)) {
       return false;
     }