1) Make all WorksGrid items fill the same size;

ItamiOMW · Mar 9, 2024 · 96ed02d · 96ed02d
1 parent 58147e4
commit 96ed02d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/site/src/jsMain/kotlin/com/itami/itami_mobile/components/sections/works/WorksSection.kt b/site/src/jsMain/kotlin/com/itami/itami_mobile/components/sections/works/WorksSection.kt
@@ -43,7 +43,10 @@ fun WorksSection() {
             modifier = WorkItemsGridStyle.toModifier()
         ) {
             Work.entries.forEach {
-                WorkItem(work = it)
+                WorkItem(
+                    work = it,
+                    modifier = Modifier.flex(1)
+                )
             }
             MoreIsYetToCome()
         }
@@ -55,8 +58,7 @@ private fun MoreIsYetToCome() {
     val colorPalette = ColorMode.current.toPalette()
     Box(
         modifier = Modifier
-            .fillMaxSize()
-            .background(colorPalette.overlay)
+            .backgroundColor(colorPalette.overlay)
             .borderRadius(30.px),
         contentAlignment = Alignment.Center
     ) {

diff --git a/.../kotlin/com/itami/itami_mobile/components/sections/works/components/WorkItemsGridStyle.kt b/.../kotlin/com/itami/itami_mobile/components/sections/works/components/WorkItemsGridStyle.kt
@@ -2,16 +2,19 @@ package com.itami.itami_mobile.components.sections.works.components
 
 import com.varabyte.kobweb.compose.ui.Modifier
 import com.varabyte.kobweb.compose.ui.modifiers.gap
+import com.varabyte.kobweb.compose.ui.modifiers.gridAutoRows
 import com.varabyte.kobweb.compose.ui.modifiers.margin
 import com.varabyte.kobweb.silk.components.style.ComponentStyle
 import com.varabyte.kobweb.silk.components.style.breakpoint.Breakpoint
 import org.jetbrains.compose.web.css.cssRem
+import org.jetbrains.compose.web.css.fr
 
 val WorkItemsGridStyle by ComponentStyle {
     base {
         Modifier
             .gap(2.cssRem)
             .margin(top = 4.75.cssRem)
+            .gridAutoRows { size(1.fr) }
     }
     Breakpoint.ZERO {
         Modifier