fix(ui): update URL bar layout and adjust media controls padding

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() {
@@ -361,7 +362,7 @@ var gZenVerticalTabsManager = {
             marginBottom: isLastTab() ? [] : [transform, '0px'],
           },
           {
-            duration: 0.2,
+            duration: 0.12,
             easing: 'ease-out',
           }
         )
@@ -373,6 +374,9 @@ var gZenVerticalTabsManager = {
       gZenUIManager.motion
         .animate(aTab.querySelector('.tab-content'), {
           filter: ['blur(1px)', 'blur(0px)'],
+        }, {
+          duration: 0.12,
+          easing: 'ease-out',
         })
         .then(() => {
           aTab.querySelector('.tab-stack').style.removeProperty('filter');

src/browser/base/content/zen-styles/zen-media-controls.css

@@ -110,7 +110,7 @@
     position: absolute;
     left: 0;
     bottom: 0;
-    padding: 5px;
+    padding: 4px 6px;
     border-radius: var(--border-radius-medium);
     background: var(--zen-media-control-bg) !important;
     width: 100%;