From dd730e41f8afb932df029942705d436726a3d28b Mon Sep 17 00:00:00 2001
From: devonChurch <notifydevon@gmail.com>
Date: Sun, 15 Dec 2019 13:09:14 +1300
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20address=20display:=20grid?=
 =?UTF-8?q?=20slot=20bug=20with=20Safari?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Composition.js | 27 +++++++++++++++++++--------
 src/Swatch.js      |  4 +++-
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/Composition.js b/src/Composition.js
index 3ad87c4..050cb54 100644
--- a/src/Composition.js
+++ b/src/Composition.js
@@ -229,8 +229,10 @@ const Level = ({ children: level }) => {
 
 const DropAreas = styled.div`
   ${positionAbsolute}
+  align-items: stretch;
   display: grid;
   grid-gap: ${SPACE_600}px;
+  justify-items: stretch;
   padding: ${SPACE_600}px;
   transition-duration: ${SPEED_500}ms;
   transition-property: opacity, transform;
@@ -297,6 +299,15 @@ const AddCompositionButton = styled(AddButton)`
         `}
 `;
 
+const AddSlotButton = styled(AddButton)`
+  /**
+   * Hack for Safari, which does not confirm to positioning grid elements when
+   * the wrapper element has an opacity of 0. In that regard we staticky set
+   * the height of the slot 😩
+   */
+  min-height: 115px;
+`;
+
 export const UserComposition = memo(
   ({
     compId,
@@ -343,7 +354,7 @@ export const UserComposition = memo(
           </CSSTransition>
         </UserItem>
         <DropAreas {...{ isUserDragging }}>
-          <AddButton
+          <AddSlotButton
             hex={isContentTargeted ? dragHex : contentHex}
             isTargeted={isContentTargeted}
             onDragOver={event => {
@@ -359,8 +370,8 @@ export const UserComposition = memo(
             }}
           >
             <FontAwesomeIcon icon={faPlus} size="2x" />
-          </AddButton>
-          <AddButton
+          </AddSlotButton>
+          <AddSlotButton
             hex={isBaseTargeted ? dragHex : baseHex}
             isTargeted={isBaseTargeted}
             onDragOver={event => {
@@ -376,7 +387,7 @@ export const UserComposition = memo(
             }}
           >
             <FontAwesomeIcon icon={faPlus} size="2x" />
-          </AddButton>
+          </AddSlotButton>
         </DropAreas>
       </ItemWrapper>
     );
@@ -392,7 +403,7 @@ export const AppendComposition = memo(
     return (
       <AddItem>
         <DropAreas {...{ isUserDragging }}>
-          <AddButton
+          <AddSlotButton
             hex={isContentTargeted ? dragHex : GRAY_300}
             isTargeted={isContentTargeted}
             onDragOver={event => {
@@ -407,8 +418,8 @@ export const AppendComposition = memo(
             }}
           >
             <FontAwesomeIcon icon={faPlus} size="2x" />
-          </AddButton>
-          <AddButton
+          </AddSlotButton>
+          <AddSlotButton
             hex={isBaseTargeted ? dragHex : GRAY_300}
             isTargeted={isBaseTargeted}
             onDragOver={event => {
@@ -424,7 +435,7 @@ export const AppendComposition = memo(
             }}
           >
             <FontAwesomeIcon icon={faPlus} size="2x" />
-          </AddButton>
+          </AddSlotButton>
         </DropAreas>
         <AddCompositionButton
           hex={GRAY_300}
diff --git a/src/Swatch.js b/src/Swatch.js
index 9018bd4..2318125 100644
--- a/src/Swatch.js
+++ b/src/Swatch.js
@@ -266,16 +266,18 @@ export const AddItem = styled.li`
 `;
 
 export const AddButton = styled.button`
+  align-self: stretch;
   appearance: none;
   border: ${BORDER_WIDTH}px solid ${({ hex }) => createOffsetColor(hex)};
   border-radius: ${BORDER_RADIUS}px;
   color: ${({ hex }) => createOffsetColor(hex)};
   cursor: pointer;
   display: block;
-  height: 100%;
   font-family: sans-serif;
   font-weight: bold;
   font-size: 14px;
+  height: 100%;
+  justify-self: stretch;
   text-transform: uppercase;
   transition-duration: ${SPEED_500}ms;
   transition-property: box-shadow, background, opacity, transform, width, height;