Fix columns of editable table forms overflowing (#95)

Author: arthurxavierx

src/Lumi/Components/Form/Table.purs

@@ -203,9 +203,21 @@ column label orientation (FormBuilder f) =
           (f props row).validate
       }
   where
+    innerColumn_ children =
+      Column.column
+        { style: R.css { maxWidth: "100%" }
+        , children
+        }
+
+    innerRow_ children =
+      Row.row
+        { style: R.css { maxWidth: "100%" }
+        , children
+        }
+
     horizontalRenderer :: Boolean -> Forest -> JSX
     horizontalRenderer readonly forest =
-      Row.row_
+      innerRow_
         [ intercalate (hspace S12) (map (toColumn readonly) forest)
         ]
 
@@ -214,20 +226,16 @@ column label orientation (FormBuilder f) =
       case _ of
         Child { key, child } ->
           maybe identity keyed key $ child
-        Wrapper { key, children } ->
-          R.div
-            { key: fromMaybe "" key
-            , style: R.css { flex: "1" }
-            , children:
-                [ Row.row_
-                    [ intercalate (hspace S12) (map (toColumn readonly) children)
-                    ]
+        Wrapper { key, wrap, children } ->
+          maybe identity keyed key $ wrap
+            [ innerRow_
+                [ intercalate (hspace S12) (map (toColumn readonly) children)
                 ]
-            }
+            ]
         Node { key, validationError, children } ->
           maybe identity keyed key $
-            Column.column_
-              [ Row.row_
+            innerColumn_
+              [ innerRow_
                   [ intercalate (hspace S12) (map (toColumn readonly) children)
                   ]
               , guard (not readonly) $
@@ -236,7 +244,7 @@ column label orientation (FormBuilder f) =
 
     verticalRenderer :: Boolean -> Forest -> JSX
     verticalRenderer readonly forest =
-      Column.column_
+      innerColumn_
         [ intercalate (vspace S8) (map (toRow readonly) forest)
         ]
 
@@ -245,19 +253,15 @@ column label orientation (FormBuilder f) =
       case _ of
         Child { key, child } ->
           maybe identity keyed key $ child
-        Wrapper { key, children } ->
-          R.div
-            { key: fromMaybe "" key
-            , style: R.css { flex: "1" }
-            , children:
-                [ Column.column_
-                    [ intercalate (vspace S8) (map (toColumn readonly) children)
-                    ]
+        Wrapper { key, wrap, children } ->
+          maybe identity keyed key $ wrap
+            [ innerColumn_
+                [ intercalate (vspace S8) (map (toColumn readonly) children)
                 ]
-            }
+            ]
         Node { key, validationError, children } ->
           maybe identity keyed key $
-            Column.column_
+            innerColumn_
               [ intercalate (vspace S8) (map (toColumn readonly) children)
               , guard (not readonly) $
                   foldMap errLine validationError

src/Lumi/Components/Form/Validation.purs

@@ -37,7 +37,7 @@ import Data.String.NonEmpty (fromString) as NES
 import Data.String.Pattern (Pattern(..))
 import Data.Traversable (traverse)
 import Heterogeneous.Mapping (class MapRecordWithIndex, class Mapping, ConstMapping, hmap, mapping)
-import Lumi.Components.Column (column_)
+import Lumi.Components.Column (column)
 import Lumi.Components.Form.Internal (Forest, FormBuilder, FormBuilder'(..), Tree(..))
 import Lumi.Components.LabeledField (ValidationMessage(..))
 import Lumi.Components.Text (subtext, text)
@@ -215,14 +215,20 @@ validated
 validated runValidator editor = FormBuilder \props@{ readonly } v ->
   let value = fromValidated v
 
+      innerColumn_ children =
+        column
+          { style: R.css { maxWidth: "100%", maxHeight: "100%" }
+          , children
+          }
+
       { edit, validate } = un FormBuilder editor props value
 
       modify :: Maybe String -> Forest -> Forest
       modify message forest =
           case Array.unsnoc forest of
             Nothing -> [Child { key: Nothing, child: errLine }]
             Just { init, last: Child c } ->
-              Array.snoc init (Child c { child = column_ [c.child, errLine] })
+              Array.snoc init (Child c { child = innerColumn_ [c.child, errLine] })
             Just { init, last: Wrapper c } ->
               Array.snoc init (Wrapper c { children = modify message c.children })
             Just { init, last: Node n } ->
@@ -276,12 +282,18 @@ warn
 warn warningValidator editor = FormBuilder \props@{ readonly } v ->
   let { edit, validate } = un FormBuilder editor props (fromValidated v)
 
+      innerColumn_ children =
+        column
+          { style: R.css { maxWidth: "100%", maxHeight: "100%" }
+          , children
+          }
+
       modify :: Forest -> Forest
       modify forest =
           case Array.unsnoc forest of
             Nothing -> [Child { key: Nothing, child: errLine }]
             Just { init, last: Child c } ->
-              Array.snoc init (Child c { child = column_ [c.child, errLine] })
+              Array.snoc init (Child c { child = innerColumn_ [c.child, errLine] })
             Just { init, last: Wrapper c } ->
               Array.snoc init (Wrapper c { children = modify c.children })
             Just { init, last: Node n } ->