fix: Fixed native caption buttons not updating position when hiding, b=closes #10973, c=common, compact-mode

src/zen/common/styles/zen-browser-ui.css

@@ -247,6 +247,7 @@
 @media (-moz-platform: macos) {
   :root[zen-window-buttons-reversed='true'][zen-right-side='true'] .titlebar-buttonbox-container {
     margin-inline-start: max(calc(var(--zen-element-separation) - 3px), 4px);
+    margin-block: auto;
   }
 }
 

src/zen/common/styles/zen-single-components.css

@@ -302,6 +302,11 @@ body > #confetti {
   gap: 8px;
   overflow: visible;
 
+  unified-extensions-item-messagebar-wrapper,
+  .unified-extensions-item-contents {
+    display: none !important;
+  }
+
   &[overflowing='true'] {
     overflow-x: auto;
     max-height: 420px;

src/zen/common/styles/zen-theme.css

@@ -195,7 +195,8 @@
 
   /* Transitions */
   --zen-tabbox-element-indent-transition: margin-inline-start 0.1s ease-in-out;
-  --zen-hidden-toolbar-transition: 0.15s ease-in-out;
+  --zen-hidden-toolbar-transition-duration: 0.15s;
+  --zen-hidden-toolbar-transition: var(--zen-hidden-toolbar-transition-duration) ease-in-out;
 
   /* XUL */
   --zen-main-browser-background: light-dark(rgb(235, 235, 235), #1b1b1b);

src/zen/compact-mode/windows-captions-fix-active.inc.css

@@ -5,6 +5,6 @@
  */
 
 & .titlebar-buttonbox-container {
-  visibility: visible;
+  max-height: 100%;
   transition: none;
 }

src/zen/compact-mode/windows-captions-fix-default.inc.css

@@ -5,9 +5,10 @@
  */
 
 & .titlebar-buttonbox-container {
-  display: collapse;
+  max-height: 0px;
   /* We need to hide them since on Windows the native
    * panels when hovering over them can interfere with the
    * web content */
-  transition: visibility var(--zen-hidden-toolbar-transition);
+  transition: max-height 0s;
+  transition-delay: calc(var(--zen-hidden-toolbar-transition-duration) + 0.2s);
 }