bitpay · cmgustavo · Sep 11, 2026
diff --git a/src/components/amount/Amount.tsx b/src/components/amount/Amount.tsx
@@ -50,7 +50,7 @@ const ButtonContainer = styled.View`
 `;
 
 const ViewContainer = styled.View`
-  height: 100%;
+  flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -65,7 +65,11 @@ const Row = styled.View`
   flex-direction: row;
 `;
 
-const AmountText = styled(BaseText)<{bigAmount?: boolean}>`
+// The entered amount is already display-sized; cap it so long values stay on
+// one line instead of overflowing the hero.
+const AmountText = styled(BaseText).attrs(() => ({
+  maxFontSizeMultiplier: 1.3,
+}))<{bigAmount?: boolean}>`
   font-size: ${({bigAmount}) => (bigAmount ? '35px' : '50px')};
   font-weight: 500;
   text-align: center;
@@ -93,7 +97,9 @@ const CurrencySuperScript = styled.View`
   top: 10px;
   right: -20px;
 `;
-const CurrencyText = styled(BaseText)<{bigAmount?: boolean}>`
+const CurrencyText = styled(BaseText).attrs(() => ({
+  maxFontSizeMultiplier: 1.3,
+}))<{bigAmount?: boolean}>`
   font-size: ${({bigAmount}) => (bigAmount ? '12px' : '20px')};
   color: ${({theme}) => theme.colors.text};
   position: absolute;

diff --git a/src/components/banner/Banner.tsx b/src/components/banner/Banner.tsx
@@ -25,26 +25,32 @@ import {SvgProps} from 'react-native-svg';
 
 const BANNER_HEIGHT = 80;
 
+// `$height` is transient on purpose: RN declares `height` as a valid native View
+// prop (BaseViewConfig), so a plain `height` prop would be forwarded and applied
+// as a hard height, clipping the text at large font sizes.
 const BannerContainer = styled.View<{
-  height?: number;
+  $height?: number;
   containerBgColor?: string;
 }>`
   background-color: ${({theme: {dark}, containerBgColor}) =>
     containerBgColor ? containerBgColor : dark ? LightBlack : NeutralSlate};
   border-radius: 10px;
   margin: 10px 0;
   padding: 10px 12px;
-  align-items: flex-start;
   justify-content: space-between;
-  min-height: ${({height}) => height || BANNER_HEIGHT}px;
+  min-height: ${({$height}) => $height || BANNER_HEIGHT}px;
 `;
 
 const Description = styled.View`
   margin: 0 10px;
   flex: 1;
 `;
 
-const BannerRow = styled(Row)`
+// Deliberately not `styled(Row)`: Row is `flex: 1` (flex-basis 0), and as the
+// only child of this column it would contribute no intrinsic height, collapsing
+// the container to its min-height and spilling the text out of both edges.
+const BannerRow = styled.View`
+  flex-direction: row;
   align-items: center;
   justify-content: space-between;
 `;
@@ -132,7 +138,7 @@ const Banner = ({
     : undefined;
 
   return (
-    <BannerContainer height={height} containerBgColor={containerBgColor}>
+    <BannerContainer $height={height} containerBgColor={containerBgColor}>
       <BannerRow>
         {icon ? React.createElement(icon) : <Info bgColor={bgColor} />}
         <Description>

diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -75,7 +75,12 @@ interface ButtonOptionProps {
   danger?: boolean;
   disabled?: boolean;
   action?: boolean;
-  height?: number;
+  /**
+   * Transient: RN declares `height` as a valid native View prop, so a plain
+   * `height` would be forwarded and applied as a hard height, beating the
+   * min-height below and clipping the label at large font sizes.
+   */
+  $height?: number;
   children?: React.ReactNode;
 }
 
@@ -162,9 +167,9 @@ const ButtonContent = styled.View<ButtonOptionProps>`
       return Action;
     }};
   border-radius: ${({borderRadius}) => borderRadius ?? BUTTON_RADIUS}px;
-  min-height: ${({height}) => height || BUTTON_HEIGHT}px;
-  padding: 4px 12px;
+  min-height: ${({$height}) => $height || BUTTON_HEIGHT}px;
   justify-content: center;
+  padding: 8px 12px;
 `;
 
 const ButtonText = styled(ButtonBaseText)<ButtonOptionProps>`
@@ -202,6 +207,7 @@ const ButtonContainerFlex = styled.View<{hasIcon: boolean}>`
   justify-content: ${({hasIcon}) => (hasIcon ? 'space-between' : 'center')};
   padding-left: ${({hasIcon}) => (hasIcon ? 10 : 0)}px;
   align-items: center;
+  flex-shrink: 1;
 `;
 
 const ButtonTextContainer = styled.View`
@@ -275,9 +281,14 @@ const PillContent = styled.View<ButtonOptionProps>`
   }};
   border-radius: ${PILL_RADIUS}px;
   padding: 8px 15px;
+  flex-shrink: 1;
 `;
 
-const PillText = styled(BaseText)<ButtonOptionProps>`
+// Pills are compact chips (often in fixed-height nav headers), so their label
+// is capped rather than left to scale unbounded.
+const PillText = styled(BaseText).attrs(() => ({
+  maxFontSizeMultiplier: 1.4,
+}))<ButtonOptionProps>`
   font-size: 15px;
   font-weight: 400;
   line-height: 22.03px;
@@ -432,7 +443,7 @@ const Button: React.FC<React.PropsWithChildren<ButtonProps>> = props => {
       activeOpacity={disabled ? 1 : ActiveOpacity}
       testID={testID || 'button'}>
       <ButtonTypeContainer
-        height={height}
+        $height={height}
         danger={danger}
         secondary={secondary}
         outline={outline}

diff --git a/src/components/chain-search/ChainSearch.tsx b/src/components/chain-search/ChainSearch.tsx
@@ -39,11 +39,13 @@ export const SearchIconContainer = styled.View`
 
 export const SearchFilterContainer = styled(TouchableOpacity)`
   min-width: 60px;
-  max-width: 130px;
+  max-width: 150px;
+  flex-shrink: 1;
+  padding: 4px 0;
   justify-content: center;
   align-items: center;
   border-radius: 20px;
-  height: 32px;
+  min-height: 32px;
   margin: auto 8px auto 15px;
   border: 1px solid ${({theme: {dark}}) => (dark ? Action : 'transparent')};
   background: ${({theme: {dark}}) => (dark ? '#2240C440' : LightBlue)};
@@ -69,13 +71,19 @@ export const SearchFilterLabelContainer = styled.View`
   margin-left: 15px;
   margin-right: 15px;
   flex: 1 1 auto;
+  flex-shrink: 1;
 `;
 
-export const SearchFilterLabel = styled(BaseText)`
+// Compact filter chip that shares a fixed-height row with the search input.
+export const SearchFilterLabel = styled(BaseText).attrs(() => ({
+  maxFontSizeMultiplier: 1.4,
+  numberOfLines: 2,
+}))`
   color: ${({theme: {dark}}) => (dark ? White : Action)};
   font-size: 12px;
   font-weight: 400;
   min-width: 70px;
+  flex-shrink: 1;
 `;
 
 export const SearchFilterIconContainer = styled.View`
@@ -462,7 +470,7 @@ const SearchComponent = <T extends SearchableItem>({
             style={
               selectedChainFilterOption && currencyInfo ? {marginLeft: 5} : null
             }>
-            <SearchFilterLabel numberOfLines={1} ellipsizeMode="tail">
+            <SearchFilterLabel numberOfLines={2} ellipsizeMode="tail">
               {selectedChainFilterOption && currencyInfo
                 ? currencyInfo.name
                 : t('All Networks')}

diff --git a/src/components/charts/ChartAxisLabel.tsx b/src/components/charts/ChartAxisLabel.tsx
@@ -197,6 +197,9 @@ const ChartAxisLabel = ({
           });
         }}>
         <AnimatedBaseText
+          // The chart's axis geometry and the label width estimate above are
+          // both hardcoded to this size, so the annotation does not scale.
+          allowFontScaling={false}
           style={[
             {
               color: labelColor,

diff --git a/src/components/charts/TimeframeSelector.tsx b/src/components/charts/TimeframeSelector.tsx
@@ -34,6 +34,8 @@ const TimeframeContainer = styled.View<{$horizontalInset?: string}>`
 
 const TimeframeRow = styled.View`
   flex-direction: row;
+  flex-wrap: wrap;
+  row-gap: 8px;
   justify-content: space-between;
   align-self: center;
   width: 100%;
@@ -44,7 +46,7 @@ const TimeframeHitSlop = {top: 10, bottom: 10, left: 10, right: 10} as const;
 type TimeframeSelectorStyledProps = {$active: boolean};
 
 const TimeframePill = styled(TouchableOpacity)<TimeframeSelectorStyledProps>`
-  height: 34px;
+  min-height: 34px;
   min-width: 44px;
   padding: 0 12px;
   border-radius: 18px;

diff --git a/src/components/custom-tab-bar/CustomTabBar.tsx b/src/components/custom-tab-bar/CustomTabBar.tsx
@@ -11,16 +11,19 @@ import {
   White,
 } from '../../styles/colors';
 import {BaseText} from '../styled/Text';
+import {WIDTH} from '../styled/Containers';
 
 const gutter = 5;
 const tabWidth = 150;
 
 const TabBarContainer = styled.View<{darkMode: boolean; totalWidth: number}>`
   flex-direction: row;
+  align-items: center;
   align-self: center;
   border-radius: 50px;
   width: ${({totalWidth}) => totalWidth}px;
-  height: 56px;
+  max-width: ${WIDTH - gutter * 4}px;
+  min-height: 56px;
   background-color: ${({darkMode}) => (darkMode ? LightBlack : NeutralSlate)};
 `;
 
@@ -34,20 +37,27 @@ const TabButton = styled(TouchableOpacity)<{
   justify-content: center;
   gap: 5px;
   width: ${({tabWidth}) => tabWidth}px;
-  height: 44px;
+  min-height: 44px;
   padding-vertical: 10px;
   border-radius: 50px;
   margin: ${gutter}px;
   position: relative;
   background-color: ${({isFocused}) => (isFocused ? Action : 'transparent')};
 `;
 
-const TabLabel = styled(BaseText)<{isFocused: boolean}>`
+// The pill is a fixed-width control, so the label is capped rather than left to
+// scale past the width it can occupy.
+const TabLabel = styled(BaseText).attrs(() => ({
+  numberOfLines: 2,
+  maxFontSizeMultiplier: 1.6,
+}))<{isFocused: boolean}>`
   color: ${({theme: {dark}, isFocused}) =>
     dark ? NeutralSlate : isFocused ? NeutralSlate : SlateDark};
   font-size: 16px;
   text-transform: none;
   font-weight: 500;
+  flex-shrink: 1;
+  text-align: center;
 `;
 
 const IconContainer = styled.View`

diff --git a/src/components/form/BoxInput.tsx b/src/components/form/BoxInput.tsx
@@ -89,13 +89,15 @@ const Separator = styled.View`
   border-right-color: ${({theme}) => (theme.dark ? '#45484E' : LightBlue)};
   border-right-width: 1px;
   border-style: solid;
-  height: ${SEPARATOR_HEIGHT}px;
+  align-self: stretch;
+  min-height: ${SEPARATOR_HEIGHT}px;
+  margin: 9px 0;
 `;
 
 const Input = styled(TextInputMask)<InputProps>`
   background-color: transparent;
   color: ${({theme}) => theme.colors.text};
-  height: ${INPUT_HEIGHT}px;
+  min-height: ${INPUT_HEIGHT}px;
   padding: 10px;
   flex: 1 1 auto;
   font-weight: 500;
@@ -133,7 +135,7 @@ export const IconContainer = styled(TouchableOpacity).attrs(() => ({
   activeOpacity: ActiveOpacity,
 }))`
   align-items: center;
-  height: ${INPUT_HEIGHT}px;
+  min-height: ${INPUT_HEIGHT}px;
   min-width: ${INPUT_HEIGHT}px;
   justify-content: center;
 `;

diff --git a/src/components/list/AccountListRow.tsx b/src/components/list/AccountListRow.tsx
@@ -22,6 +22,7 @@ import {SearchableItem} from '../chain-search/ChainSearch';
 import Animated, {FadeIn} from 'react-native-reanimated';
 import {IsSVMChain} from '../../store/wallet/utils/currency';
 import {CurrencyListIcons} from '../../constants/SupportedCurrencyOptions';
+import {useIsLargeFont} from '../../utils/hooks';
 
 const SpinnerContainer = styled.View`
   display: flex;
@@ -31,8 +32,9 @@ const SpinnerContainer = styled.View`
   padding-right: 10px;
 `;
 
-const BalanceColumn = styled(Column)`
-  align-items: flex-end;
+const BalanceColumn = styled(Column)<{stacked?: boolean}>`
+  align-items: ${({stacked}) => (stacked ? 'flex-start' : 'flex-end')};
+  ${({stacked}) => (stacked ? 'align-self: stretch; margin-top: 6px;' : '')}
 `;
 
 const ListContainer = styled(Animated.View)``;
@@ -113,6 +115,7 @@ const AccountListRow = ({
   hideBalance,
 }: Props) => {
   const {t} = useTranslation();
+  const stacked = useIsLargeFont();
   const {
     accountName,
     fiatBalanceFormat,
@@ -152,6 +155,7 @@ const AccountListRow = ({
       <RowContainer
         activeOpacity={ActiveOpacity}
         onPress={onPress}
+        stacked={stacked}
         style={{borderBottomWidth: isLast || !hideIcon ? 0 : 1}}>
         {!hideIcon ? (
           <CurrencyImageContainer>
@@ -180,14 +184,14 @@ const AccountListRow = ({
         ) : null}
         {isMultiNetworkSupported ? (
           <Column>
-            <H5 ellipsizeMode={'tail'} numberOfLines={1}>
+            <H5 ellipsizeMode={'tail'} numberOfLines={stacked ? 2 : 1}>
               {accountName}
             </H5>
           </Column>
         ) : (
           <Column>
             <Row style={{alignItems: 'center'}}>
-              <H5 ellipsizeMode="tail" numberOfLines={1}>
+              <H5 ellipsizeMode="tail" numberOfLines={stacked ? 2 : 1}>
                 {accountName}
               </H5>
             </Row>
@@ -216,9 +220,9 @@ const AccountListRow = ({
         )}
         {isMultiNetworkSupported ? (
           fiatBalanceFormat && (
-            <BalanceColumn>
+            <BalanceColumn stacked={stacked}>
               {!hideBalance ? (
-                <H5 numberOfLines={1} ellipsizeMode="tail">
+                <H5 numberOfLines={stacked ? 2 : 1} ellipsizeMode="tail">
                   {fiatBalanceFormat}
                 </H5>
               ) : (
@@ -228,14 +232,14 @@ const AccountListRow = ({
           )
         ) : !isScanning ? (
           cryptoBalance && (
-            <BalanceColumn>
+            <BalanceColumn stacked={stacked}>
               {!hideBalance ? (
                 <>
-                  <H5 numberOfLines={1} ellipsizeMode="tail">
+                  <H5 numberOfLines={stacked ? 2 : 1} ellipsizeMode="tail">
                     {cryptoBalance}
                   </H5>
                   {showFiatBalance && (
-                    <ListItemSubText textAlign={'right'}>
+                    <ListItemSubText textAlign={stacked ? 'left' : 'right'}>
                       {network === 'testnet'
                         ? t('Test - No Value')
                         : fiatBalanceFormat}