fix(chat-ui): size link cards off the transcript's full width

Link cards and the solo group's head card came out about 30dp narrower
than iOS's on the same screen. iOS takes 78% of the transcript's full
width for both (ChatViewController.maxBubbleWidthFraction). Android took
78% of the row after its side insets for link cards, and 72% for the
head card.

transcriptCardWidth() adds the insets back before applying the fraction,
and both the card rows in ContentBubble and the head card in MessageList
use it. Text and cash bubbles keep their existing widths.

Author: bmc08gt

apps/flipcash/features/messenger/src/main/kotlin/com/flipcash/app/messenger/internal/screens/components/MessageList.kt

@@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.ime
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListLayoutInfo
 import androidx.compose.foundation.lazy.LazyListState
@@ -60,6 +61,7 @@ import com.flipcash.shared.chat.reactions.ReactionRefreshPlanner
 import com.flipcash.shared.chat.ui.ChatAnimations
 import com.flipcash.shared.chat.ui.GroupInviteCardDefaults
 import com.flipcash.shared.chat.ui.GroupInviteLinkCard
+import com.flipcash.shared.chat.ui.transcriptCardWidth
 import com.getcode.theme.CodeTheme
 import com.getcode.ui.utils.rememberKeyboardController
 import com.getcode.util.vibration.LocalVibrator
@@ -72,9 +74,6 @@ import kotlinx.coroutines.flow.first
 import kotlinx.coroutines.flow.mapNotNull
 import kotlinx.coroutines.withTimeoutOrNull
 
-// The empty group's invite card, as a share of the row: 290 of 402 in node 10330:19164.
-private const val GROUP_INVITE_CARD_WIDTH = 0.72f
-
 @Composable
 internal fun MessageList(
     modifier: Modifier = Modifier,
@@ -435,14 +434,20 @@ internal fun MessageList(
                                 currencyName = state.ruleCurrency?.nameInRequirement,
                             )
                         }
-                        Box(
+                        BoxWithConstraints(
                             modifier = Modifier.fillParentMaxWidth(),
                             contentAlignment = Alignment.Center,
                         ) {
-                            BoxWithConstraints(Modifier.fillMaxWidth(GROUP_INVITE_CARD_WIDTH)) {
+                            // The width a link card gets in a DM transcript, so this reads as the
+                            // same card sent there (iOS sizes both the same way).
+                            val cardWidth = transcriptCardWidth(
+                                rowWidth = maxWidth,
+                                rowInset = CodeTheme.dimens.inset,
+                            )
+                            Box(Modifier.width(cardWidth)) {
                                 GroupInviteLinkCard(
                                     card = card,
-                                    minHeight = maxWidth * GroupInviteCardDefaults.ASPECT,
+                                    minHeight = cardWidth * GroupInviteCardDefaults.ASPECT,
                                     ctaLabel = stringResource(R.string.action_linkCard_invitePeople),
                                     onStart = { onAction(ChatAction.InviteToGroup) }
                                         .takeIf { !selecting },

apps/flipcash/shared/chat-ui/src/main/kotlin/com/flipcash/shared/chat/ui/MessageBubble.kt

@@ -82,6 +82,18 @@ import com.getcode.ui.core.addIf
 enum class BubblePosition { Solo, First, Middle, Last }
 
 private const val BUBBLE_MAX_WIDTH_FRACTION = 0.78f
+
+/**
+ * How wide a link card is drawn in a transcript whose rows are inset by [rowInset] on each side.
+ *
+ * The same fraction as a text bubble, but of the transcript's full width rather than of the inset
+ * row, which is how iOS sizes its link cards and its group's head card
+ * (`ChatViewController.maxBubbleWidthFraction`). Taken of the inset row, the cards came out about
+ * 30dp narrower than iOS's on the same screen.
+ */
+fun transcriptCardWidth(rowWidth: Dp, rowInset: Dp): Dp =
+    (rowWidth + rowInset * 2) * BUBBLE_MAX_WIDTH_FRACTION
+
 private val EDITED_MARKER_GAP = 6.dp
 private const val CASH_BUBBLE_MAX_WIDTH_FRACTION = 0.64f
 
@@ -106,7 +118,10 @@ fun ContentBubble(
     val actionHandler = LocalChatActionHandler.current
     val jumbo = remember(item) { item.rendersBareEmoji() }
     BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
-        val bubbleMaxWidth = when (item.content) {
+        val isCardRow = item.linkCard != null && item.part == MessagePart.Card
+        val bubbleMaxWidth = if (isCardRow) {
+            transcriptCardWidth(rowWidth = maxWidth, rowInset = CodeTheme.dimens.inset)
+        } else when (item.content) {
             is MessageContent.Text -> maxWidth * BUBBLE_MAX_WIDTH_FRACTION
             is MessageContent.Cash -> maxWidth * CASH_BUBBLE_MAX_WIDTH_FRACTION
             is MessageContent.Deleted -> maxWidth * BUBBLE_MAX_WIDTH_FRACTION