Skip to content

fix no unreported expenses page doesn't fit on landscape and doesn't scroll in Reports #87575

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mjasikowski merged 3 commits into from
Apr 13, 2026
Merged

fix no unreported expenses page doesn't fit on landscape and doesn't scroll in Reports #87575

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7fa8b43
fix: add scrollview and overwrite minHeight inside EmptyStateComponen…
jakubstec Apr 10, 2026
7d00da1
remove unneccesary props, ensure minHeight is only set for landscape …
jakubstec Apr 10, 2026
985e3ae
use useIsInLandscapeMode hook
jakubstec Apr 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 33 additions & 28 deletions src/pages/AddUnreportedExpense.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,13 @@ import AddUnreportedExpenseFooter from '@components/AddUnreportedExpenseFooter';
import EmptyStateComponent from '@components/EmptyStateComponent';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import ScreenWrapper from '@components/ScreenWrapper';
import ScrollView from '@components/ScrollView';
import SelectionList from '@components/SelectionList';
import type {ListItem, SelectionListHandle} from '@components/SelectionList/types';
import UnreportedExpensesSkeleton from '@components/Skeletons/UnreportedExpensesSkeleton';
import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
import useDebouncedState from '@hooks/useDebouncedState';
import useIsInLandscapeMode from '@hooks/useIsInLandscapeMode';
import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
Expand Down Expand Up @@ -62,7 +64,7 @@ function AddUnreportedExpense({route}: AddUnreportedExpensePageType) {
const [userBillingGracePeriodEnds] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END);
const shouldShowUnreportedTransactionsSkeletons = isLoadingUnreportedTransactions && hasMoreUnreportedTransactionsResults && !isOffline;
const [draftTransactionIDs] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_DRAFT, {selector: validTransactionDraftIDsSelector});

const isInLandscapeMode = useIsInLandscapeMode();
const initialSkeletonReasonAttributes: SkeletonSpanReasonAttributes = {
context: 'AddUnreportedExpense.InitialSkeleton',
isLoadingUnreportedTransactions,
Expand Down Expand Up @@ -284,34 +286,37 @@ function AddUnreportedExpense({route}: AddUnreportedExpensePageType) {
title={translate('iou.addUnreportedExpense')}
onBackButtonPress={Navigation.goBack}
/>
<EmptyStateComponent
cardStyles={[styles.appBG]}
cardContentStyles={[styles.pb0]}
headerMedia={illustrations.FolderWithPapersAndWatch}
title={translate('iou.emptyStateUnreportedExpenseTitle')}
subtitle={translate('iou.emptyStateUnreportedExpenseSubtitle')}
headerStyles={[styles.emptyStateMoneyRequestReport]}
headerContentStyles={[styles.emptyStateFolderStaticIllustration]}
buttons={[
{
buttonText: translate('iou.createExpense'),
buttonAction: () => {
if (
report &&
report.policyID &&
shouldRestrictUserBillableActions(report.policyID, ownerBillingGracePeriodEnd, userBillingGracePeriodEnds, undefined, policy)
) {
Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(report.policyID));
return;
}
interceptAnonymousUser(() => {
startMoneyRequest(CONST.IOU.TYPE.SUBMIT, reportID, draftTransactionIDs, undefined, false, backToReport);
});
<ScrollView contentContainerStyle={[styles.flexGrow1]}>
<EmptyStateComponent
minModalHeight={isInLandscapeMode ? 0 : undefined}
cardStyles={[styles.appBG]}
cardContentStyles={[styles.pb0]}
headerMedia={illustrations.FolderWithPapersAndWatch}
title={translate('iou.emptyStateUnreportedExpenseTitle')}
subtitle={translate('iou.emptyStateUnreportedExpenseSubtitle')}
headerStyles={[styles.emptyStateMoneyRequestReport]}
headerContentStyles={[styles.emptyStateFolderStaticIllustration]}
buttons={[
{
buttonText: translate('iou.createExpense'),
buttonAction: () => {
if (
report &&
report.policyID &&
shouldRestrictUserBillableActions(report.policyID, ownerBillingGracePeriodEnd, userBillingGracePeriodEnds, undefined, policy)
) {
Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(report.policyID));
return;
}
interceptAnonymousUser(() => {
startMoneyRequest(CONST.IOU.TYPE.SUBMIT, reportID, draftTransactionIDs, undefined, false, backToReport);
});
},
success: true,
},
success: true,
},
]}
/>
]}
/>
</ScrollView>
</ScreenWrapper>
);
}
Expand Down
Loading