From 7ecbaf82c21da0a66c162d768a75c657c7158ed8 Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Sat, 25 Apr 2020 19:06:58 -0700
Subject: [PATCH] fix padding for item and adjacent containers

---
 src/ItemList.js     |  3 +--
 src/ItemsPanel.js   | 18 ++++++++++++------
 src/WardrobePage.js |  2 +-
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/ItemList.js b/src/ItemList.js
index 0e946df..1a9d451 100644
--- a/src/ItemList.js
+++ b/src/ItemList.js
@@ -114,8 +114,7 @@ function ItemContainer({ children }) {
   return (
     <Box
       p="1"
-      mb="1"
-      mt="1"
+      my="1"
       rounded="lg"
       d="flex"
       alignItems="center"
diff --git a/src/ItemsPanel.js b/src/ItemsPanel.js
index 99c1dde..5d6c7d1 100644
--- a/src/ItemsPanel.js
+++ b/src/ItemsPanel.js
@@ -22,16 +22,20 @@ function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
 
   return (
     <Box color="green.800">
-      <OutfitHeading
-        outfitState={outfitState}
-        dispatchToOutfit={dispatchToOutfit}
-      />
+      <Box px="1">
+        <OutfitHeading
+          outfitState={outfitState}
+          dispatchToOutfit={dispatchToOutfit}
+        />
+      </Box>
       <Flex direction="column">
         {loading &&
           [1, 2, 3].map((i) => (
             <Box key={i} mb="10">
               <Delay>
-                <Skeleton height="2.3rem" width="12rem" />
+                <Box px="1">
+                  <Skeleton height="2.3rem" width="12rem" />
+                </Box>
                 <ItemListSkeleton count={3} />
               </Delay>
             </Box>
@@ -48,7 +52,9 @@ function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
                 }}
               >
                 <Box mb="10">
-                  <Heading2>{zoneLabel}</Heading2>
+                  <Box px="1">
+                    <Heading2>{zoneLabel}</Heading2>
+                  </Box>
                   <ItemRadioList
                     name={zoneLabel}
                     items={items}
diff --git a/src/WardrobePage.js b/src/WardrobePage.js
index cd74be8..fbae50d 100644
--- a/src/WardrobePage.js
+++ b/src/WardrobePage.js
@@ -83,7 +83,7 @@ function WardrobePage() {
             key="search-panel"
             ref={searchContainerRef}
           >
-            <Box px="5" py="5">
+            <Box px="4" py="5">
               <SearchPanel
                 query={searchQuery}
                 outfitState={outfitState}