From 101ca9e0f7e746f2188eac93d597fc42087e3662 Mon Sep 17 00:00:00 2001 From: tess Date: Tue, 12 Nov 2024 21:16:59 +0100 Subject: [PATCH 1/4] make sure popup position is never off screen to the left --- packages/frontend/src/scripts/popup-position.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/frontend/src/scripts/popup-position.ts b/packages/frontend/src/scripts/popup-position.ts index 3dad41a8b3..80ad91c48f 100644 --- a/packages/frontend/src/scripts/popup-position.ts +++ b/packages/frontend/src/scripts/popup-position.ts @@ -15,6 +15,8 @@ export function calcPopupPosition(el: HTMLElement, props: { const contentWidth = el.offsetWidth; const contentHeight = el.offsetHeight; + const LEFT_MARGIN = 4; + let rect: DOMRect; if (props.anchorElement) { @@ -39,6 +41,8 @@ export function calcPopupPosition(el: HTMLElement, props: { left = window.innerWidth - contentWidth + window.scrollX - 1; } + left = Math.max(LEFT_MARGIN, left); + return [left, top]; }; @@ -60,6 +64,8 @@ export function calcPopupPosition(el: HTMLElement, props: { left = window.innerWidth - contentWidth + window.scrollX - 1; } + left = Math.max(LEFT_MARGIN, left); + return [left, top]; }; @@ -75,6 +81,8 @@ export function calcPopupPosition(el: HTMLElement, props: { top = props.y; } + left = Math.max(LEFT_MARGIN, left); + top -= (el.offsetHeight / 2); if (top + contentHeight - window.scrollY > window.innerHeight) { @@ -106,6 +114,8 @@ export function calcPopupPosition(el: HTMLElement, props: { top -= (el.offsetHeight / 2); } + left = Math.max(LEFT_MARGIN, left); + if (top + contentHeight - window.scrollY > window.innerHeight) { top = window.innerHeight - contentHeight + window.scrollY - 1; } From 19be113cb4f62eb479061fe5274fce0655ee232b Mon Sep 17 00:00:00 2001 From: tess Date: Tue, 12 Nov 2024 21:29:22 +0100 Subject: [PATCH 2/4] Keep MkUserPopup from extending past left side of screen --- packages/frontend/src/components/MkUserPopup.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/MkUserPopup.vue b/packages/frontend/src/components/MkUserPopup.vue index c6f4699b3e..e98a8b85e9 100644 --- a/packages/frontend/src/components/MkUserPopup.vue +++ b/packages/frontend/src/components/MkUserPopup.vue @@ -119,7 +119,7 @@ onMounted(() => { } const rect = props.source.getBoundingClientRect(); - const x = ((rect.left + (props.source.offsetWidth / 2)) - (300 / 2)) + window.scrollX; + const x = Math.max(2, ((rect.left + (props.source.offsetWidth / 2)) - (300 / 2)) + window.scrollX); const y = rect.top + props.source.offsetHeight + window.scrollY; top.value = y; From 6d6b03dfe262c2477284aacd3da85a944b6d55b0 Mon Sep 17 00:00:00 2001 From: tess Date: Tue, 12 Nov 2024 21:30:19 +0100 Subject: [PATCH 3/4] tweak popup left margin for consistency --- packages/frontend/src/scripts/popup-position.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/scripts/popup-position.ts b/packages/frontend/src/scripts/popup-position.ts index 80ad91c48f..187896b0e5 100644 --- a/packages/frontend/src/scripts/popup-position.ts +++ b/packages/frontend/src/scripts/popup-position.ts @@ -15,7 +15,7 @@ export function calcPopupPosition(el: HTMLElement, props: { const contentWidth = el.offsetWidth; const contentHeight = el.offsetHeight; - const LEFT_MARGIN = 4; + const LEFT_MARGIN = 2; let rect: DOMRect; From 68e5b5a84a8ea088f7375eb1056218c4bcf2b05a Mon Sep 17 00:00:00 2001 From: tess Date: Tue, 12 Nov 2024 22:09:37 +0100 Subject: [PATCH 4/4] Set horizontal margin for even better consistency --- packages/frontend/src/components/MkUserPopup.vue | 2 +- packages/frontend/src/scripts/popup-position.ts | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/frontend/src/components/MkUserPopup.vue b/packages/frontend/src/components/MkUserPopup.vue index e98a8b85e9..4ae23de62c 100644 --- a/packages/frontend/src/components/MkUserPopup.vue +++ b/packages/frontend/src/components/MkUserPopup.vue @@ -119,7 +119,7 @@ onMounted(() => { } const rect = props.source.getBoundingClientRect(); - const x = Math.max(2, ((rect.left + (props.source.offsetWidth / 2)) - (300 / 2)) + window.scrollX); + const x = Math.max(1, ((rect.left + (props.source.offsetWidth / 2)) - (300 / 2)) + window.scrollX); const y = rect.top + props.source.offsetHeight + window.scrollY; top.value = y; diff --git a/packages/frontend/src/scripts/popup-position.ts b/packages/frontend/src/scripts/popup-position.ts index 187896b0e5..be49532cf8 100644 --- a/packages/frontend/src/scripts/popup-position.ts +++ b/packages/frontend/src/scripts/popup-position.ts @@ -15,7 +15,7 @@ export function calcPopupPosition(el: HTMLElement, props: { const contentWidth = el.offsetWidth; const contentHeight = el.offsetHeight; - const LEFT_MARGIN = 2; + const HORIZONTAL_MARGIN = 1; let rect: DOMRect; @@ -38,10 +38,10 @@ export function calcPopupPosition(el: HTMLElement, props: { left -= (el.offsetWidth / 2); if (left + contentWidth - window.scrollX > window.innerWidth) { - left = window.innerWidth - contentWidth + window.scrollX - 1; + left = window.innerWidth - contentWidth + window.scrollX - HORIZONTAL_MARGIN; } - left = Math.max(LEFT_MARGIN, left); + left = Math.max(HORIZONTAL_MARGIN, left); return [left, top]; }; @@ -61,10 +61,10 @@ export function calcPopupPosition(el: HTMLElement, props: { left -= (el.offsetWidth / 2); if (left + contentWidth - window.scrollX > window.innerWidth) { - left = window.innerWidth - contentWidth + window.scrollX - 1; + left = window.innerWidth - contentWidth + window.scrollX - HORIZONTAL_MARGIN; } - left = Math.max(LEFT_MARGIN, left); + left = Math.max(HORIZONTAL_MARGIN, left); return [left, top]; }; @@ -81,7 +81,7 @@ export function calcPopupPosition(el: HTMLElement, props: { top = props.y; } - left = Math.max(LEFT_MARGIN, left); + left = Math.max(HORIZONTAL_MARGIN, left); top -= (el.offsetHeight / 2); @@ -114,7 +114,7 @@ export function calcPopupPosition(el: HTMLElement, props: { top -= (el.offsetHeight / 2); } - left = Math.max(LEFT_MARGIN, left); + left = Math.max(HORIZONTAL_MARGIN, left); if (top + contentHeight - window.scrollY > window.innerHeight) { top = window.innerHeight - contentHeight + window.scrollY - 1;