Bug 1928083 - Bugzilla’s emojis are displayed on the bottom of the pa…

…ge when activated creating a new scroll bar
mozilla-bteam · Oct 30, 2024 · e470a88 · e470a88
1 parent b50dcd2
commit e470a88
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css
@@ -1249,7 +1249,6 @@ a.comment-tag-url {
   position: relative;
   padding: 0 12px 12px;
   background: var(--primary-text-background-color);
-  anchor-name: --comment-reactions;
 }
 
 .comment-text.bz_private + .comment-reactions {
@@ -1322,7 +1321,6 @@ a.comment-tag-url {
   transform-origin: bottom left;
   transition: all 100ms;
   pointer-events: none;
-  position-anchor: --comment-reactions;
 }
 
 .comment-reactions .picker:popover-open {

diff --git a/extensions/BugModal/web/comments.js b/extensions/BugModal/web/comments.js
@@ -511,8 +511,12 @@ Bugzilla.BugModal.Comments = class Comments {
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
  */
 Bugzilla.BugModal.CommentReactions = class CommentReactions {
-  /** @type {Boolean} */
-  canUsePopover = 'popover' in HTMLElement.prototype;
+  /**
+   * Check the availability of the Popover API. This also detects the CSS Anchor Positioning API, as positioning doesn’t
+   * work well without it, depending on how the page layout (fixed global header) is structured.
+   * @type {Boolean}
+   */
+  canUsePopover = 'popover' in HTMLElement.prototype && CSS.supports('anchor-name', '--comment-reactions');
   /** @type {Record<string, object[]> | null} */
   reactionCache = null;
   /** @type {Intl.ListFormat} */
@@ -531,13 +535,19 @@ Bugzilla.BugModal.CommentReactions = class CommentReactions {
     this.$picker = $wrapper.querySelector('.picker');
     /** @type {Number} */
     this.commentId = Number(/** @type {HTMLElement} */ ($wrapper.parentElement.querySelector('.comment')).dataset.id);
+    /** @type {string} */
+    this.anchorName = `--comment-${this.commentId}-reactions`;
 
     // Users cannot react on old bugs
     if (!this.$anchor) {
       return;
     }
 
     if (this.canUsePopover) {
+      // Set the anchor name dynamically
+      this.$wrapper.style.setProperty('anchor-name', this.anchorName);
+      this.$picker.style.setProperty('position-anchor', this.anchorName);
+
       this.$anchor.popoverTargetElement = this.$picker;
       this.$anchor.popoverTargetAction = 'toggle';
       this.$picker.popover = 'auto';