feat: Improved styling for native MacOS popovers and fixed anchor positions, b=no-bug, c=workflows, media, common, folders

src/external-patches/firefox/native_macos_popovers.patch

@@ -22,7 +22,7 @@ diff --git a/browser/components/asrouter/modules/FeatureCallout.sys.mjs b/browse
              type="arrow"
              consumeoutsideclicks="never"
              norolluponanchor="true"
-+            nonnativepopover="true"
++ 
              position="${panel_position.panel_position_string}"
              ${hide_arrow ? "" : 'show-arrow=""'}
              ${autohide ? "" : 'noautohide="true"'}

src/external-patches/manifest.json

@@ -14,7 +14,11 @@
     "replaces": {
       // The patch we sent was for firefox 149, but we are currently in 148, so theres
       // a conflict in the patch. See https://bugzilla.mozilla.org/show_bug.cgi?id=2015354
-      "overridden": "overriden"
+      "overridden": "overriden",
+      // Specifically trying to target FeatureCallout.sys.mjs's change.
+      // IMPORTANT: Make sure Feature callouts STILL use native popopvers when
+      //    syncing from upstream, as this is a critical part of the patch.
+      "+            nonnativepopover=\"true\"": "+ "
     }
   },
   {

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

@@ -30,7 +30,7 @@ panel[type="arrow"]:not(#feature-callout) {
   }
 
   @media (-moz-platform: macos) {
-    &[followanchor="false"] {
+    &:where([followanchor="false"], [nonnativepopover="true"]) {
       appearance: auto !important;
       -moz-default-appearance: menupopup;
       /* We set the default background here, rather than on ::part(content),

src/zen/folders/ZenFolders.mjs

@@ -744,7 +744,7 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
     size *= 48;
     return {
       position,
-      x: 10,
+      x: isRightSide ? -10 : 10,
       y: size / -2,
     };
   }

src/zen/live-folders/ZenLiveFoldersManager.sys.mjs

@@ -275,7 +275,7 @@ class nsZenLiveFoldersManager {
               {
                 selector: `[id="${folder.id}"] > .tab-group-label-container`,
                 panel_position: {
-                  anchor_attachment: "rightcenter",
+                  anchor_attachment: isRightSide ? "leftcenter" : "rightcenter",
                   callout_attachment: isRightSide ? "topright" : "topleft",
                 },
               },