Implement vertical scrolling for landscape orientation

app/src/main/java/com/example/cupcake/CupcakeScreen.kt

@@ -21,6 +21,8 @@ import androidx.annotation.StringRes
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material3.Icon
@@ -115,7 +117,10 @@ fun CupcakeApp(
         NavHost(
             navController = navController,
             startDestination = CupcakeScreen.Start.name,
-            modifier = Modifier.padding(innerPadding)
+            modifier = Modifier
+                .fillMaxSize()
+                .verticalScroll(rememberScrollState())
+                .padding(innerPadding)
         ) {
             composable(route = CupcakeScreen.Start.name) {
                 StartOrderScreen(

app/src/main/java/com/example/cupcake/ui/SelectOptionScreen.kt

@@ -39,6 +39,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import com.example.cupcake.R
 import com.example.cupcake.ui.components.FormattedPriceLabel
+import com.example.cupcake.ui.theme.CupcakeTheme
 
 /**
  * Composable that displays the list of items as [RadioButton] options,
@@ -100,12 +101,14 @@ fun SelectOptionScreen(
         Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(dimensionResource(R.dimen.padding_medium))
+                .padding(dimensionResource(R.dimen.padding_medium)),
-                .weight(1f, false),
             horizontalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.padding_medium)),
             verticalAlignment = Alignment.Bottom
         ) {
-            OutlinedButton(modifier = Modifier.weight(1f), onClick = onCancelButtonClicked) {
+            OutlinedButton(
+                modifier = Modifier.weight(1f),
+                onClick = onCancelButtonClicked
+            ) {
                 Text(stringResource(R.string.cancel))
             }
             Button(
@@ -124,9 +127,11 @@ fun SelectOptionScreen(
 @Preview
 @Composable
 fun SelectOptionPreview() {
+    CupcakeTheme {
         SelectOptionScreen(
             subtotal = "299.99",
             options = listOf("Option 1", "Option 2", "Option 3", "Option 4"),
             modifier = Modifier.fillMaxHeight()
         )
     }
+}

app/src/main/java/com/example/cupcake/ui/StartOrderScreen.kt

@@ -19,9 +19,7 @@ import androidx.annotation.StringRes
 import androidx.compose.foundation.Image
 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.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -41,6 +39,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.example.cupcake.R
 import com.example.cupcake.data.DataSource
+import com.example.cupcake.ui.theme.CupcakeTheme
 
 /**
  * Composable that allows the user to select the desired cupcake quantity and expects
@@ -75,7 +74,6 @@ fun StartOrderScreen(
             )
             Spacer(modifier = Modifier.height(dimensionResource(R.dimen.padding_small)))
         }
-        Row(modifier = Modifier.weight(1f, false)) {
         Column(
             modifier = Modifier.fillMaxWidth(),
             horizontalAlignment = Alignment.CenterHorizontally,
@@ -86,13 +84,13 @@ fun StartOrderScreen(
             quantityOptions.forEach { item ->
                 SelectQuantityButton(
                     labelResourceId = item.first,
-                        onClick = { onNextButtonClicked(item.second) }
+                    onClick = { onNextButtonClicked(item.second) },
+                    modifier = Modifier.fillMaxWidth(),
                 )
             }
         }
     }
 }
-}
 
 /**
  * Customizable button composable that displays the [labelResourceId]
@@ -115,9 +113,13 @@ fun SelectQuantityButton(
 @Preview
 @Composable
 fun StartOrderPreview() {
+    CupcakeTheme {
         StartOrderScreen(
             quantityOptions = DataSource.quantityOptions,
             onNextButtonClicked = {},
-        modifier = Modifier.fillMaxSize().padding(dimensionResource(R.dimen.padding_medium))
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(dimensionResource(R.dimen.padding_medium))
         )
     }
+}

app/src/main/java/com/example/cupcake/ui/SummaryScreen.kt

@@ -38,6 +38,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import com.example.cupcake.R
 import com.example.cupcake.data.OrderUiState
 import com.example.cupcake.ui.components.FormattedPriceLabel
+import com.example.cupcake.ui.theme.CupcakeTheme
 
 /**
  * This composable expects [orderUiState] that represents the order state, [onCancelButtonClicked]
@@ -97,9 +98,7 @@ fun OrderSummaryScreen(
             )
         }
         Row(
-            modifier = Modifier
+            modifier = Modifier.padding(dimensionResource(R.dimen.padding_medium))
-                .weight(1f, false)
-                .padding(dimensionResource(R.dimen.padding_medium))
         ) {
             Column(
                 verticalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.padding_small))
@@ -124,6 +123,7 @@ fun OrderSummaryScreen(
 @Preview
 @Composable
 fun OrderSummaryPreview() {
+    CupcakeTheme {
         OrderSummaryScreen(
             orderUiState = OrderUiState(0, "Test", "Test", "$300.00"),
             onSendButtonClicked = { subject: String, summary: String -> },
@@ -131,3 +131,4 @@ fun OrderSummaryPreview(){
             modifier = Modifier.fillMaxHeight()
         )
     }
+}