From 5f4226d673ccdeb4c066b0e7a7a36f8458104393 Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Wed, 22 Apr 2020 03:50:57 -0700
Subject: [PATCH] make name edit button not inline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

this was wrapping bad on my phone, the edit button was getting its own line, was really bothering me! 😅
---
 app/src/WardrobePage.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/src/WardrobePage.js b/app/src/WardrobePage.js
index 563a77b..ecc67cc 100644
--- a/app/src/WardrobePage.js
+++ b/app/src/WardrobePage.js
@@ -64,7 +64,7 @@ function WardrobePage() {
              "outfit items"`,
       }}
       templateRows={{
-        base: "50% auto 1fr",
+        base: "minmax(100px, 1fr) auto minmax(300px, 1fr)",
         lg: "auto 1fr",
       }}
       templateColumns={{
@@ -219,7 +219,7 @@ function OutfitHeading() {
         <Editable defaultValue="Zafara Agent (roopal27)">
           {({ isEditing, onRequestEdit }) => (
             <>
-              <EditablePreview d="inline" />
+              <EditablePreview />
               <EditableInput />
               {!isEditing && (
                 <PseudoBox
@@ -228,6 +228,7 @@ function OutfitHeading() {
                   transition="opacity 0.5s"
                   _groupHover={{ opacity: "1" }}
                   onClick={onRequestEdit}
+                  position="absolute"
                 >
                   <IconButton
                     icon="edit"