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`
This commit is contained in:
David Taylor 2022-01-18 12:05:36 +00:00 committed by GitHub
parent b725b7f1fa
commit 7329b766cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 7 deletions

View File

@ -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) {