Skip to content

Commit

Permalink
fix: terms extend beyond right edge of screen (#447)
Browse files Browse the repository at this point in the history
Fixed a bug where the term pop-up would extend beyond the edge of the screen on mobile devices.

If the pop-up window goes beyond the right edge of the screen (on mobile devices), then the pop-up window is shifted to the left by as many pixels as it went beyond the screen and plus 5 pixels

----------------------------------------------------------------------------------------------------

Co-authored-by: Ruslan Bagautdinov <[email protected]>
  • Loading branch information
JeikZim and Ruslan Bagautdinov authored Jul 1, 2024
1 parent 46024fc commit 04afecf
Showing 1 changed file with 12 additions and 7 deletions.
19 changes: 12 additions & 7 deletions src/js/term/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -86,16 +86,21 @@ export function setDefinitionPosition(
const fitDefinitionDocument =
isAlignSwapped && !definitionOutOfScreenOnLeft ? definitionWidth - termWidth : 0;
const customHeaderTop = getCoords(definitionParent).top - definitionParent.offsetTop;
const offsetRight = 5;
const shiftLeft = definitionOutOfScreenOnRight
? definitionRightCoordinate - document.body.clientWidth + offsetRight
: 0;
const offsetLeft =
getCoords(termElement).left -
definitionParentLeft +
definitionParent.offsetLeft -
fitDefinitionDocument;

const isShiftLeftNeeded = offsetLeft + definitionWidth >= document.body.clientWidth;

definitionElement.style.top =
Number(getCoords(termElement).top + offsetTop - customHeaderTop) + 'px';
definitionElement.style.left =
Number(
getCoords(termElement).left -
definitionParentLeft +
definitionParent.offsetLeft -
fitDefinitionDocument,
) + 'px';
definitionElement.style.left = Number(offsetLeft - (isShiftLeftNeeded ? shiftLeft : 0)) + 'px';
}

function termOnResize() {
Expand Down

0 comments on commit 04afecf

Please sign in to comment.