From 6ae22d171bf95181a63cd3f852c42d94808c4bf2 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Thu, 17 Jun 2021 15:37:01 -0700
Subject: [PATCH] Fix previews with large source images

Oops, okay, I guess I didn't test the new preview centering stuff with 1200x1200 images, like the Usul's Damask Markings.

Now, I apply a max size to the whole-ass container, and make the parent responsible for centering it.
---
 src/app/WardrobePage/WardrobePreviewAndControls.js | 6 +++---
 src/app/components/OutfitPreview.js                | 2 ++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/WardrobePage/WardrobePreviewAndControls.js b/src/app/WardrobePage/WardrobePreviewAndControls.js
index 0190242..c61ba8d 100644
--- a/src/app/WardrobePage/WardrobePreviewAndControls.js
+++ b/src/app/WardrobePage/WardrobePreviewAndControls.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, DarkMode } from "@chakra-ui/react";
+import { Box, Center, DarkMode } from "@chakra-ui/react";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/client";
 import * as Sentry from "@sentry/react";
@@ -37,9 +37,9 @@ function WardrobePreviewAndControls({
   return (
     <Sentry.ErrorBoundary fallback={MajorErrorMessage}>
       <TestErrorSender />
-      <Box position="absolute" top="0" bottom="0" left="0" right="0">
+      <Center position="absolute" top="0" bottom="0" left="0" right="0">
         <DarkMode>{preview}</DarkMode>
-      </Box>
+      </Center>
       <Box position="absolute" top="0" bottom="0" left="0" right="0">
         <OutfitControls
           outfitState={outfitState}
diff --git a/src/app/components/OutfitPreview.js b/src/app/components/OutfitPreview.js
index 7a2996f..08af37d 100644
--- a/src/app/components/OutfitPreview.js
+++ b/src/app/components/OutfitPreview.js
@@ -205,6 +205,8 @@ export function OutfitLayers({
           pos="relative"
           height="100%"
           width="100%"
+          maxWidth="600px"
+          maxHeight="600px"
           // Create a stacking context, so the z-indexed layers don't escape!
           zIndex="0"
           ref={containerRef}