diff --git a/src/app/WardrobePage/support/ItemLayerSupportUploadModal.js b/src/app/WardrobePage/support/ItemLayerSupportUploadModal.js index 1008cdf..5ada334 100644 --- a/src/app/WardrobePage/support/ItemLayerSupportUploadModal.js +++ b/src/app/WardrobePage/support/ItemLayerSupportUploadModal.js @@ -1,5 +1,4 @@ import * as React from "react"; -import gql from "graphql-tag"; import { useApolloClient } from "@apollo/client"; import { Button, @@ -124,7 +123,14 @@ function ItemLayerSupportUploadModal({ item, itemLayer, isOpen, onClose }) { setIsUploading(false); setUploadError(e); } - }, [imageWithAlphaBlob, supportSecret, itemLayer.id, toast, onClose]); + }, [ + imageWithAlphaBlob, + supportSecret, + itemLayer.id, + toast, + onClose, + apolloClient.cache, + ]); return ( { + React.useLayoutEffect(() => { const region = regionRef.current; if (!region) { return; @@ -301,7 +307,7 @@ function ItemLayerSupportFlashPlayer({ swfUrl, backgroundColor }) { throw new Error(`could not find .chakra-modal__overlay scroll parent`); } - const onMountAndOnScroll = () => { + const onMountOrScrollOrResize = () => { const regionBox = region.getBoundingClientRect(); const scrollParentBox = scrollParent.getBoundingClientRect(); const isVisible = @@ -312,12 +318,16 @@ function ItemLayerSupportFlashPlayer({ swfUrl, backgroundColor }) { setIsVisible(isVisible); }; - onMountAndOnScroll(); + onMountOrScrollOrResize(); - scrollParent.addEventListener("scroll", onMountAndOnScroll); + scrollParent.addEventListener("scroll", onMountOrScrollOrResize); + window.addEventListener("resize", onMountOrScrollOrResize); - return () => scrollParent.removeEventListener("scroll", onMountAndOnScroll); - }, [regionRef.current]); + return () => { + scrollParent.removeEventListener("scroll", onMountOrScrollOrResize); + window.removeEventListener("resize", onMountOrScrollOrResize); + }; + }, []); let borderColor; if (isVisible === null) {