Home - Error state icon in Spend over time chart is cut off

[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.44-0
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #85417
Email or phone of affected tester (no customers): snodijosdnjoijiosnj@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Samsung Galaxy S25 FE / Android 16
App Component: Other

Action Performed:

Precondition:

• Have at least an expense in workspace chat.

1. Launch Expensify app.
2. Go to Inbox.
3. Go offline.
4. Go to Home.

Expected Result:

Error state icon in Spend over time chart will not be cut off.

Actual Result:

Error state icon in Spend over time chart is cut off.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7113050_1774457182216.Screen_Recording_20260326_004431_Expensify.mp4

View all open jobs on GitHub

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #85417

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[OSBotify]

Investigation Summary

Classification: Frontend bug
Causing PR: #85417 - "Create SpendOverTime widget for the Home page" by @mhawryluk (High confidence)
Related Issues: None

Recommendation: REVERT

The SpendOverTime widget was just added to the Home page in PR #85417. The error state rendering has a layout issue where the error icon is cut off due to container overflow constraints. Since this is a new feature that does not exist in production, reverting the PR will cleanly remove the broken feature without impacting existing functionality.

Labels: Keeping DeployBlockerCash (Frontend bug - blocks App deploy)

Detailed Analysis

Evidence

PR #85417 introduced the new SpendOverTime widget to the Home page. The issue was reported immediately after this PR merged and is only reproducible on staging (where the new feature exists), not production (where it does not exist).

The error occurs specifically in the error state of the widget, which shows when the network request fails.

Verification

The PR modifies the following key files related to this issue:

• src/pages/home/SpendOverTimeSection/SpendOverTimeSectionContent.tsx (new file) - contains the error state rendering
• src/components/WidgetContainer.tsx - the container component
• src/styles/index.ts - widget container styles

The error state is rendered at lines 67-78 of SpendOverTimeSectionContent.tsx:

{shouldShowErrorIndicator && (
    <BlockingView
        icon={illustrations.BrokenMagnifyingGlass}
        iconHeight={variables.iconSizeMegaLarge}  // 105px
        title={translate("errorPage.title", {
            isBreakLine: shouldUseNarrowLayout,
        })}
        titleStyles={[styles.mt0, styles.mb2]}
        subtitle={translate("errorPage.subtitle")}
        subtitleStyle={styles.textSupporting}
        containerStyle={[{minHeight: CHART_CONTENT_MIN_HEIGHT}, styles.gap5]}
    />
)}

Root Cause

The WidgetContainer component has overflow: "hidden" set in its styles (src/styles/index.ts line 3720). When the error state BlockingView is rendered inside this container, the large icon (105px from iconSizeMegaLarge) gets cut off because the container constraints and padding do not accommodate the full icon height properly.

The widget container styling does not provide sufficient space for the BlockingView error state with its large icon to render without clipping.