Fix a bug that the FAB gets scrolled up with the content in TopAppBarScaffold, and replace *ScrollPlatformModifiers with imitateAndroidxLayout*ScrollPlatformModifiers BTW

Author: ShreckYe

compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsOnly.kt

@@ -2,4 +2,11 @@ package com.huanshankeji.compose.foundation.ext
 
 import com.huanshankeji.compose.ui.Modifier
 
+/*
+const val MATCH_POSITION_RELATIVE_PARENT_DEPRECATED_MESSAGE =
+    "This function's functionality is replaced by `imitateAndroidxLayout`."
+*/
+
+
+//@Deprecated(MATCH_POSITION_RELATIVE_PARENT_DEPRECATED_MESSAGE)
 expect fun Modifier.matchPositionRelativeParentJsDom(): Modifier

compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/Scroll.js.kt

@@ -10,6 +10,7 @@ import com.huanshankeji.compose.foundation.layout.ext.KobwebBox
 import com.huanshankeji.compose.ui.Alignment
 import com.huanshankeji.compose.ui.Modifier
 import com.huanshankeji.compose.ui.PlatformModifier
+import com.huanshankeji.kobweb.compose.ui.modifiers.imitateAndroidxLayout
 import com.varabyte.kobweb.compose.ui.styleModifier
 
 fun PlatformModifier.verticalScroll() =
@@ -18,8 +19,8 @@ fun PlatformModifier.verticalScroll() =
 fun PlatformModifier.horizontalScroll() =
     styleModifier { horizontalScroll() }
 
-val verticalScrollPlatformModifier = PlatformModifier.verticalScroll()
-val horizontalScrollPlatformModifier = PlatformModifier.horizontalScroll()
+val imitateAndroidxLayoutVerticalScrollPlatformModifier = PlatformModifier.imitateAndroidxLayout().verticalScroll()
+val imitateAndroidxLayoutHorizontalScrollPlatformModifier = PlatformModifier.imitateAndroidxLayout().horizontalScroll()
 
 
 @Composable

compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/lazy/LazyDsl.js.kt

@@ -1,9 +1,9 @@
 package com.huanshankeji.compose.foundation.lazy
 
 import androidx.compose.runtime.Composable
-import com.huanshankeji.compose.foundation.horizontalScrollPlatformModifier
+import com.huanshankeji.compose.foundation.imitateAndroidxLayoutHorizontalScrollPlatformModifier
+import com.huanshankeji.compose.foundation.imitateAndroidxLayoutVerticalScrollPlatformModifier
 import com.huanshankeji.compose.foundation.layout.*
-import com.huanshankeji.compose.foundation.verticalScrollPlatformModifier
 import com.huanshankeji.compose.runtime.DeferredComposableRunner
 import com.huanshankeji.compose.ui.Alignment
 import com.huanshankeji.compose.ui.Modifier
@@ -63,7 +63,7 @@ actual fun LazyRow(
     content: LazyListScope.() -> Unit
 ) =
     Row(
-        commonLazyModifier(horizontalScrollPlatformModifier, contentPadding, modifier),
+        commonLazyModifier(imitateAndroidxLayoutHorizontalScrollPlatformModifier, contentPadding, modifier),
         horizontalArrangement,
         verticalAlignment
     ) {
@@ -80,7 +80,7 @@ actual fun LazyColumn(
     content: LazyListScope.() -> Unit
 ) =
     Column(
-        commonLazyModifier(verticalScrollPlatformModifier, contentPadding, modifier),
+        commonLazyModifier(imitateAndroidxLayoutVerticalScrollPlatformModifier, contentPadding, modifier),
         verticalArrangement,
         horizontalAlignment
     ) {

compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.js.kt

@@ -5,15 +5,13 @@ import com.huanshankeji.compose.contentDescription
 import com.huanshankeji.compose.foundation.ext.matchPositionRelativeParent
 import com.huanshankeji.compose.foundation.layout.Column
 import com.huanshankeji.compose.foundation.layout.PaddingValues
+import com.huanshankeji.compose.foundation.layout.ext.fillMaxWidthStretch
 import com.huanshankeji.compose.foundation.layout.fillMaxSize
-import com.huanshankeji.compose.foundation.layout.fillMaxWidth
 import com.huanshankeji.compose.material.icons.Icon
 import com.huanshankeji.compose.material2.icons.mdcIconWithStyle
 import com.huanshankeji.compose.ui.Modifier
 import com.huanshankeji.compose.ui.toAttrs
-import com.varabyte.kobweb.compose.css.Overflow
 import com.varabyte.kobweb.compose.css.TextAlign
-import com.varabyte.kobweb.compose.css.overflow
 import com.varabyte.kobweb.compose.css.textAlign
 import dev.petuska.kmdc.top.app.bar.*
 import org.jetbrains.compose.web.css.*
@@ -121,26 +119,27 @@ actual fun TopAppBarScaffold(
             topAppBarModifier,
             navigationIcon,
             actions,
-            Modifier.weight(1f).fillMaxWidth()
+            Modifier.weight(1f).fillMaxWidthStretch()
         ) {
+            // The content gets hidden behind the top app bar if this div is not added.
             Div({
                 style {
                     height(100.percent)
-                    position(Position.Relative)
+                    position(Position.Relative) // same issue as above if not added
                 }
             }) {
                 Div({
                     style {
                         matchPositionRelativeParent()
-                        overflow(Overflow.Auto)
+                        //overflow(Overflow.Auto) // This seems not needed. TODO remove if confirmed to be not needed
                     }
                 }) {
                     // see `ScaffoldLayoutWithMeasureFix`
                     val innerPadding = PaddingValues()
                     content(innerPadding)
-
-                    floatingActionButton?.let { fabWithPosition(it) }
                 }
+
+                floatingActionButton?.let { fabWithPosition(it) }
             }
         }
 

compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/lazy/ext/LazyDsl.js.kt

@@ -1,7 +1,7 @@
 package com.huanshankeji.compose.material2.lazy.ext
 
 import androidx.compose.runtime.Composable
-import com.huanshankeji.compose.foundation.verticalScrollPlatformModifier
+import com.huanshankeji.compose.foundation.imitateAndroidxLayoutVerticalScrollPlatformModifier
 import com.huanshankeji.compose.runtime.DeferredComposableRunner
 import com.huanshankeji.compose.ui.Modifier
 import com.varabyte.kobweb.compose.ui.toAttrs
@@ -78,6 +78,6 @@ actual class HeaderScope(val headingElementScope: ElementScope<HTMLHeadingElemen
 
 @Composable
 actual fun List(modifier: Modifier, content: ListScope.() -> Unit) =
-    MDCList(attrs = verticalScrollPlatformModifier.then(modifier.platformModifier).toAttrs()) {
+    MDCList(attrs = imitateAndroidxLayoutVerticalScrollPlatformModifier.then(modifier.platformModifier).toAttrs()) {
         ListScope(this).ComposableRun(content)
     }

compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/lazy/ext/List.js.kt

@@ -1,7 +1,7 @@
 package com.huanshankeji.compose.material3.lazy.ext
 
 import androidx.compose.runtime.Composable
-import com.huanshankeji.compose.foundation.verticalScrollPlatformModifier
+import com.huanshankeji.compose.foundation.imitateAndroidxLayoutVerticalScrollPlatformModifier
 import com.huanshankeji.compose.html.material3.MdList
 import com.huanshankeji.compose.html.material3.MdListItemScope
 import com.huanshankeji.compose.html.material3.MdListItemType
@@ -95,6 +95,6 @@ actual fun List(
     modifier: Modifier,
     content: ListScope.() -> Unit
 ) =
-    MdList(verticalScrollPlatformModifier.then(modifier.platformModifier).toAttrs()) {
+    MdList(imitateAndroidxLayoutVerticalScrollPlatformModifier.then(modifier.platformModifier).toAttrs()) {
         ListScope(this).ComposableRun(content)
     }

demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material2.kt

@@ -39,6 +39,8 @@ fun Material2(/*modifier: Modifier = Modifier*/) {
         MaterialIconActionButton({}, icon = Icons.Default.Done, contentDescription = "done")
     }, snackbarHost = {
         SnackbarHost(snackbarHostState)
+    }, floatingActionButton = {
+        Text("FAB") // The Material 2 FAB is not added so this is a placeholder.
     }) {
         VerticalScrollBox {
             Card(contentPaddingModifier) {