Improve web demo input validation

demo/src/jsMain/kotlin/App.kt

@@ -3,6 +3,7 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.sizeIn
@@ -65,9 +66,11 @@ internal fun App() {
             }
         ) { padding ->
             Column(
-                modifier = Modifier.padding(padding)
-                    .padding(horizontal = 32.dp).padding(bottom = 32.dp)
+                modifier = Modifier
+                    .fillMaxWidth()
                     .verticalScroll(rememberScrollState())
+                    .padding(padding)
+                    .padding(horizontal = 32.dp).padding(bottom = 32.dp)
             ) {
                 Row(verticalAlignment = Alignment.CenterVertically) {
                     Text(
@@ -204,6 +207,12 @@ private fun FileSizeDemo(selectedLanguageCode: String) {
                 if (it.length < 16) {
                     myFile = it
                 }
+            },
+            isError = myFile.toLongOrNull() == null,
+            supportingText = if (myFile.toLongOrNull() == null) {
+                { Text("Invalid number") }
+            } else {
+                null
             }
         )
         Text(
@@ -224,11 +233,12 @@ private fun FileSizeDemo(selectedLanguageCode: String) {
         TextField(
             modifier = Modifier.sizeIn(minWidth = 20.dp),
             value = decimals,
-            onValueChange = {
-                val updatedDecimals = it.toIntOrNull()
-                if (updatedDecimals != null && updatedDecimals < 10) {
-                    decimals = it
-                }
+            onValueChange = { decimals = it },
+            isError = decimals.toIntOrNull() == null,
+            supportingText = if (decimals.toIntOrNull() == null) {
+                { Text("Invalid number") }
+            } else {
+                null
             }
         )
     }
@@ -277,6 +287,12 @@ private fun AbbreviationDemo(selectedLanguageCode: String) {
                 if (it.length < 16) {
                     myNumber = it
                 }
+            },
+            isError = myNumber.toLongOrNull() == null,
+            supportingText = if (myNumber.toLongOrNull() == null) {
+                { Text("Invalid number") }
+            } else {
+                null
             }
         )
     }
@@ -293,11 +309,12 @@ private fun AbbreviationDemo(selectedLanguageCode: String) {
         TextField(
             modifier = Modifier.sizeIn(minWidth = 20.dp),
             value = decimals,
-            onValueChange = {
-                val updatedDecimals = it.toIntOrNull()
-                if (updatedDecimals != null && updatedDecimals < 10) {
-                    decimals = it
-                }
+            onValueChange = { decimals = it },
+            isError = decimals.toIntOrNull() == null,
+            supportingText = if (decimals.toIntOrNull() == null) {
+                { Text("Invalid number") }
+            } else {
+                null
             }
         )
     }
@@ -392,7 +409,10 @@ private fun DateTimeField(instant: Instant, onUpdate: (Instant) -> Unit) {
                 error = true
             }
         },
-        isError = error
+        isError = error,
+        supportingText = if (error) {
+            { Text("Invalid date format. Please use ISO-8601 ;-)") }
+        } else null
     )
 }