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

@@ -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}

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}