From 7329b766cbbbbd3f0f1b5aaa82edb2d4aa960b3b Mon Sep 17 00:00:00 2001 From: David Taylor Date: Tue, 18 Jan 2022 12:05:36 +0000 Subject: [PATCH] FIX: Ensure floating quote button is not positioned under sidebar (#15634) If themes/plugins introduce a sidebar on the left of the screen, the quote button would sometimes be positioned underneath. This commit ensures that the positioning logic keeps the floating buttons within the width of `.topic-area` --- .../discourse/app/components/quote-button.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/app/assets/javascripts/discourse/app/components/quote-button.js b/app/assets/javascripts/discourse/app/components/quote-button.js index 349da9723fd..f3af1940fdc 100644 --- a/app/assets/javascripts/discourse/app/components/quote-button.js +++ b/app/assets/javascripts/discourse/app/components/quote-button.js @@ -246,7 +246,12 @@ export default Component.extend(KeyEnterEscape, { left = boundaryPosition.left; const safeRadius = 50; - const viewportEdgeMargin = 10; + + const topicArea = document + .querySelector(".topic-area") + .getBoundingClientRect(); + topicArea.x += document.documentElement.scrollLeft; + topicArea.y += document.documentElement.scrollTop; const endHandlePosition = boundaryPosition; const width = this.element.clientWidth; @@ -270,12 +275,9 @@ export default Component.extend(KeyEnterEscape, { ]; for (const pos of possiblePositions) { - // Ensure buttons are entirely within the viewport - pos.left = Math.max(viewportEdgeMargin, pos.left); - pos.left = Math.min( - window.innerWidth - viewportEdgeMargin - width, - pos.left - ); + // Ensure buttons are entirely within the .topic-area + pos.left = Math.max(topicArea.left, pos.left); + pos.left = Math.min(topicArea.right - width, pos.left); let clearOfStartHandle = true; if (isAndroid) {