Enhance compact mode functionality by refining sidebar animation cond…

…itions and updating CSS ignore rules

.prettierignore

@@ -23,5 +23,6 @@ docs/issue-metrics/*.md
 # Some CSS files are preprocessed and prettier doesn't handle them well
 # We also dont want to format the CSS files that are generated by the build
 src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+src/browser/base/content/zen-styles/zen-compact-mode.css
 src/browser/base/zen-components/ZenEmojies.mjs
 build/codesign/codesign.bash

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

@@ -4,7 +4,10 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-& #zen-sidebar-top-buttons:not(:has(toolbarbutton, toolbaritem)) {
+&
+  #zen-sidebar-top-buttons:not(
+    :has(#zen-sidebar-top-buttons-customization-target > *:not(#zen-sidebar-top-buttons-separator))
+  ) {
   max-height: 0 !important;
   min-height: 0 !important;
   opacity: 0;

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

@@ -149,13 +149,17 @@ var gZenCompactModeManager = {
     this._animating = true;
     const isCompactMode = this.preference;
     const canHideSidebar = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar');
+    const canAnimate =
+      lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR &&
+      !this.sidebar.hasAttribute('zen-user-show') &&
+      !this.sidebar.hasAttribute('zen-has-hover');
     // Do this so we can get the correct width ONCE compact mode styled have been applied
-    if (lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR) {
+    if (canAnimate) {
       this.sidebar.setAttribute('animate', 'true');
     }
     window.requestAnimationFrame(() => {
       let sidebarWidth = this.getAndApplySidebarWidth();
-      if (!lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR) {
+      if (!canAnimate) {
         this.sidebar.removeAttribute('animate');
         this._animating = false;
         return;