Skip to content

[CP Staging] Fix "Show history" button display #88066

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
Julesssss merged 2 commits into from
Apr 16, 2026
Merged

[CP Staging] Fix "Show history" button display #88066

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
41396ba
Fix "Show history" button display
VickyStash Apr 16, 2026
798563c
Merge branch 'main' into VickyStash/bugfix/85114-fix-button-overlap
VickyStash Apr 16, 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
30 changes: 15 additions & 15 deletions src/pages/inbox/report/ReportActionsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -688,21 +688,6 @@ function ReportActionsList({

return (
<>
{showPreviousMessagesButton && (
<View style={[styles.flexRow, styles.alignItemsCenter, styles.pv3, styles.mh5]}>
<View style={[styles.threadDividerLine, styles.ml0, styles.mr0, styles.flexGrow1]} />
<View>
<Button
small
shouldShowRightIcon
iconRight={expensifyIcons.UpArrow}
text={translate('common.concierge.showHistory')}
onPress={onShowPreviousMessages}
/>
</View>
<View style={[styles.threadDividerLine, styles.ml0, styles.mr0, styles.flexGrow1]} />
</View>
)}
Comment on lines -691 to -705

@situchan situchan Apr 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@MelvinBot this was rendered before ReportActionsListItemRenderer long time ago. Can you find out the PR which added this logic?
Btw why did the bug happen only after migration (FlatList > FlashList)?

@MelvinBot MelvinBot Apr 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR that added this logic: #81807 ("Hide the chat history when Concierge is opened up in the right hand pane"), merged 2026-03-11. It introduced the entire "Show history" button feature and placed the button JSX before ReportActionsListItemRenderer in renderItem.

Why the bug only appeared after the FlashList migration:

FlashList's CellRendererComponent (src/components/FlashList/InvertedFlashList/CellRendererComponent.tsx) applies zIndex: -props.index to each cell wrapper. In the inverted list, the CREATED action (welcome header + avatar) has the highest index → most negative zIndex → renders behind adjacent cells. The "Show history" button, being part of that same cell, inherited the low zIndex and was painted behind neighboring cells' backgrounds.

FlatList had no per-cell zIndex styling, so all cells sat on the same visual layer and the rendering order within a cell didn't affect visibility. The FlashList migration (#85114, merged 2026-04-15) introduced per-cell z-stacking, immediately surfacing the latent issue.

<ReportActionsListItemRenderer
reportAction={reportAction}
parentReportAction={parentReportAction}
Expand Down Expand Up @@ -730,6 +715,21 @@ function ReportActionsList({
reportNameValuePairsOrigin={reportNameValuePairs?.origin}
reportNameValuePairsOriginalID={reportNameValuePairs?.originalID}
/>
{showPreviousMessagesButton && (
<View style={[styles.flexRow, styles.alignItemsCenter, styles.pv3, styles.mh5]}>
<View style={[styles.threadDividerLine, styles.ml0, styles.mr0, styles.flexGrow1]} />
<View>
<Button
small
shouldShowRightIcon
iconRight={expensifyIcons.UpArrow}
text={translate('common.concierge.showHistory')}
onPress={onShowPreviousMessages}
/>
</View>
<View style={[styles.threadDividerLine, styles.ml0, styles.mr0, styles.flexGrow1]} />
</View>
)}
</>
);
},
Expand Down
Loading