[Due for payment 2026-04-28] [$250] Expense rules - 'g' and 'y' are cut off on the rule row

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.3.53-5
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #86743
Email or phone of affected tester (no customers): jsdjosidjiojisojio3@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.2 / Chrome
App Component: Workspace Settings

Action Performed:

Precondition:

• Enable Rules in More features.

1. Go to staging.new.expensify.com
2. Go to workspace settings > Rules
3. Click Add merchant rule.
4. Create a merchant rule that changes merchant to anything when merchant is gy.

Expected Result:

'g' and 'y' will not cut off on the rule row (similar issue was fixed #84187)

Actual Result:

'g' and 'y' are cut off on the rule row.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @mallenexpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022041555165238675505
• Upwork Job ID: 2041555165238675505
• Last Price Increase: 2026-04-07

[MelvinBot]

Proposal

What is the root cause of that problem?

The descriptionTextStyle on the merchant rule MenuItemWithTopDescription at MerchantRulesSection.tsx:171 uses styles.textNormalThemeText, which sets fontSize: 15 but provides no lineHeight (index.ts:535-538).

Without an explicit lineHeight, MenuItem applies its default of 16px (styles.textLineHeightNormal). Combined with numberOfLines={2} (which uses -webkit-line-clamp + overflow: hidden), a 16/15 = 1.067 line-height ratio is too tight — descender strokes on 'g', 'y', 'p', 'q', 'j' on the last visible line get clipped.

The prior fix in #84187 used textSupportingNormal (which includes lineHeight: 20), but a subsequent refactor switched to textNormalThemeText and lost the lineHeight.

What changes do you think we should make in order to solve the problem?

Add styles.lh20 to the descriptionTextStyle array in MerchantRulesSection.tsx:171:

descriptionTextStyle={[styles.textNormalThemeText, styles.lh20]}

This sets lineHeight: 20 (matching fontSizeNormalHeight, the proper line height for fontSizeNormal 15px), giving a 1.33 ratio that accommodates descenders.

What alternative solutions did you explore? (Optional)

Could switch back to textSupportingNormal and override the color ([styles.textSupportingNormal, {color: theme.text}]), but adding lh20 is simpler and more targeted — it fixes only the missing property without changing the color approach.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @abzokhattab (External)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022041555165238675505

[abzokhattab]

@MelvinBot implement this

[MelvinBot]

🤖 Cannot proceed: abzokhattab does not have write access to the target repository (Expensify/App). MelvinBot will not create branches or PRs on repos that the requesting user cannot access themselves.

[wildan-m]

Proposal

Please re-state the problem that we are trying to solve in this issue.

In workspace Rules, merchant rule rows clip descender characters ('g', 'y', 'p', 'q', 'j') on the description text. This is a regression from a prior fix in #84187.

What is the root cause of that problem?

The descriptionTextStyle on the merchant rule MenuItemWithTopDescription uses styles.textNormalThemeText, which sets fontSize: 15 but provides no lineHeight:

App/src/styles/index.ts

Lines 535 to 538 in 8e1cdd8

	textNormalThemeText: {
	color: theme.text,
	fontSize: variables.fontSizeNormal,
	},

Inside MenuItem, when a title prop is present, the description defaults to styles.textLineHeightNormal which is lineHeight: 16:

App/src/components/MenuItem.tsx

Lines 650 to 657 in 8e1cdd8

	const descriptionTextStyles = StyleUtils.combineStyles<TextStyle>([
	styles.textLabelSupporting,
	styles.flex1,
	title ? {} : StyleUtils.getFontSizeStyle(variables.fontSizeNormal),
	title ? styles.textLineHeightNormal : StyleUtils.getLineHeightStyle(variables.fontSizeNormalHeight),
	!descriptionAddon && icon && !Array.isArray(icon) ? styles.ml3 : {},
	descriptionAddon ? styles.ml2 : {},
	(descriptionTextStyle as TextStyle) || styles.breakWord,

The custom descriptionTextStyle (textNormalThemeText) does not override this default because it contains no lineHeight. So the effective style is fontSize: 15 with lineHeight: 16 — a ratio of only 1.067. Combined with numberOfLinesDescription defaulting to 2 (which applies -webkit-line-clamp + overflow: hidden), descender strokes on characters like 'g' and 'y' on the last visible line get clipped.

App/src/pages/workspace/rules/MerchantRulesSection.tsx

Lines 167 to 172 in 8e1cdd8

	<MenuItemWithTopDescription
	description={matchDescription}
	title={ruleDescription}
	wrapperStyle={[styles.borderedContentCard, styles.ph4, styles.pv4]}
	descriptionTextStyle={[styles.textNormalThemeText]}
	titleStyle={[styles.textLabelSupporting, styles.fontSizeLabel]}

What changes do you think we should make in order to solve the problem?

Add styles.lh20 to the descriptionTextStyle array in MerchantRulesSection.tsx at line 171, changing it from [styles.textNormalThemeText] to [styles.textNormalThemeText, styles.lh20]. This sets lineHeight: 20, which matches fontSizeNormalHeight — the proper line height for fontSize: 15. The 1.33 ratio provides adequate space for descender characters without changing the overall layout.

This follows the same pattern already used in ApprovalWorkflowSection.tsx, which similarly overrides the default line height when using textNormalThemeText as descriptionTextStyle:

App/src/components/ApprovalWorkflowSection.tsx

Line 78 in 8e1cdd8

descriptionTextStyle={[styles.textNormalThemeText, styles.lineHeightXLarge]}

Compare branch: https://github.com/Expensify/App/compare/main...wildan-m:App:wildan/87270-merchant-rule-descender-clipping?expand=1

What alternative solutions did you explore? (Optional)

Considered changing the default lineHeight in MenuItem.tsx (line 654) from textLineHeightNormal (16px) to fontSizeNormalHeight (20px) when a title is present. This would fix the root cause globally, but changing the default for all MenuItem instances with titles has a much larger blast radius and could affect spacing across the entire app. The targeted fix at the call site is safer and consistent with the established pattern.

[wildan-m]

Proposal

Updated

Added compare branch with implementation.

[abzokhattab]

@MelvinBot implement #87270 (comment) , I'm C+ on this issue and you just mentioned this

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot to refine this analysis, or explain why you are rejecting Melvin's proposal.