demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMAppComponent.kt

@@ -19,8 +19,7 @@ import io.ktor.client.HttpClient
 import io.ktor.client.request.get
 import kotlinx.coroutines.GlobalScope
 import kotlinx.coroutines.launch
-import kotlinx.css.height
-import kotlinx.css.pct
+import kotlinx.css.*
 import kotlinx.html.js.onClickFunction
 import react.RProps
 import react.child
@@ -57,30 +56,36 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
 
     val root = props.model.root
 
-    div("row") {
-        h1("mx-auto") {
-            +"Muon monitor demo"
-        }
-    }
     div("row") {
         styledDiv {
             css {
                 +"col-lg-3"
-                +"px-0"
-                +"overflow-auto"
-                +"h-100"
+                padding(0.px)
+                overflowY = Overflow.auto
+                display = Display.flex
+                flexDirection = FlexDirection.column
+                height = 100.vh
             }
             //tree
             card("Object tree") {
+                css {
+                    flex(1.0, 1.0, FlexBasis.auto)
+                }
                 objectTree(root, selected, onSelect)
             }
         }
         styledDiv {
             css {
                 +"col-lg-6"
-                height = 100.pct
+                display = Display.flex
+                flexDirection = FlexDirection.column
+                height = 100.vh
+            }
+            h1("mx-auto") {
+                +"Muon monitor demo"
             }
             //canvas
+
             child(ThreeCanvasComponent) {
                 attrs {
                     this.context = props.context
@@ -95,8 +100,18 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
                 }
             }
         }
-        div("col-lg-3") {
-            div("row") {
+        styledDiv {
+            css {
+                +"col-lg-3"
+                padding(0.px)
+                display = Display.flex
+                flexDirection = FlexDirection.column
+                height = 100.vh
+            }
+            styledDiv {
+                css{
+                    flex(0.0,1.0, FlexBasis.zero)
+                }
                 //settings
                 canvas?.let {
                     card("Canvas configuration") {
@@ -125,8 +140,10 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
                     }
                 }
             }
-            div("row") {
-                div("container-fluid p-0") {
+            styledDiv{
+                css{
+                    padding(0.px)
+                }
                 nav {
                     attrs {
                         attributes["aria-label"] = "breadcrumb"
@@ -163,8 +180,10 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
                     }
                 }
             }
+           styledDiv{
+               css{
+                   overflowY = Overflow.auto
                }
-            div("row") {
                 //properties
                 card("Properties") {
                     selected.let { selected ->

demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMDemoApp.kt

@@ -8,7 +8,6 @@ import io.ktor.client.features.json.JsonFeature
 import io.ktor.client.features.json.serializer.KotlinxSerializer
 import kotlinx.browser.document
 import react.child
-import react.dom.div
 import react.dom.render
 
 private class MMDemoApp : Application {
@@ -27,7 +26,6 @@ private class MMDemoApp : Application {
         val element = document.getElementById("app") ?: error("Element with id 'app' not found on page")
 
         render(element) {
-            div("container-fluid h-100") {
             child(MMApp) {
                 attrs {
                     this.model = this@MMDemoApp.model
@@ -37,7 +35,6 @@ private class MMDemoApp : Application {
             }
         }
     }
-    }
 }
 
 fun main() {

demo/muon-monitor/src/jsMain/resources/index.html

@@ -11,6 +11,6 @@
     <script type="text/javascript" src ="js/bootstrap.bundle.min.js"></script>
 </head>
 <body class="application">
-<div class="container-fluid" id = "app"> </div>
+<div class="container-fluid min-vh-100" id = "app"> </div>
 </body>
 </html>

ui/react/src/main/kotlin/hep/dataforge/vision/react/ThreeCanvasComponent.kt

@@ -58,8 +58,6 @@ public val ThreeCanvasComponent: FunctionalComponent<ThreeCanvasProps> = functio
 
     styledDiv {
         css {
-            minWidth = 500.px
-            minHeight = 500.px
             display = Display.inherit
             width = 100.pct
             height = 100.pct