diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css index 16884fe737..abd3a6b5a9 100644 --- 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 index 0c9f501fc5..227073907f 100644 --- 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 | null} */ reactionCache = null; /** @type {Intl.ListFormat} */ @@ -531,6 +535,8 @@ 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) { @@ -538,6 +544,10 @@ Bugzilla.BugModal.CommentReactions = class CommentReactions { } 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';