From fc500b08d2605f6e0d77c3caa79ef34e835f38b5 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 4 Aug 2023 16:22:14 +0530
Subject: [PATCH] chore: fix issue where popovers & modals are sometimes blurry
 on chrome

---
 packages/web/src/javascripts/Components/Modal/Modal.tsx   | 3 +--
 .../web/src/javascripts/Components/Modal/ModalOverlay.tsx | 2 +-
 .../Components/Popover/GetPositionedPopoverStyles.ts      | 4 ++--
 .../Popover/Utils/getAdjustedStylesForNonPortal.ts        | 4 ++--
 .../Popover/Utils/movePopoverToFitInsideRect.ts           | 8 ++++----
 5 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/web/src/javascripts/Components/Modal/Modal.tsx b/packages/web/src/javascripts/Components/Modal/Modal.tsx
index 7d35c64ce..f1c366cc2 100644
--- a/packages/web/src/javascripts/Components/Modal/Modal.tsx
+++ b/packages/web/src/javascripts/Components/Modal/Modal.tsx
@@ -104,8 +104,7 @@ const Modal = ({
       />
       <div
         className={classNames(
-          'absolute z-[1] m-0 flex h-full w-full flex-col border-solid border-border bg-default p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
-          'md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:transform',
+          'z-[1] m-0 flex h-full w-full flex-col border-solid border-border bg-default p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
           className?.content,
         )}
       >
diff --git a/packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx b/packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx
index 535dbfab5..32061537d 100644
--- a/packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx
+++ b/packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx
@@ -42,7 +42,7 @@ const ModalOverlay = forwardRef(
     return (
       <Dialog
         tabIndex={0}
-        className="fixed left-0 top-0 z-modal h-full w-full"
+        className="fixed flex items-center justify-center left-0 top-0 z-modal h-full w-full"
         ref={mergeRefs([setElement, addCloseMethod, ref])}
         store={dialog}
         modal={false}
diff --git a/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts b/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts
index ecaa001c4..511ad7728 100644
--- a/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts
+++ b/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts
@@ -29,8 +29,8 @@ const getStylesFromRect = (
 
   return {
     willChange: 'transform',
-    '--translate-x': `${shouldApplyMobileWidth ? marginForMobile / 2 : rect.x}px`,
-    '--translate-y': `${rect.y}px`,
+    '--translate-x': `${shouldApplyMobileWidth ? marginForMobile / 2 : Math.floor(rect.x)}px`,
+    '--translate-y': `${Math.floor(rect.y)}px`,
     '--offset': `${options.offset}px`,
     transform: 'translate(var(--translate-x), var(--translate-y))',
     visibility: 'visible',
diff --git a/packages/web/src/javascripts/Components/Popover/Utils/getAdjustedStylesForNonPortal.ts b/packages/web/src/javascripts/Components/Popover/Utils/getAdjustedStylesForNonPortal.ts
index 948d88285..639bcf9cd 100644
--- a/packages/web/src/javascripts/Components/Popover/Utils/getAdjustedStylesForNonPortal.ts
+++ b/packages/web/src/javascripts/Components/Popover/Utils/getAdjustedStylesForNonPortal.ts
@@ -19,8 +19,8 @@ export const getAdjustedStylesForNonPortalPopover = (
 
   const parentRect = absoluteParent.getBoundingClientRect()
 
-  const adjustedTranslateX = parsedTranslateX - parentRect.left
-  const adjustedTranslateY = parsedTranslateY - parentRect.top
+  const adjustedTranslateX = Math.floor(parsedTranslateX - parentRect.left)
+  const adjustedTranslateY = Math.floor(parsedTranslateY - parentRect.top)
 
   return {
     ...styles,
diff --git a/packages/web/src/javascripts/Components/Popover/Utils/movePopoverToFitInsideRect.ts b/packages/web/src/javascripts/Components/Popover/Utils/movePopoverToFitInsideRect.ts
index f35b45b39..af9b42acc 100644
--- a/packages/web/src/javascripts/Components/Popover/Utils/movePopoverToFitInsideRect.ts
+++ b/packages/web/src/javascripts/Components/Popover/Utils/movePopoverToFitInsideRect.ts
@@ -8,18 +8,18 @@ export const movePopoverToFitInsideRect = (popoverElement: HTMLElement, rect: DO
   const overflows = getOverflows(popoverRect, rect)
 
   if (overflows['top'] > 0) {
-    popoverElement.style.setProperty('--translate-y', `${y + overflows['top'] + offset}px`)
+    popoverElement.style.setProperty('--translate-y', `${Math.floor(y + overflows['top'] + offset)}px`)
   }
 
   if (overflows['bottom'] > 0) {
-    popoverElement.style.setProperty('--translate-y', `${y - overflows['bottom'] - offset}px`)
+    popoverElement.style.setProperty('--translate-y', `${Math.floor(y - overflows['bottom'] - offset)}px`)
   }
 
   if (overflows['left'] > 0) {
-    popoverElement.style.setProperty('--translate-x', `${x + overflows['left'] + offset}px`)
+    popoverElement.style.setProperty('--translate-x', `${Math.floor(x + overflows['left'] + offset)}px`)
   }
 
   if (overflows['right'] > 0) {
-    popoverElement.style.setProperty('--translate-x', `${x - overflows['right'] - offset}px`)
+    popoverElement.style.setProperty('--translate-x', `${Math.floor(x - overflows['right'] - offset)}px`)
   }
 }