From e67ca7dc3481b2d36f1f72ea07906971750798b5 Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Wed, 22 Apr 2020 00:39:35 -0700
Subject: [PATCH] better wide-screen layout

---
 app/src/WardrobePage.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/src/WardrobePage.js b/app/src/WardrobePage.js
index 33884747..93705f4d 100644
--- a/app/src/WardrobePage.js
+++ b/app/src/WardrobePage.js
@@ -13,7 +13,17 @@ import useOutfitState from "./useOutfitState.js";
 
 function WardrobePage() {
   return (
-    <Grid templateRows="50vh 50vh">
+    <Grid
+      // Fullscreen, split into a vertical stack on smaller screens
+      // or a horizontal stack on larger ones!
+      templateRows={{ base: "50% 50%", lg: "none" }}
+      templateColumns={{ base: "none", lg: "50% 50%" }}
+      position="absolute"
+      top="0"
+      bottom="0"
+      left="0"
+      right="0"
+    >
       <Box boxShadow="md">
         <OutfitPreview />
       </Box>