From 6347a7c36a863fc5f78df72cd1f10ca04bd8d7af Mon Sep 17 00:00:00 2001 From: Brandon McAnsh Date: Sat, 22 Aug 2026 22:41:56 -0400 Subject: [PATCH] fix(tipcard): scale the name with the card width MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The card already derives every other metric from its width — the code, the avatar, the corner radius, the name-row padding — but the name itself was pinned at textMedium's 16sp, so it read oversized on the 230-wide menu card and undersized on the 305-wide full-screen one. Figma scales it with the rest of the card: 17 on the 269-wide base, 19.1 on the 302-wide full-screen card (node 9277:121421), 15.3 on the 242-wide You-page card (node 9276:4645). Derive it from the same width the other metrics come from, keeping textMedium's family, weight, and 1.25 line-height ratio. Converted through the density so the name holds its proportion at any user font scale, matching the card's fixed geometry. --- .../app/bills/components/cards/TipCard.kt | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/apps/flipcash/shared/bills/src/main/kotlin/com/flipcash/app/bills/components/cards/TipCard.kt b/apps/flipcash/shared/bills/src/main/kotlin/com/flipcash/app/bills/components/cards/TipCard.kt index 111aea46a..faf539a9a 100644 --- a/apps/flipcash/shared/bills/src/main/kotlin/com/flipcash/app/bills/components/cards/TipCard.kt +++ b/apps/flipcash/shared/bills/src/main/kotlin/com/flipcash/app/bills/components/cards/TipCard.kt @@ -23,6 +23,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.takeOrElse +import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.Dp @@ -76,6 +77,14 @@ private const val TipCardCodeFraction = 0.68f // scannable code (square) private const val TipCardAvatarFraction = 0.09f // name-row avatar private const val TipCardCornerFraction = 0.08f // corner radius private const val TipCardNameTopFraction = 0.06f // name-row top padding (of card height) +// The name is part of that same proportional figure: Figma draws it at 17 on the 269-wide card and +// scales it with the card, so the 302-wide full-screen card gets 19.1 (node 9277:121421) and the +// 242-wide You-page card 15.3 (node 9276:4645). A fixed size instead left the name looking oversized +// on the small card and undersized on the big one. +private const val TipCardNameFraction = 17f / 269f +// Line height as a multiple of the font size, carried over from `textMedium` (20 on 16) so a name +// that wraps to a second line keeps the same rhythm it had at the fixed size. +private const val TipCardNameLineHeightRatio = 1.25f @OptIn(ExperimentalLayoutApi::class) @Composable @@ -104,6 +113,10 @@ internal fun TipCard( val codeSize = width * TipCardCodeFraction val avatarSize = width * TipCardAvatarFraction val cornerRadius = width * TipCardCornerFraction + // Converted through the density rather than read as sp: the card is a fixed-geometry figure + // (and is rendered for export), so the name has to keep its proportion whatever the user's + // font scale is. + val nameFontSize = with(LocalDensity.current) { (width * TipCardNameFraction).toSp() } Box( modifier = Modifier @@ -132,7 +145,10 @@ internal fun TipCard( ) { Text( text = stringResource(R.string.label_tipUser, user.displayName), - style = CodeTheme.typography.textMedium, + style = CodeTheme.typography.textMedium.copy( + fontSize = nameFontSize, + lineHeight = nameFontSize * TipCardNameLineHeightRatio, + ), color = CodeTheme.colors.textMain, maxLines = 2, overflow = TextOverflow.Ellipsis,