[HOLD for payment 2025-01-18] [$250] Chat - Title with /Inbox and /Reports is not aligned properly with minimum font size

@Christinadobrzyn

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.0.77-5
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

Precondition: Change device font size to the minimum

Launch New Expensify hybrid app
Note that "/ Inbox" is not on the same line as Expensify logo
Tap Reports from the bottom
4, Note that "/ Reports" is not on the same line as Expensify logo

Expected Result:

Title with /Inbox and /Reports is aligned properly with minimum font size

Actual Result:

Title with /Inbox and /Reports is not aligned properly with minimum font size

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

Screenshots/Videos

Add any screenshot/video evidence

Bug6699986_1734713614737.Small_font.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021871238682251398188
Upwork Job ID: 1871238682251398188
Last Price Increase: 2024-12-30

Issue Owner

Current Issue Owner: @Christinadobrzyn

@Christinadobrzyn

Triggered auto assignment to @Christinadobrzyn (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

Hum, I'm not sure if we're fixing this somewhere/sometime else.

@Expensify/design do you have any input on fixing this now or waiting until a big overhaul of all of this?

Proposal

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

The topbar breadcrumb title is not aligned properly with the Expensify logo

What is the root cause of that problem?

This was supposed to be handled in #36655, but looks like it's not covering the small font size correctly. We already resize the logo when the font size is reduced.

App/src/components/Breadcrumbs.tsx

Lines 40 to 53 in 006a1df

    
           const fontScale = PixelRatio.getFontScale() > CONST.LOGO_MAX_SCALE ? CONST.LOGO_MAX_SCALE : PixelRatio.getFontScale(); 
        
           return ( 
        
               <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1, styles.w100, styles.breadcrumsContainer, style]}> 
        
                   {isRootBreadcrumb ? ( 
        
                       <View style={styles.breadcrumbLogo}> 
        
                           <Header 
        
                               title={ 
        
                                   <ImageSVG 
        
                                       contentFit="contain" 
        
                                       src={LogoComponent} 
        
                                       fill={theme.text} 
        
                                       width={variables.lhnLogoWidth * fontScale} 
        
                                       height={variables.lhnLogoHeight * fontScale} 
        
                                   />

The problem is, the / Inbox text is vertically center alligned, while the logo itself take the full height.

It's because we set a flex1 style here.

App/src/components/Header.tsx

Lines 67 to 78 in 006a1df

    
           <View style={[styles.flex1, styles.flexRow, containerStyles]}> 
        
               <View style={styles.mw100}> 
        
                   {typeof title === 'string' 
        
                       ? !!title && ( 
        
                             <Text 
        
                                 numberOfLines={2} 
        
                                 style={[styles.headerText, styles.textLarge, textStyles]} 
        
                             > 
        
                                 {title} 
        
                             </Text> 
        
                         ) 
        
                       : title}

And since the Header parent doesn't have a flex style, the default flex direction is column which will take all available height when flex is 1.

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

We need to center the logo too by passing a style of {justifyContent: 'center'} to the inner View here from the Breadcrumbs (this means we will have a new prop).

App/src/components/Header.tsx

Lines 67 to 68 in 006a1df

    
           <View style={[styles.flex1, styles.flexRow, containerStyles]}> 
        
               <View style={styles.mw100}>

Result:

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

Auto-assign attempt failed, all eligible assignees are OOO.

Adding the design label to see if we can get thoughts on fixing this somewhere else.

@akinwale

I think let's just move forward with fixing this unless you think we should do otherwise @akinwale

Reviewing label has been removed, please complete the "BugZero Checklist".

@akinwale

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.83-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

Fix breadcrumb logo isn't vertically center aligned when font size is small #54855

If no regressions arise, payment will be issued on 2025-01-18. 🎊

For reference, here are some details about the assignees on this issue:

@akinwale requires payment through NewDot Manual Requests
@bernhardoj requires payment through NewDot Manual Requests

@akinwale

@akinwale @Christinadobrzyn @akinwale The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

@akinwale

@akinwale do we need a regression test for this? TY!

@akinwale

BugZero Checklist:

[@akinwale] Classify the bug:

Bug classification

Source of bug:

1a. Result of the original design (eg. a case wasn't considered)
1b. Mistake during implementation
1c. Backend bug
1z. Other:

Where bug was reported:

2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
2b. Reported on staging (eg. found during regression or PR testing)
2d. Reported on a PR
2z. Other:

Who reported the bug:

[@akinwale] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

Link to comment: N/A
[@akinwale] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

Link to discussion: N/A
[@akinwale] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.
[BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

Link to issue: https://github.com/Expensify/Expensify/issues/462435

Regression Test Proposal

Precondition:

On iOS and Android, font size reduced to the smallest option in device settings

Test:

Launch Expensify.
Navigate to or open the LHN.
Verify that the Expensify logo is vertically centre aligned.

Do we agree 👍 or 👎?

@akinwale

Payment Summary

Upwork Job

Reviewer: @akinwale owed $250 via NewDot
Reviewer: @bernhardoj owed $250 via NewDot

BugZero Checklist (@Christinadobrzyn)

I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1871238682251398188/hired)
I have paid out the Upwork contracts or cancelled the ones that are incorrect
I have verified the payment summary above is correct

@akinwale

payment day! Payment summary here - #54426 (comment)

Please make sure to submit a payment request in ND @akinwale and @bernhardoj!

Thanks for all your help!

Requested in ND.

@akinwale

$250 approved for @akinwale

@bernhardoj

$250 approved for @bernhardoj

Navigation Menu

Repository navigation

[HOLD for payment 2025-01-18] [$250] Chat - Title with /Inbox and /Reports is not aligned properly with minimum font size #54426

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

40 remaining items

BugZero Checklist:

Regression Test Proposal

Precondition:

Test:

Payment Summary

BugZero Checklist (@Christinadobrzyn)

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const fontScale = PixelRatio.getFontScale() > CONST.LOGO_MAX_SCALE ? CONST.LOGO_MAX_SCALE : PixelRatio.getFontScale();
	return (
	<View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1, styles.w100, styles.breadcrumsContainer, style]}>
	{isRootBreadcrumb ? (
	<View style={styles.breadcrumbLogo}>
	<Header
	title={
	<ImageSVG
	contentFit="contain"
	src={LogoComponent}
	fill={theme.text}
	width={variables.lhnLogoWidth * fontScale}
	height={variables.lhnLogoHeight * fontScale}
	/>

	<View style={[styles.flex1, styles.flexRow, containerStyles]}>
	<View style={styles.mw100}>
	{typeof title === 'string'
	? !!title && (
	<Text
	numberOfLines={2}
	style={[styles.headerText, styles.textLarge, textStyles]}
	>
	{title}
	</Text>
	)
	: title}

[HOLD for payment 2025-01-18] [$250] Chat - Title with /Inbox and /Reports is not aligned properly with minimum font size #54426

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Dec 20, 2024

Christinadobrzyn commented on Dec 20, 2024

bernhardoj commented on Dec 21, 2024

Proposal

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

What is the root cause of that problem?

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

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

melvin-bot commented on Dec 23, 2024

Christinadobrzyn commented on Dec 23, 2024

Christinadobrzyn commented on Dec 23, 2024

40 remaining items

melvin-bot commented on Jan 11, 2025

melvin-bot commented on Jan 11, 2025

melvin-bot commented on Jan 11, 2025

Christinadobrzyn commented on Jan 16, 2025

akinwale commented on Jan 18, 2025

BugZero Checklist:

Regression Test Proposal

Precondition:

Test:

melvin-bot commented on Jan 18, 2025

Payment Summary

BugZero Checklist (@Christinadobrzyn)

Christinadobrzyn commented on Jan 18, 2025

bernhardoj commented on Jan 19, 2025

JmillsExpensify commented on Jan 21, 2025

JmillsExpensify commented on Jan 22, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions