fix(components): support safari for conditionals - I233

Signed-off-by: irmerk <[email protected]>

package.json

@@ -110,4 +110,4 @@
       "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
     ]
   }
-}
+}

src/components/ConditionalBoolean.js

@@ -44,7 +44,7 @@ const ConditionalBoolean = (props) => {
     somethingLength: props.nodeValue.position.popupWidth,
     somethingHeight: props.nodeValue.position.popupHeight
       + (props.nodeValue.position.popupHeight * 0.5),
-    caretTop: props.nodeValue.position.popupHeight,
+    caretTop: 1,
     caretLeft: (tooltipWidth / 2),
     tooltipHeight: 0.1,
   };

src/components/ConditionalSwitch.js

@@ -14,7 +14,7 @@ const ConditionalSwitch = (props) => {
   const conditionalTooltip = {
     className: 'conditionalTooltip',
     currentHover: props.currentHover,
-    caretTop: 20,
+    caretTop: 1.45,
     caretLeft: 2,
     tooltipHeight: 1.85,
   };

src/components/styles.js

@@ -24,7 +24,7 @@ export const ClauseConditionalTooltip = styled.div`
   &:before {
     content: '';
     position: absolute;
-    top: ${props => props.caretTop - 1}px;
+    top: ${props => props.caretTop}em;
     left: ${props => props.caretLeft - 1}px;
     border-top: 5px solid #141F3C;
     border-left: 5px solid transparent;
@@ -34,7 +34,7 @@ export const ClauseConditionalTooltip = styled.div`
   &:after {
     content: '';
     position: absolute;
-    top: ${props => props.caretTop - 1}px;
+    top: ${props => props.caretTop}em;
     left: ${props => props.caretLeft}px;
     border-top: 4px solid #141F3C;
     border-left: 4px solid transparent;

src/styles.css

@@ -18,8 +18,6 @@ a {
 
 .conditionalTooltip {
     opacity: 1 !important;
-    height: max-content;
-    width: max-content;
     border: 1px solid #141F3C;
     border-radius: 2px;
     background-color: #141F3C;