[Due for payment 2026-04-28] [$250] Onboarding - Checkbox and the padding of Time feature are not aligned with the other features

[nlemma]

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: v9.3.22-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: N/A
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Windows 11 / Chrome
App Component: Other

Action Performed:

1. Open the https://staging.new.expensify.com/
2. Sign up with a new email address
3. Select the intent "Manage my team's expenses" > select any employees
4. Select any "Accounting"
5. Scroll down and find the Time feature

Expected Result:

The checkbox and the padding of the Time feature are aligned with the other features

Actual Result:

The checkbox and the padding of the Time feature are not aligned with the other features

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7082131_1771486345564.bandicam_2026-02-19_14-31-42-310.mp4

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/~022037532932548496458
• Upwork Job ID: 2037532932548496458
• Last Price Increase: 2026-03-27
• Automatic offers:
• samranahm | Contributor | 110970683

[samranahm]

Unable to reproduce.

[PURUSHOTHAM-REDDY-N]

Proposal

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

Onboarding - Checkbox and the padding of Time feature are not aligned with the other features

What is the root cause of that problem?

The root cause is the manual pixel calculation used to determine the maxWidth of items here

App/src/pages/OnboardingInterestedFeatures/BaseOnboardingInterestedFeatures.tsx

Lines 317 to 327 in 096d945

	<PressableWithoutFeedback
	key={item.id}
	onPress={() => {
	handleFeatureSelect(item.id);
	}}
	accessibilityLabel={item.title}
	accessible={false}
	hoverStyle={!isSelected ? styles.hoveredComponentBG : undefined}
	style={[styles.onboardingInterestedFeaturesItem, isSmallScreenWidth ? styles.flexBasis100 : {maxWidth: (width - gap) / 2}, isSelected && styles.activeComponentBG]}
	sentryLabel={CONST.SENTRY_LABEL.ONBOARDING.INTERESTED_FEATURES_ITEM}
	>

The current logic uses (width - gap) / 2 where width is derived from onLayout. On Windows, the onLayout width includes the scrollbar gutter (typically 15px-17px). Because the calculation doesn't account for this "lost" space, the calculated maxWidth for two items exceeds the actual available content area.

Layout When ScrollBar is present

Layout When ScrollBar is absent

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

Instead of using manual JavaScript math to calculate item widths, we should leverage CSS Grid. Grid is natively scrollbar-aware; when defining fractional columns (1fr), the browser automatically calculates the width based on the actual available space after the scrollbar is rendered.
Remove the width state and the onLayout listener from the ScrollView.

App/src/pages/OnboardingInterestedFeatures/BaseOnboardingInterestedFeatures.tsx

Lines 385 to 388 in 0fdd406

	<ScrollView
	onLayout={(e) => {
	setWidth(e.nativeEvent.layout.width);
	}}

App/src/pages/OnboardingInterestedFeatures/BaseOnboardingInterestedFeatures.tsx

Line 62 in 0fdd406

const [width, setWidth] = useState(0);

Update the childrenStyles of the Section component to use a grid layout:

  <Section
                key={section.titleTranslationKey}
                containerStyles={[styles.p0, styles.mh0, styles.bgTransparent, styles.noBorderRadius]}
                childrenStyles={[styles.dGrid, {gridTemplateColumns: isSmallScreenWidth ? '1fr' : '1fr 1fr'}, styles.gap3]}
                renderTitle={() => <Text style={[styles.mutedNormalTextLabel, styles.mb3]}>{translate(section.titleTranslationKey as TranslationPaths)}</Text>}
                subtitleMuted
            >
                {section.items.map(renderItem)}
            </Section>

What alternative solutions did you explore? (Optional)

1. Manual Buffer: Subtracting a hardcoded 20px buffer from the width calculation (width - gap - 20) / 2. This works but is "hacky" and leaves unnecessary empty space on platforms with overlay scrollbars (Mac/iOS).
2. Percentage Flex: Using flexBasis: '49%'. This is safer than pixels but can still lead to alignment issues on different screen sizes or high-DPI monitors where rounding errors occur.
3. Global Scrollbar Styling: Forcing scrollbar-gutter: stable globally. While this solves the layout shift, it is a larger change that affects the entire app; the Grid solution solves the issue locally and more robustly.

[melvin-bot]

📣 @PURUSHOTHAM-REDDY-N! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[PURUSHOTHAM-REDDY-N]

Contributor details
Your Expensify account email: purupowerman@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/purushothamr3

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[PURUSHOTHAM-REDDY-N]

@samranahm
i'm able to reproduce it

Screen.Recording.2026-02-19.at.5.58.17.PM.mp4

[melvin-bot]

Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[samranahm]

Proposal

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

Onboarding - Checkbox and the padding of Time feature are not aligned with the other features

What is the root cause of that problem?

We have 2 columns and 6 rows (5 rows of 2 items and one last row with 1 item) and each item is uses onboardingInterestedFeaturesItem that has flexGrow: 1.

So the rows with 2 items share the row, and each item stays about half width. The last row has only Time, with flexGrow: 1. When user enable enable "Show scrool bar > always" App add a vertical scrool bar on right that push the items to left. Since that single last item has enough leftover sapce in row because there's only one item that item does not get pushed to left and looked misaligned.

This happen because here

When the ScrollView laid out, we read its width (e.g. 576) and stored it in state with setWidth(e.nativeEvent.layout.width)

We used that width to set a fixed pixel width per item: maxWidth: (width - gap) / 2

App/src/pages/OnboardingInterestedFeatures/BaseOnboardingInterestedFeatures.tsx

Line 325 in 29d092b

style={[styles.onboardingInterestedFeaturesItem, isSmallScreenWidth ? styles.flexBasis100 : {maxWidth: (width - gap) / 2}, isSelected && styles.activeComponentBG]}

So each item is “half the container minus half the gap” in pixels (e.g. 282px).

The scrollbar shrinks the container width, but since onLayout doesn't re-trigger, the fixed pixel measurement becomes outdated.

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

We should remove the fixed pixel width measurements and use the percentage:
flexBasis: '48.5%', maxWidth: '48.5%'
So each item is always “a bit less than half” of the current container width.

The percentage is relative to the container. When the scrollbar shrinks the container, fixed percentage will recalculated for that new width, so each item fit in row perfectly.

style={[
    styles.onboardingInterestedFeaturesItem,
    isSmallScreenWidth ? styles.flexBasis100 : {flexBasis: '48.5%', maxWidth: '48.5%'},
    isSelected && styles.activeComponentBG,
]}

here

App/src/pages/OnboardingInterestedFeatures/BaseOnboardingInterestedFeatures.tsx

Line 325 in 29d092b

style={[styles.onboardingInterestedFeaturesItem, isSmallScreenWidth ? styles.flexBasis100 : {maxWidth: (width - gap) / 2}, isSelected && styles.activeComponentBG]}

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.