From 72c739ca0fc2a41cf14dfa1e24e8cd08029705c7 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 28 May 2024 17:32:18 -0700
Subject: [PATCH] Improve layout for "Get these items!" and "Save" buttons in
 editor

Make them the same size, add spacing between them, and also put the
"Get these items!" on the right, because the list is right-aligned and
the Save button has dynamic width (the save vs saving vs saved states),
so this makes things a lot more consistent and stable!
---
 app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js b/app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js
index b877d370..2297dcc3 100644
--- a/app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js
+++ b/app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js
@@ -309,6 +309,7 @@ function GetTheseItemsButton({ outfitState }) {
       href={isDisabled ? undefined : targetUrl}
       target={isDisabled ? undefined : "_blank"}
       colorScheme="purple"
+      size="sm"
       rightIcon={<ExternalLinkIcon />}
       isDisabled={isDisabled}
     >
@@ -450,13 +451,14 @@ function OutfitHeading({ outfitState, outfitSaving, dispatchToOutfit }) {
             </Box>
           </Box>
           <Box width="4" flex="1 0 auto" />
-          <Box flex="0 0 auto">
-            <GetTheseItemsButton outfitState={outfitState} />
-          </Box>
           <Box flex="0 0 auto">
             <OutfitSavingIndicator outfitSaving={outfitSaving} />
           </Box>
           <Box width="2" />
+          <Box flex="0 0 auto">
+            <GetTheseItemsButton outfitState={outfitState} />
+          </Box>
+          <Box width="2" />
           <Menu placement="bottom-end">
             <MenuButton
               as={IconButton}