[Due for payment 2026-10-27] Per diem - Scroll bar is hidden when scrolled down to table header

@Krishna2323

If you haven’t already, check out our contributing guidelines for onboarding. To join our Slack channel, fill out this form.

Version Number: 9.5.5-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: #102064
Email or phone of affected tester (no customers): applausetester+khcategory19@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.5 / Chrome
App Component: Workspace Settings

Action Performed:

Precondition:

Workspace has many per diem rates.

Go to staging.new.expensify.com
Go to workspace settings > Per diem.
Scoll down the list.

Expected Result:

Scroll bar will always be visible.

Actual Result:

Scroll bar is visible in the beginning, then it is hidden and becomes visible again.

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug7280544_1791407008577.10.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Rizky Gunawan
Bug ID: 7280544

Issue Owner

Current Issue Owner: @Krishna2323

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/615ad962bf8dfd2a89effabdd71173fdae914f84806ccf9b0f36f81bf14f434d

https://platform.applause.com/services/links/v1/external/78b6bf2c774ae86911d46d27f31a01689f7e7c7bc6bf41d951ba234219c6c763

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

@situchan

@situchan @JS00001 you have been assigned to this deploy blocker because you reviewed the offending PR: #102064

@Krishna2323

@Krishna2323 you have been assigned to this deploy blocker because you authored the offending PR: #102064

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

👋 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:

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

Deploy Blocker Investigation

Causing PR: Show scroll bars on workspace table pages (high confidence). The sticky column header is drawn over macOS's floating scroll bar.

Recommendation: Merge a targeted fix, or demote the blocker. Revert only if a fix can't land in time.

This isn't a regression against production. Before this PR, the table hid its scroll bar entirely, so production per diem has no scroll bar at all.
A revert would also remove the new scroll bars on the Inbox list, Account Settings, the Search sidebar and the workspace menu.

Root cause: The PR moves the sticky header off the scroll bar only when the scroll bar takes up width (TableBody.tsx:415-419). macOS's default floating scroll bars take up no width, so scrollbarWidth is 0 (useVerticalScrollbarWidth/index.ts:31). The header then spans the full width with a solid background (TableHeader.tsx:224) and covers the scroll bar.

Fix options:

Preferred: on wide web layouts, keep the column header inside the scrolling element with CSS position: sticky. The table already does this when columns overflow sideways (shouldRenderColumnHeaderInListHeader). The browser always draws the scroll bar above content inside the scrolling element.
Smaller fix: on web, stop the sticky header's background a few pixels short of the right edge even when scrollbarWidth === 0.

Investigation details

The PR removed showsVerticalScrollIndicator={false} from the shared table FlashList. That's why the per diem table (WorkspacePerDiemTable) has a scroll bar on staging at all.
FlashList draws the stuck header as an absolutely positioned layer (zIndex: 2, left: 0, right: 0) next to the scrolling element, not inside it. The PR's own comment at TableBody.tsx:413-414 says this.
Why the bar disappears and then comes back: the scroll bar shows until the header sticks. Once it sticks, the thumb is still near the top of the track, under the roughly 40px header, so it's hidden. With many rates the thumb is small and moves slowly, so it reappears once it moves below the header.
Why testing missed it: the PR's test steps set macOS scroll bars to "Always". In that mode the scroll bar takes up width and the padding applies. The default floating mode wasn't tested with the sticky header.
Other candidates: I checked every PR in the 9.5.5-0 checklist. Tighten mobile gutters and card padding through spacing tokens touches TableHeader.tsx, but only spacing. It can't cause this.
Likely scope: this is the shared table code, so other wide workspace tables with content above the column header (Members, Categories, Tags, Taxes) probably behave the same way. I didn't check those pages.

Next Steps: Reply with @MelvinBot <your feedback> to refine this analysis.

@situchan

@situchan PR is ready for review: #103938

I am not able to reproduce

main:

not.repro.mov

staging:

staging.mov

@Krishna2323

@Krishna2323 / @situchan

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

Keep the table column header inside the scroller on web #103938

If no regressions arise, payment will be issued on 2026-10-27. 🎊

The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the Contributor+ 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]. If no checklist is needed for this issue, you can click: [no checklist button]

@Krishna2323

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

@MelvinBot

@MelvinBot did the root cause exist in production?

No. The root cause wasn't in production before Show scroll bars on workspace table pages. That PR added it, so this is a regression from that PR.

Before that PR, the shared table's FlashList set showsVerticalScrollIndicator={false} (TableBody.tsx:459). Production per diem had no scroll bar for the sticky header to cover. The PR removed that prop. It also added the padding that applies only when scrollbarWidth > 0, which misses macOS floating scroll bars.

Deploy timeline

2026-10-07: the PR went to staging in 9.5.5-0. The bug was reported there.
2026-10-08: the blocker wasn't reverted, so the bug reached production in 9.5.5-2.
2026-10-20: Keep the table column header inside the scroller on web fixed it in production in 9.5.14-3.

view run

No payment due here

Navigation Menu

Repository navigation

[Due for payment 2026-10-27] Per diem - Scroll bar is hidden when scrolled down to table header #103427

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Deploy Blocker Investigation

11 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Due for payment 2026-10-27] Per diem - Scroll bar is hidden when scrolled down to table header #103427

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

applause-bot commented on Oct 8, 2026

melvin-bot commented on Oct 8, 2026

melvin-bot commented on Oct 8, 2026

melvin-bot commented on Oct 8, 2026

melvin-bot commented on Oct 8, 2026

github-actions commented on Oct 8, 2026

MelvinBot commented on Oct 8, 2026

Deploy Blocker Investigation

11 remaining items

Krishna2323 commented on Oct 13, 2026

situchan commented on Oct 16, 2026

melvin-bot commented on Oct 20, 2026

melvin-bot commented on Oct 23, 2026

situchan commented on Oct 25, 2026

MelvinBot commented on Oct 25, 2026

situchan commented on Oct 25, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions