fix: block doesnt scale on resize

d1snin · Aug 19, 2023 · ec09f00 · ec09f00
1 parent 9cc9e12
commit ec09f00
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/beam-ui/src/jsMain/kotlin/dev/d1s/beam/ui/component/BlockComponent.kt b/beam-ui/src/jsMain/kotlin/dev/d1s/beam/ui/component/BlockComponent.kt
@@ -35,9 +35,9 @@ class BlockComponent : Component<BlockComponent.Config>(::Config), KoinComponent
             "Block isn't set"
         }
 
-        div {
+        div(className = "w-100") {
             val blockSize = sizeOf(block.size).px
-            width = blockSize
+            maxWidth = blockSize
 
             val applyPaddingEnd = config.applyPaddingEnd.value
 
@@ -49,8 +49,8 @@ class BlockComponent : Component<BlockComponent.Config>(::Config), KoinComponent
                 paddingBottom = cardPadding
             }
 
-            card("p-4 d-flex flex-column justify-content-start") {
-                width = if (applyPaddingEnd) blockSize.minus(cardPadding.first) else blockSize
+            card("w-100 p-4 d-flex flex-column justify-content-start") {
+                maxWidth = if (applyPaddingEnd) blockSize.minus(cardPadding.first) else blockSize
 
                 setOptionalBlockId(block)
                 renderEntities(block.entities)

diff --git a/beam-ui/src/jsMain/kotlin/dev/d1s/beam/ui/component/BlockContainerComponent.kt b/beam-ui/src/jsMain/kotlin/dev/d1s/beam/ui/component/BlockContainerComponent.kt
@@ -23,7 +23,6 @@ import dev.d1s.beam.ui.state.Observable
 import dev.d1s.beam.ui.util.Size
 import dev.d1s.exkt.kvision.component.Component
 import dev.d1s.exkt.kvision.component.render
-import io.kvision.core.AlignItems
 import io.kvision.core.JustifyContent
 import io.kvision.html.div
 import io.kvision.panel.SimplePanel
@@ -49,11 +48,11 @@ class BlockContainerComponent : Component<Unit>(), KoinComponent {
 
     private fun SimplePanel.renderBlocks(blocks: Blocks) {
         div(className = "container-fluid d-flex justify-content-center mb-5") {
-            vPanel(justify = JustifyContent.CENTER, alignItems = AlignItems.CENTER) {
+            vPanel(className = "w-100") {
                 val batches = blocks.splitIntoBatches()
 
                 batches.forEachIndexed { batchIndex, blockBatch ->
-                    hPanel {
+                    hPanel(className = "w-100", justify = JustifyContent.CENTER) {
                         blockBatch.forEachIndexed { blockIndex, block ->
                             val lastBlock = blockIndex == blockBatch.lastIndex
                             val lastBatch = batchIndex == batches.lastIndex