Fix Slat margin in Safari (#113)

Author: Madeline Trotter

src/Lumi/Components2/Slat.purs

@@ -48,15 +48,15 @@ slat =
             }
         Just interaction@{ href: Nothing } ->
           E.element R.button'
-            { css: toCSS theme props slatStyle
+            { css: toCSS theme props slatStyleInteractive
             , children: props.content
             , onClick: capture_ interaction.onClick
             , tabIndex: interaction.tabIndex
             , className
             }
         Just interaction@{ href: Just href } ->
           E.element R.a'
-            { css: toCSS theme props slatStyle
+            { css: toCSS theme props slatStyleInteractive
             , children: props.content
             , onClick: capture_ interaction.onClick
             , tabIndex: interaction.tabIndex
@@ -73,10 +73,13 @@ slat =
     Styles.Slat.Hidden.slat
       >>> styleModifier_ (E.css { appearance: E.none })
 
+  slatStyleInteractive =
+    slatStyle
+      >>> Styles.Slat.Hidden._interactive
+
 _interactive :: SlatInteraction -> PropsModifier SlatProps
 _interactive interaction =
-  Styles.Slat.Hidden._interactive
-    >>> propsModifier
-        _
-          { interaction = Just interaction
-          }
+  propsModifier
+    _
+      { interaction = Just interaction
+      }

src/Lumi/Styles/Box.purs

@@ -3,22 +3,24 @@ module Lumi.Styles.Box where
 import Prelude
 import Color (cssStringHSLA)
 import Lumi.Components (PropsModifier)
-import Lumi.Styles (styleModifier, styleModifier_)
+import Lumi.Styles (int, styleModifier, styleModifier_)
 import Lumi.Styles.Theme (LumiTheme(..))
 import React.Basic.Emotion (class IsStyleProperty, css, nested, prop, str)
 
 box :: forall props. PropsModifier props
 box =
   styleModifier_
     $ css
-      { label: str "box"
-      , display: str "flex"
-      , flexDirection: str "column"
-      , boxSizing: str "border-box"
-      , minHeight: str "0"
-      , minWidth: str "min-content"
-      , flex: str "0 0 auto"
-      }
+        { label: str "box"
+        , display: str "flex"
+        , flexDirection: str "column"
+        , boxSizing: str "border-box"
+        , minHeight: int 0
+        , minWidth: str "min-content"
+        , flex: str "0 0 auto"
+        , margin: int 0
+        , padding: int 0
+        }
 
 _row :: forall props. PropsModifier props
 _row =