From 3c546536465684c002f859cdcd6225f0ef2aef0d Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sat, 1 Aug 2020 00:35:48 -0700
Subject: [PATCH] UX fixes for item support drawer

One fix was that `position: absolute` stuff was appearing over the drawer, including the item search clear button, oof!

Another fix was for a weird bug(?) in Apollo Client, see comments
---
 src/app/WardrobePage/index.js                     | 11 ++++++++++-
 src/app/WardrobePage/support/ItemSupportDrawer.js | 13 ++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/app/WardrobePage/index.js b/src/app/WardrobePage/index.js
index fd07d65..e1057c6 100644
--- a/src/app/WardrobePage/index.js
+++ b/src/app/WardrobePage/index.js
@@ -44,7 +44,16 @@ function WardrobePage() {
   }, [error, toast]);
 
   return (
-    <Box position="absolute" top="0" bottom="0" left="0" right="0">
+    <Box
+      position="absolute"
+      top="0"
+      bottom="0"
+      left="0"
+      right="0"
+      // Create a stacking context, so that our drawers and modals don't fight
+      // with the z-indexes in here!
+      zIndex="0"
+    >
       <Grid
         templateAreas={{
           base: `"previewAndControls"
diff --git a/src/app/WardrobePage/support/ItemSupportDrawer.js b/src/app/WardrobePage/support/ItemSupportDrawer.js
index 069f8ab..c0c0c94 100644
--- a/src/app/WardrobePage/support/ItemSupportDrawer.js
+++ b/src/app/WardrobePage/support/ItemSupportDrawer.js
@@ -86,7 +86,18 @@ function SpecialColorFields({ item }) {
         }
       }
     `,
-    { variables: { itemId: item.id } }
+    {
+      variables: { itemId: item.id },
+
+      // HACK: I think it's a bug in @apollo/client 3.1.1 that, if the
+      //     optimistic response sets `manualSpecialColor` to null, the query
+      //     doesn't update, even though its cache has updated :/
+      //
+      //     This cheap trick of changing the display name every re-render
+      //     persuades Apollo that this is a different query, so it re-checks
+      //     its cache and finds the empty `manualSpecialColor`. Weird!
+      displayName: `ItemSupportDrawerManualSpecialColor-${new Date()}`,
+    }
   );
 
   const {