Refactor CSS styles for zen components and update tab icon handling in ZenPinnedTabManager

src/browser/base/content/zen-styles/zen-decks.css

@@ -34,7 +34,6 @@
   margin-left: 0 !important;
   position: absolute !important;
   overflow: hidden;
-  transition: inset 0.1s;
 }
 
 #tabbrowser-tabpanels[zen-split-view='true']:not([zen-split-resizing]) > [zen-split-anim='true'] {

src/browser/base/content/zen-styles/zen-sidebar-panels.css

@@ -121,7 +121,7 @@
 
   &::before {
     height: 50px;
-    width: 4px;
+    width: 2px;
     background: var(--button-primary-bgcolor);
     border-radius: 2px;
     content: '';

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -264,7 +264,7 @@
       display: none;
     }
 
-    &:active {
+    #tabbrowser-tabs:not([movingtab]) &:active {
       scale: var(--zen-active-tab-scale);
     }
 

src/browser/base/content/zen-styles/zen-workspaces.css

@@ -499,6 +499,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     pointer-events: none;
+    font-size: small;
   }
 }
 

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

@@ -84,7 +84,10 @@
     onTabIconChanged(tab, url = null) {
       const iconUrl = url ?? tab.iconImage.src;
       if (tab.hasAttribute('zen-essential')) {
-        tab.querySelector('.tab-background').style.setProperty('--zen-tab-icon', `url(${iconUrl})`);
+        const pin = this._pinsCache.find((pin) => pin.uuid === tab.getAttribute('zen-pin-id'));
+        if (pin) {
+          tab.querySelector('.tab-background').style.setProperty('--zen-tab-icon', `url(${pin.iconUrl})`);
+        }
       }
       // TODO: work on this
       //if (tab.hasAttribute('zen-pinned-changed') || !this._pinsCache) {