From 467495b7670f0890e8c709296c0a0fd8439949b2 Mon Sep 17 00:00:00 2001 From: Brandon McAnsh Date: Tue, 3 Nov 2026 17:04:25 -0500 Subject: [PATCH] fix(chat): tighten cash bubble spacing The cash bubble was taller than the spec (docs/specs/cash-bubbles.md, node 13266:348). Outer padding goes from 20 to 15, the caption, money and counterpart gaps from 20 to 10, and the currency gap from 15 to 5. The gaps move to the static 5dp grid so each value maps down to the same step at every screen width. --- .../com/flipcash/shared/chat/ui/MessageBubble.kt | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/apps/flipcash/shared/chat-ui/src/androidMain/kotlin/com/flipcash/shared/chat/ui/MessageBubble.kt b/apps/flipcash/shared/chat-ui/src/androidMain/kotlin/com/flipcash/shared/chat/ui/MessageBubble.kt index f52eac7955..0f49a3a3df 100644 --- a/apps/flipcash/shared/chat-ui/src/androidMain/kotlin/com/flipcash/shared/chat/ui/MessageBubble.kt +++ b/apps/flipcash/shared/chat-ui/src/androidMain/kotlin/com/flipcash/shared/chat/ui/MessageBubble.kt @@ -948,10 +948,12 @@ private fun CashBubble( val secondary = CodeTheme.typography.caption.copy(fontWeight = FontWeight.Medium) val amountStyle = CodeTheme.typography.displayMedium + // The gaps use the static grid, like the bubble's own padding, so each spec value maps + // down to the same 5dp step at every screen width. Column( modifier = Modifier .fillMaxWidth() - .padding(vertical = CodeTheme.dimens.grid.x2), + .padding(vertical = CodeTheme.dimens.staticGrid.x1), horizontalAlignment = Alignment.CenterHorizontally, ) { Text( @@ -963,10 +965,10 @@ private fun CashBubble( ) // The amount and total read as one block: the total sits right under the amount, the - // tightest pair in the bubble, and the currency sits a larger gap below the money, the + // tightest pair in the bubble, and the currency sits a small gap below the money, the // same gap whether or not there is a total. Column( - modifier = Modifier.padding(top = CodeTheme.dimens.grid.x4), + modifier = Modifier.padding(top = CodeTheme.dimens.staticGrid.x2), horizontalAlignment = Alignment.CenterHorizontally, ) { if (parts.size >= 2) { @@ -1019,7 +1021,7 @@ private fun CashBubble( ) } - val currencyGap = Modifier.padding(top = CodeTheme.dimens.grid.x3) + val currencyGap = Modifier.padding(top = CodeTheme.dimens.staticGrid.x1) // A preview has no token image loader, so it draws the token row's shape instead. if (LocalInspectionMode.current) { Row( @@ -1054,7 +1056,7 @@ private fun CashBubble( lines.counterpart?.let { counterpart -> Text( - modifier = Modifier.padding(top = CodeTheme.dimens.grid.x4), + modifier = Modifier.padding(top = CodeTheme.dimens.staticGrid.x2), text = counterpart.text(), style = secondary, color = CodeTheme.colors.textSecondary,