Bug 1821724 - Pocket column alignment fixed for all orientations

app/src/main/java/org/mozilla/fenix/compose/ListItemTabLarge.kt

@@ -28,6 +28,9 @@ import androidx.compose.ui.unit.sp
 import org.mozilla.fenix.compose.annotation.LightDarkPreview
 import org.mozilla.fenix.theme.FirefoxTheme
 
+const val ITEM_WIDTH = 328
+const val ITEM_HEIGHT = 116
+
 /**
  * Default layout of a large tab shown in a list taking String arguments for title and caption.
  * Has the following structure:
@@ -138,7 +141,7 @@ fun ListItemTabSurface(
     onClick: (() -> Unit)? = null,
     tabDetails: @Composable () -> Unit,
 ) {
-    var modifier = Modifier.size(328.dp, 116.dp)
+    var modifier = Modifier.size(ITEM_WIDTH.dp, ITEM_HEIGHT.dp)
     if (onClick != null) modifier = modifier.then(Modifier.clickable { onClick() })
 
     Card(

app/src/main/java/org/mozilla/fenix/compose/ListItemTabLargePlaceholder.kt

@@ -46,7 +46,7 @@ fun ListItemTabLargePlaceholder(
 ) {
     Card(
         modifier = Modifier
-            .size(328.dp, 116.dp)
+            .size(ITEM_WIDTH.dp, ITEM_HEIGHT.dp)
             .clickable { onClick() },
         shape = RoundedCornerShape(8.dp),
         backgroundColor = FirefoxTheme.colors.layer2,

app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt

@@ -6,6 +6,7 @@
 
 package org.mozilla.fenix.home.pocket
 
+import android.content.res.Configuration
 import android.graphics.Rect
 import android.net.Uri
 import androidx.annotation.FloatRange
@@ -39,6 +40,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.LayoutCoordinates
 import androidx.compose.ui.layout.boundsInWindow
 import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalView
@@ -58,6 +60,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.max
 import kotlinx.coroutines.delay
 import mozilla.components.service.pocket.PocketStory
 import mozilla.components.service.pocket.PocketStory.PocketRecommendedStory
@@ -67,6 +70,7 @@ import mozilla.components.service.pocket.PocketStory.PocketSponsoredStoryShim
 import org.mozilla.fenix.R
 import org.mozilla.fenix.compose.ClickableSubstringLink
 import org.mozilla.fenix.compose.EagerFlingBehavior
+import org.mozilla.fenix.compose.ITEM_WIDTH
 import org.mozilla.fenix.compose.ListItemTabLarge
 import org.mozilla.fenix.compose.ListItemTabLargePlaceholder
 import org.mozilla.fenix.compose.ListItemTabSurface
@@ -271,12 +275,20 @@ fun PocketStories(
     val listState = rememberLazyListState()
     val flingBehavior = EagerFlingBehavior(lazyRowState = listState)
 
+    val configuration = LocalConfiguration.current
+    val screenWidth = configuration.screenWidthDp.dp
+
+    val endPadding =
+        remember { mutableStateOf(endPadding(configuration, screenWidth, contentPadding)) }
+    // Force recomposition as padding is not consistently updated when orientation has changed.
+    endPadding.value = endPadding(configuration, screenWidth, contentPadding)
+
     LazyRow(
         modifier = Modifier.semantics {
             testTagsAsResourceId = true
             testTag = "pocket.stories"
         },
-        contentPadding = PaddingValues(horizontal = contentPadding),
+        contentPadding = PaddingValues(start = contentPadding, end = endPadding.value),
         state = listState,
         flingBehavior = flingBehavior,
         horizontalArrangement = Arrangement.spacedBy(8.dp),
@@ -330,6 +342,19 @@ fun PocketStories(
     }
 }
 
+private fun endPadding(configuration: Configuration, screenWidth: Dp, contentPadding: Dp) =
+    if (configuration.orientation == Configuration.ORIENTATION_PORTRAIT) {
+        alignColumnToTitlePadding(screenWidth = screenWidth, contentPadding = contentPadding)
+    } else {
+        contentPadding
+    }
+
+/**
+ * If the column item is wider than the [screenWidth] default to the [contentPadding].
+ */
+private fun alignColumnToTitlePadding(screenWidth: Dp, contentPadding: Dp) =
+    max(screenWidth - (ITEM_WIDTH.dp + contentPadding), contentPadding)
+
 /**
  * Add a callback for when this Composable is "shown" on the screen.
  * This checks whether the composable has at least [threshold] ratio of it's total area drawn inside