From 7f2dc6e5fa0ed6933fac33d8c6f506173504c35a Mon Sep 17 00:00:00 2001
From: Jono M <reason.koan@gmail.com>
Date: Tue, 10 Oct 2023 07:34:35 +0100
Subject: [PATCH] Fixed popover "right" position in AdminX (#18549)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refs https://github.com/TryGhost/Product/issues/3832

---

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at babb461</samp>

This pull request enhances the popover component in the
`admin-x-settings` app. It fixes a bug with the alignment of the popover
and refactors the style object for better readability and
maintainability.
---
 .../src/admin-x-ds/global/Popover.tsx                 | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Popover.tsx b/apps/admin-x-settings/src/admin-x-ds/global/Popover.tsx
index 0e1e246b4a..f84cb6dca1 100644
--- a/apps/admin-x-settings/src/admin-x-ds/global/Popover.tsx
+++ b/apps/admin-x-settings/src/admin-x-ds/global/Popover.tsx
@@ -36,7 +36,7 @@ const Popover: React.FC<PopoverProps> = ({
             x -= parentRect.x;
             y -= parentRect.y;
 
-            const finalX = (position === 'left') ? x : x - width;
+            const finalX = (position === 'left') ? x : window.innerWidth - (x + width);
             setOpen(true);
             setPositionX(finalX);
             setPositionY(y + height);
@@ -46,10 +46,15 @@ const Popover: React.FC<PopoverProps> = ({
     };
 
     const style: React.CSSProperties = {
-        top: `${positionY}px`,
-        left: `${positionX}px`
+        top: `${positionY}px`
     };
 
+    if (position === 'left') {
+        style.left = `${positionX}px`;
+    } else {
+        style.right = `${positionX}px`;
+    }
+
     const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
         if (e.target === e.currentTarget) {
             setOpen(false);