GDML UI cleanup

demo/gdml/src/jsMain/kotlin/hep/dataforge/vision/gdml/demo/GDMLAppComponent.kt

@@ -4,7 +4,6 @@ import hep.dataforge.context.Context
 import hep.dataforge.meta.invoke
 import hep.dataforge.names.Name
 import hep.dataforge.vision.Vision
-import hep.dataforge.vision.bootstrap.card
 import hep.dataforge.vision.bootstrap.nameCrumbs
 import hep.dataforge.vision.bootstrap.threeControls
 import hep.dataforge.vision.gdml.toVision
@@ -71,10 +70,15 @@ val GDMLApp = functionalComponent<GDMLAppProps>("GDMLApp") { props ->
         vision = parsedVision
     }
 
+    flexRow {
+        css {
+            height = 100.vh - 35.px
+            width = 100.vw - 35.px
+            //flexWrap = FlexWrap.wrap
+        }
         flexColumn {
             css {
-            height = 100.pct
-            width = 100.pct
+                flex(10.0, 10.0, FlexBasis.zero)
             }
             styledDiv {
                 css {
@@ -83,30 +87,14 @@ val GDMLApp = functionalComponent<GDMLAppProps>("GDMLApp") { props ->
                 }
                 h1 { +"GDML/JSON loader demo" }
             }
-        flexRow {
-            css {
-                flex(1.0, 1.0, FlexBasis.auto)
-                flexWrap = FlexWrap.wrap
-            }
-
-            flexColumn {
-                css {
-                    flex(1.0, 1.0, FlexBasis.auto)
-                    margin(10.px)
-                }
             nameCrumbs(selected, "World", onSelect)
-
             //canvas
-                styledDiv {
-                    css {
-                        flex(1.0, 1.0, FlexBasis.auto)
-                    }
             child(ThreeCanvasComponent) {
                 attrs {
                     this.context = props.context
                     this.obj = vision as? Solid
                     this.selected = selected
-                            this.options = Canvas3DOptions.invoke{
+                    this.options = Canvas3DOptions.invoke {
                         this.onSelect = onSelect
                     }
                     this.canvasCallback = {
@@ -114,17 +102,15 @@ val GDMLApp = functionalComponent<GDMLAppProps>("GDMLApp") { props ->
                     }
                 }
             }
-                }
+
         }
         flexColumn {
             css {
                 minWidth = 500.px
-                    maxHeight = 100.pct
-                    flex(1.0, 1.0, FlexBasis.zero)
-                    margin(left = 4.px, right = 4.px)
+                height = 100.pct
+                margin(left = 4.px, right = 4.px, top = 4.px)
                 border(1.px, BorderStyle.solid, Color.lightGray)
             }
-                card("Load data") {
             fileDrop("(drag file here)") { files ->
                 val file = files?.get(0)
                 if (file != null) {
@@ -138,11 +124,9 @@ val GDMLApp = functionalComponent<GDMLAppProps>("GDMLApp") { props ->
                     }
                 }
             }
-                }
             canvas?.let {
                 threeControls(it, selected, onSelect)
             }
         }
     }
-    }
 }

demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vision/solid/demo/ThreeDemoGrid.kt

@@ -62,11 +62,11 @@ class ThreeDemoGrid(element: Element, idPrefix: String = "") : Page<Solid> {
             }
         }
         contentElement.append {
-            div("tab-pane fade col h-100") {
+            div("tab-pane fade col") {
                 id = name.toString()
                 role = "tabpanel"
                 attributes["aria-labelledby"] = "tab[$name]"
-                div("w-100 h-100") { id = "output-$name" }.also {element->
+                div { id = "output-$name" }.also { element ->
                     output = three.createCanvas(element, canvasOptions)
                 }
                 hr()

ui/bootstrap/src/main/kotlin/hep/dataforge/vision/bootstrap/tabComponent.kt

@@ -1,9 +1,7 @@
 package hep.dataforge.vision.bootstrap
 
 import hep.dataforge.vision.react.flexColumn
-import kotlinx.css.Overflow
-import kotlinx.css.flexGrow
-import kotlinx.css.overflowY
+import kotlinx.css.*
 import kotlinx.html.DIV
 import kotlinx.html.classes
 import kotlinx.html.js.onClickFunction
@@ -77,6 +75,7 @@ public class TabBuilder(internal val parentBuilder: RBuilder) {
             }
             styledDiv {
                 css {
+                    height = 100.pct
                     overflowY = Overflow.auto
                 }
                 builder()

ui/bootstrap/src/main/kotlin/hep/dataforge/vision/bootstrap/threeControls.kt

@@ -36,7 +36,6 @@ public val ThreeControls: FunctionalComponent<ThreeControlsProps> = functionalCo
             h2 { +"Object tree" }
             styledDiv {
                 css {
-                    overflowY = Overflow.auto
                     flex(1.0, 0.0, FlexBasis.auto)
                 }
                 props.canvas.content?.let {