rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: fix issue where popovers & modals are sometimes blurry on chrome

Browse Source
This commit is contained in:
Aman Harwara
2023-08-04 16:22:14 +05:30
parent 0642b589ff
commit fc500b08d2
5 changed files with 10 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/web/src/javascripts/Components/Modal/Modal.tsx
View File

@@ -104,8 +104,7 @@ const Modal = ({
/> />
<div <div
className={classNames( 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', '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',
className?.content, className?.content,
)} )}
> >

2
packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx
View File

@@ -42,7 +42,7 @@ const ModalOverlay = forwardRef(
return ( return (
<Dialog <Dialog
tabIndex={0} 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])} ref={mergeRefs([setElement, addCloseMethod, ref])}
store={dialog} store={dialog}
modal={false} modal={false}

4
packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts
View File

@@ -29,8 +29,8 @@ const getStylesFromRect = (
return { return {
willChange: 'transform', willChange: 'transform',
'--translate-x': `${shouldApplyMobileWidth ? marginForMobile / 2 : rect.x}px`, '--translate-x': `${shouldApplyMobileWidth ? marginForMobile / 2 : Math.floor(rect.x)}px`,
'--translate-y': `${rect.y}px`, '--translate-y': `${Math.floor(rect.y)}px`,
'--offset': `${options.offset}px`, '--offset': `${options.offset}px`,
transform: 'translate(var(--translate-x), var(--translate-y))', transform: 'translate(var(--translate-x), var(--translate-y))',
visibility: 'visible', visibility: 'visible',

4
packages/web/src/javascripts/Components/Popover/Utils/getAdjustedStylesForNonPortal.ts
View File

@@ -19,8 +19,8 @@ export const getAdjustedStylesForNonPortalPopover = (
const parentRect = absoluteParent.getBoundingClientRect() const parentRect = absoluteParent.getBoundingClientRect()
const adjustedTranslateX = parsedTranslateX - parentRect.left const adjustedTranslateX = Math.floor(parsedTranslateX - parentRect.left)
const adjustedTranslateY = parsedTranslateY - parentRect.top const adjustedTranslateY = Math.floor(parsedTranslateY - parentRect.top)
return { return {
...styles, ...styles,

8
packages/web/src/javascripts/Components/Popover/Utils/movePopoverToFitInsideRect.ts
View File

@@ -8,18 +8,18 @@ export const movePopoverToFitInsideRect = (popoverElement: HTMLElement, rect: DO
const overflows = getOverflows(popoverRect, rect) const overflows = getOverflows(popoverRect, rect)
if (overflows['top'] > 0) { 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) { 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) { 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) { 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`)
} }
} }