Tighten the gap between mint name and balance in MintHeader

Two things were spacing the lines apart, neither of them deliberate.
CurrencyAmount pads itself on all four sides — useful when it stands alone, but
here the top edge only pushes the balance away from the name — and the xxs text
preset's line box is half again as tall as its text, so the name carried empty
space below it too.

The balance's top padding is now dropped at the call site (the sides stay: the
name aligns its right edge to them), and the name takes the font's own line
height instead of the preset's — tight enough to close the gap, loose enough
that a descender is not clipped.

The name was already bounded and single-line, so it already ellipsised;
ellipsizeMode is now stated rather than left to the default.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
minibits-cash
2026-09-07 23:41:13 +02:00
co-authored by Claude Opus 5
parent a0ab95ac07
commit 51bbadae06
+14 -4
View File
@@ -8,7 +8,7 @@ import { CurrencySign } from "../Wallet/CurrencySign"
import { CurrencyAmount } from "../Wallet/CurrencyAmount"
import { observer } from "mobx-react-lite"
import { StackNavigationProp } from "@react-navigation/stack"
import { moderateScale } from "@gocodingnow/rn-size-matters"
import { moderateScale, verticalScale } from "@gocodingnow/rn-size-matters"
import { useNavigation } from "@react-navigation/native"
export const MintHeader = observer(function(props: {
@@ -69,6 +69,7 @@ export const MintHeader = observer(function(props: {
<Text
text={mint.shortname}
numberOfLines={1}
ellipsizeMode='tail'
style={[$mintName, {color: textColor || headerTitle}]}
size='xxs'
/>
@@ -86,6 +87,10 @@ export const MintHeader = observer(function(props: {
amountStyle={{color: resolvedTextColor}}
symbolStyle={{color: resolvedTextColor}}
size='medium'
// CurrencyAmount pads itself on all four sides, which here
// only pushes the balance away from the name above it. The
// sides are still wanted — $mintName aligns to them.
containerStyle={{paddingTop: 0}}
/>
)
)}
@@ -108,10 +113,15 @@ const $hiddenBalance: TextStyle = {
}
const $mintName: TextStyle = {
// Bounded so a long mint name cannot grow this block across the centred pill, which
// is absolutely positioned and would simply be overlapped.
// Bounded so a long mint name cannot grow this block across the centred pill, which is
// absolutely positioned and would simply be overlapped. Past this, numberOfLines
// ellipsises it.
maxWidth: spacing.screenWidth * 0.28,
// Matches CurrencyAmount's own padding, so the name's right edge lines up with the
// balance digits rather than hanging a few pixels past them.
paddingRight: spacing.tiny,
}
// The xxs preset's line box is half again as tall as its text, and the empty half
// below the name is spacing the two lines apart. Set to the font's own line height:
// tight enough to close the gap, loose enough that a descender is not clipped.
lineHeight: verticalScale(14),
}