[$250] Reports page - Skeleton rows are getting cut off on the right side and the top fixed table header is not aligned correctly

[izarutskaya]

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.8-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation (hyperlinked to channel name): #expensify_bugs

Action Performed:

Prerequisite: Need account with a lot of reports/expenses

1. Navigate to https://staging.new.expensify.com/
2. Go to the Reports page > Reports > scroll down
3. Go to the Reports page > Expenses > when you have a mouse plugged in check header "Action"

Expected Result:

On step 2 skeleton rows should be aligned correctly.
On step 3 the top fixed table header should be aligned correctly to the table below since the table below has shifted due to the scroll bar.

Actual Result:

On step 2 skeleton rows are getting cut off on the right side.
On step 3 the top fixed table header is not aligned correctly to the table below since the table below has shifted due to the scroll bar.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Screenshots/Videos

Recording.3587.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022015923056486830632
• Upwork Job ID: 2015923056486830632
• Last Price Increase: 2026-02-16

Issue Owner

Current Issue Owner: @rojiphil

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rojiphil (External)

[melvin-bot]

Triggered auto assignment to @sonialiap (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[TaduJR]

🚨 Edited by proposal-police: This proposal was edited at 2026-01-26 12:29:34 UTC.

Proposal

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

On browsers with visible scrollbars (Windows Chrome, macOS Chrome, Linux browsers), the Reports page has two alignment issues:

1. Skeleton loading rows are clipped on the right side during Reports > Reports loading state
2. Fixed table header columns misalign with table body when vertical scrollbar appears in Reports > Expenses

What is the root cause of that problem?

The scrollbar was enabled for accessibility in PR #79998, but layout calculations weren't updated to account for scrollbar width.

Root Cause Flow:

Issue 1 - Skeleton Clipping:

App/src/components/Skeletons/SearchRowSkeleton.tsx

Lines 36 to 40 in 87e6d66

	function SearchRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacityEnabled = false, containerStyle}: SearchRowSkeletonProps) {
	const styles = useThemeStyles();
	const {windowWidth} = useWindowDimensions();
	const {shouldUseNarrowLayout, isLargeScreenWidth} = useResponsiveLayout();
	useSkeletonSpan('SearchRowSkeleton');

Skeleton uses windowWidth from useWindowDimensions():

const {windowWidth} = useWindowDimensions();

App/src/components/Skeletons/SearchRowSkeleton.tsx

Lines 159 to 173 in 87e6d66

	<Rect
	// We have to calculate this value to make sure the element is aligned to the button on the right side.
	transform={[{translateX: windowWidth - leftPaneWidth - rightButtonWidth - gapWidth - centralPanePadding - gapWidth - rightSideElementWidth}, {translateY: 28}]}
	width={80}
	height={barHeight}
	/>
	<Rect
	// We have to calculate this value to make sure the element is aligned to the right border.
	transform={[{translateX: windowWidth - leftPaneWidth - rightSideElementWidth - gapWidth - centralPanePadding}, {translateY: 18}]}
	rx={15}
	ry={15}
	width={80}
	height={28}
	/>

Right-aligned skeleton elements calculate position using full windowWidth:

<Rect
    transform={[{translateX: windowWidth - leftPaneWidth - rightButtonWidth - gapWidth - centralPanePadding - gapWidth - rightSideElementWidth}, {translateY: 28}]}
    width={80}
    height={barHeight}
/>
<Rect
    transform={[{translateX: windowWidth - leftPaneWidth - rightSideElementWidth - gapWidth - centralPanePadding}, {translateY: 18}]}
    rx={15}
    ry={15}
    width={80}
    height={28}
/>

When scrollbar appears (~15-17px), actual container width is windowWidth - leftPaneWidth - scrollbarWidth, causing elements to overflow beyond visible area.

Issue 2 - Header Misalignment:

App/src/components/Search/SearchList/index.tsx

Lines 462 to 514 in 87e6d66

	const content = (
	<View style={[styles.flex1, !isKeyboardShown && safeAreaPaddingBottomStyle, containerStyle]}>
	{tableHeaderVisible && (
	<View style={[styles.searchListHeaderContainerStyle, styles.listTableHeader]}>
	{canSelectMultiple && (
	<Checkbox
	accessibilityLabel={translate('workspace.people.selectAll')}
	isChecked={isSelectAllChecked}
	isIndeterminate={selectedItemsLength > 0 && (selectedItemsLength !== flattenedItemsWithoutPendingDelete.length || !hasLoadedAllTransactions)}
	onPress={() => {
	onAllCheckboxPress();
	}}
	disabled={flattenedItems.length === 0}
	/>
	)}
	{SearchTableHeader}
	{selectAllButtonVisible && (
	<PressableWithFeedback
	style={[styles.userSelectNone, styles.alignItemsCenter]}
	onPress={onAllCheckboxPress}
	accessibilityLabel={translate('workspace.people.selectAll')}
	role="button"
	accessibilityState={{checked: isSelectAllChecked}}
	dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
	>
	<Text style={[styles.textMicroSupporting, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>
	</PressableWithFeedback>
	)}
	</View>
	)}
	<BaseSearchList
	data={data}
	renderItem={renderItem}
	onSelectRow={onSelectRow}
	keyExtractor={keyExtractor}
	onScroll={onScroll}
	showsVerticalScrollIndicator={false}
	ref={listRef}
	columns={columns}
	scrollToIndex={scrollToIndex}
	flattenedItemsLength={flattenedItems.length}
	onEndReached={onEndReached}
	onEndReachedThreshold={onEndReachedThreshold}
	ListFooterComponent={ListFooterComponent}
	onViewableItemsChanged={onViewableItemsChanged}
	onLayout={onLayout}
	contentContainerStyle={contentContainerStyle}
	newTransactions={newTransactions}
	selectedTransactions={selectedTransactions}
	customCardNames={customCardNames}
	/>

Header and FlashList are sibling containers:

<View>
    {tableHeaderVisible && (
        <View style={[styles.searchListHeaderContainerStyle, styles.listTableHeader]}>
            {/* Header - full width */}
        </View>
    )}
    <BaseSearchList /> {/* FlashList - width reduced by scrollbar */}
</View>

App/src/components/Search/SearchList/BaseSearchList/index.tsx

Line 117 in 87e6d66

showsVerticalScrollIndicator

FlashList shows scrollbar:

showsVerticalScrollIndicator

When content overflows, scrollbar takes space from FlashList width, but header remains at full width. Columns misalign.

Why this architecture exists:

App/src/components/Search/SearchList/index.tsx

Lines 530 to 544 in 87e6d66

	if (shouldScrollHorizontally) {
	return (
	<ScrollView
	ref={horizontalScrollViewRef}
	horizontal
	showsHorizontalScrollIndicator
	style={styles.flex1}
	contentContainerStyle={{width: minTableWidth}}
	contentOffset={{x: savedHorizontalScrollOffset, y: 0}}
	onScroll={handleHorizontalScroll}
	scrollEventThrottle={16}
	>
	{content}
	</ScrollView>
	);

When table is wide, both header and list must scroll horizontally together:

if (shouldScrollHorizontally) {
    return (
        <ScrollView horizontal>
            {content} // Both header and list
        </ScrollView>
    );
}

This prevents moving header inside FlashList.

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

Use dynamic layout measurement to detect scrollbar width and adjust both header padding and skeleton positioning.

Solution 1: Measure scrollbar width and adjust header

File: src/components/Search/SearchList/index.tsx

App/src/components/Search/SearchList/index.tsx

Line 8 in 87e6d66

import {View} from 'react-native';

Update imports to include Platform and LayoutChangeEvent:

import {Platform, View} from 'react-native';
import type {LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView as RNScrollView, StyleProp, ViewStyle} from 'react-native';

App/src/components/Search/SearchList/index.tsx

Lines 159 to 189 in 87e6d66

	function SearchList({
	data,
	ListItem,
	SearchTableHeader,
	onSelectRow,
	onCheckboxPress,
	canSelectMultiple,
	onScroll = () => {},
	onAllCheckboxPress,
	contentContainerStyle,
	onEndReachedThreshold,
	onEndReached,
	containerStyle,
	ListFooterComponent,
	shouldPreventDefaultFocusOnSelectRow,
	shouldPreventLongPressRow,
	queryJSON,
	columns,
	onViewableItemsChanged,
	onLayout,
	shouldAnimate,
	isMobileSelectionModeEnabled,
	newTransactions = [],
	violations,
	customCardNames,
	onDEWModalOpen,
	isDEWBetaEnabled,
	selectedTransactions,
	hasLoadedAllTransactions,
	ref,
	}: SearchListProps) {

After line 189, add state and measurement:

const [scrollbarPadding, setScrollbarPadding] = useState(0);

const handleListLayout = useCallback(
    (event: LayoutChangeEvent) => {
        if (Platform.OS !== 'web') {
            return;
        }

        const contentWidth = event.nativeEvent.layout.width;
        const leftPaneWidth = variables.sideBarWithLHBWidth + variables.navigationTabBarSize;
        const expectedWidth = windowWidth - leftPaneWidth;
        const detectedScrollbarWidth = Math.max(0, expectedWidth - contentWidth);

        // Only update state if value changed to prevent unnecessary re-renders
        if (detectedScrollbarWidth !== scrollbarPadding) {
            setScrollbarPadding(detectedScrollbarWidth);
        }
    },
    [windowWidth, scrollbarPadding],
);

App/src/components/Search/SearchList/index.tsx

Lines 464 to 493 in 87e6d66

	{tableHeaderVisible && (
	<View style={[styles.searchListHeaderContainerStyle, styles.listTableHeader]}>
	{canSelectMultiple && (
	<Checkbox
	accessibilityLabel={translate('workspace.people.selectAll')}
	isChecked={isSelectAllChecked}
	isIndeterminate={selectedItemsLength > 0 && (selectedItemsLength !== flattenedItemsWithoutPendingDelete.length || !hasLoadedAllTransactions)}
	onPress={() => {
	onAllCheckboxPress();
	}}
	disabled={flattenedItems.length === 0}
	/>
	)}
	{SearchTableHeader}
	{selectAllButtonVisible && (
	<PressableWithFeedback
	style={[styles.userSelectNone, styles.alignItemsCenter]}
	onPress={onAllCheckboxPress}
	accessibilityLabel={translate('workspace.people.selectAll')}
	role="button"
	accessibilityState={{checked: isSelectAllChecked}}
	dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
	>
	<Text style={[styles.textMicroSupporting, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>
	</PressableWithFeedback>
	)}
	</View>
	)}

Update header View (line 465):

{tableHeaderVisible && (
    <View
        style={[
            styles.searchListHeaderContainerStyle,
            styles.listTableHeader,
            Platform.OS === 'web' && scrollbarPadding > 0 && {paddingRight: scrollbarPadding},
        ]}
    >
        {canSelectMultiple && (
            <Checkbox
                accessibilityLabel={translate('workspace.people.selectAll')}
                isChecked={isSelectAllChecked}
                isIndeterminate={selectedItemsLength > 0 && (selectedItemsLength !== flattenedItemsWithoutPendingDelete.length || !hasLoadedAllTransactions)}
                onPress={() => {
                    onAllCheckboxPress();
                }}
                disabled={flattenedItems.length === 0}
            />
        )}

        {SearchTableHeader}

        {selectAllButtonVisible && (
            <PressableWithFeedback
                style={[styles.userSelectNone, styles.alignItemsCenter]}
                onPress={onAllCheckboxPress}
                accessibilityLabel={translate('workspace.people.selectAll')}
                role="button"
                accessibilityState={{checked: isSelectAllChecked}}
                dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
            >
                <Text style={[styles.textMicroSupporting, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>
            </PressableWithFeedback>
        )}
    </View>
)}

App/src/components/Search/SearchList/index.tsx

Lines 494 to 514 in 87e6d66

	<BaseSearchList
	data={data}
	renderItem={renderItem}
	onSelectRow={onSelectRow}
	keyExtractor={keyExtractor}
	onScroll={onScroll}
	showsVerticalScrollIndicator={false}
	ref={listRef}
	columns={columns}
	scrollToIndex={scrollToIndex}
	flattenedItemsLength={flattenedItems.length}
	onEndReached={onEndReached}
	onEndReachedThreshold={onEndReachedThreshold}
	ListFooterComponent={ListFooterComponent}
	onViewableItemsChanged={onViewableItemsChanged}
	onLayout={onLayout}
	contentContainerStyle={contentContainerStyle}
	newTransactions={newTransactions}
	selectedTransactions={selectedTransactions}
	customCardNames={customCardNames}
	/>

Update BaseSearchList call (line 494), modify onLayout prop:

<BaseSearchList
    data={data}
    renderItem={renderItem}
    onSelectRow={onSelectRow}
    keyExtractor={keyExtractor}
    onScroll={onScroll}
    showsVerticalScrollIndicator={false}
    ref={listRef}
    columns={columns}
    scrollToIndex={scrollToIndex}
    flattenedItemsLength={flattenedItems.length}
    onEndReached={onEndReached}
    onEndReachedThreshold={onEndReachedThreshold}
    ListFooterComponent={ListFooterComponent}
    onViewableItemsChanged={onViewableItemsChanged}
    onLayout={(event) => {
        handleListLayout(event);
        onLayout?.();
    }}
    contentContainerStyle={contentContainerStyle}
    newTransactions={newTransactions}
    selectedTransactions={selectedTransactions}
    customCardNames={customCardNames}
/>

Solution 2: Measure container width for skeleton

File: src/components/Skeletons/SearchRowSkeleton.tsx

App/src/components/Skeletons/SearchRowSkeleton.tsx

Lines 1 to 2 in 87e6d66

	import React from 'react';
	import type {StyleProp, ViewStyle} from 'react-native';

Update imports:

import React, {useCallback, useState} from 'react';
import type {LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';

App/src/components/Skeletons/SearchRowSkeleton.tsx

Lines 36 to 42 in 87e6d66

	function SearchRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacityEnabled = false, containerStyle}: SearchRowSkeletonProps) {
	const styles = useThemeStyles();
	const {windowWidth} = useWindowDimensions();
	const {shouldUseNarrowLayout, isLargeScreenWidth} = useResponsiveLayout();
	useSkeletonSpan('SearchRowSkeleton');
	if (shouldUseNarrowLayout) {

After line 40, add container width measurement:

const {windowWidth} = useWindowDimensions();
const {shouldUseNarrowLayout, isLargeScreenWidth} = useResponsiveLayout();

// Initialize with calculated width to prevent initial flicker
const initialWidth = windowWidth - leftPaneWidth;
const [containerWidth, setContainerWidth] = useState(initialWidth);

const handleLayout = useCallback(
    (event: LayoutChangeEvent) => {
        const measuredWidth = event.nativeEvent.layout.width;

        // Only update if width changed to prevent unnecessary re-renders
        if (measuredWidth !== containerWidth) {
            setContainerWidth(measuredWidth);
        }
    },
    [containerWidth],
);

App/src/components/Skeletons/SearchRowSkeleton.tsx

Lines 117 to 179 in 87e6d66

	return (
	<View style={[styles.flex1, containerStyle]}>
	<ItemListSkeletonView
	shouldAnimate={shouldAnimate}
	fixedNumItems={fixedNumItems}
	gradientOpacityEnabled={gradientOpacityEnabled}
	itemViewStyle={[styles.highlightBG, styles.mb2, styles.br3, styles.ml5]}
	renderSkeletonItem={() => (
	<>
	<Rect
	transform={[{translateX: 12}, {translateY: 12}]}
	rx={5}
	ry={5}
	width={36}
	height={40}
	/>
	<Rect
	transform={[{translateX: 60}, {translateY: 28}]}
	width={30}
	height={barHeight}
	/>
	<Rect
	transform={[{translateX: 102}, {translateY: 28}]}
	width={longBarWidth}
	height={barHeight}
	/>
	{isLargeScreenWidth && (
	<>
	<Rect
	transform={[{translateX: 234}, {translateY: 28}]}
	width={longBarWidth}
	height={barHeight}
	/>
	<Rect
	transform={[{translateX: 366}, {translateY: 28}]}
	width={60}
	height={barHeight}
	/>
	</>
	)}
	<Rect
	// We have to calculate this value to make sure the element is aligned to the button on the right side.
	transform={[{translateX: windowWidth - leftPaneWidth - rightButtonWidth - gapWidth - centralPanePadding - gapWidth - rightSideElementWidth}, {translateY: 28}]}
	width={80}
	height={barHeight}
	/>
	<Rect
	// We have to calculate this value to make sure the element is aligned to the right border.
	transform={[{translateX: windowWidth - leftPaneWidth - rightSideElementWidth - gapWidth - centralPanePadding}, {translateY: 18}]}
	rx={15}
	ry={15}
	width={80}
	height={28}
	/>
	</>
	)}
	/>
	</View>
	);
	}

Update wide layout View (line 117):

return (
    <View
        style={[styles.flex1, containerStyle]}
        onLayout={handleLayout}
    >
        <ItemListSkeletonView
            shouldAnimate={shouldAnimate}
            fixedNumItems={fixedNumItems}
            gradientOpacityEnabled={gradientOpacityEnabled}
            itemViewStyle={[styles.highlightBG, styles.mb2, styles.br3, styles.ml5]}
            renderSkeletonItem={() => (
                <>
                    <Rect
                        transform={[{translateX: 12}, {translateY: 12}]}
                        rx={5}
                        ry={5}
                        width={36}
                        height={40}
                    />
                    <Rect
                        transform={[{translateX: 60}, {translateY: 28}]}
                        width={30}
                        height={barHeight}
                    />
                    <Rect
                        transform={[{translateX: 102}, {translateY: 28}]}
                        width={longBarWidth}
                        height={barHeight}
                    />
                    {isLargeScreenWidth && (
                        <>
                            <Rect
                                transform={[{translateX: 234}, {translateY: 28}]}
                                width={longBarWidth}
                                height={barHeight}
                            />
                            <Rect
                                transform={[{translateX: 366}, {translateY: 28}]}
                                width={60}
                                height={barHeight}
                            />
                        </>
                    )}
                    <Rect
                        // Use containerWidth instead of windowWidth to account for scrollbar
                        transform={[{translateX: containerWidth - rightButtonWidth - gapWidth - rightSideElementWidth}, {translateY: 28}]}
                        width={80}
                        height={barHeight}
                    />
                    <Rect
                        // Use containerWidth instead of windowWidth to account for scrollbar
                        transform={[{translateX: containerWidth - rightSideElementWidth - gapWidth}, {translateY: 18}]}
                        rx={15}
                        ry={15}
                        width={80}
                        height={28}
                    />
                </>
            )}
        />
    </View>
);

App/src/components/Skeletons/SearchRowSkeleton.tsx

Lines 43 to 115 in 87e6d66

	return (
	<View style={[styles.flex1, containerStyle]}>
	<ItemListSkeletonView
	itemViewHeight={CONST.SEARCH_SKELETON_VIEW_ITEM_HEIGHT_SMALL}
	itemViewStyle={[styles.highlightBG, styles.mb2, styles.br3, styles.ml5]}
	gradientOpacityEnabled={gradientOpacityEnabled}
	shouldAnimate={shouldAnimate}
	fixedNumItems={fixedNumItems}
	renderSkeletonItem={() => (
	<>
	<Circle
	cx={24}
	cy={22}
	r={6}
	/>
	<Rect
	width={40}
	height={4}
	transform={[{translateX: 40}, {translateY: 20}]}
	/>
	<Circle
	cx={96}
	cy={22}
	r={6}
	/>
	<Rect
	width={40}
	height={4}
	transform={[{translateX: 112}, {translateY: 20}]}
	/>
	<Rect
	transform={[{translateX: windowWidth - 122}, {translateY: 8}]}
	width={72}
	height={20}
	rx={10}
	ry={14}
	/>
	<Rect
	transform={[{translateX: 16}, {translateY: 44}]}
	width={36}
	height={40}
	rx={4}
	ry={4}
	/>
	<Rect
	transform={[{translateX: 64}, {translateY: 53}]}
	width={124}
	height={8}
	/>
	<Rect
	transform={[{translateX: 64}, {translateY: 67}]}
	width={60}
	height={8}
	/>
	<Rect
	transform={[{translateX: windowWidth - 130}, {translateY: 53}]}
	width={80}
	height={8}
	/>
	<Rect
	transform={[{translateX: windowWidth - 110}, {translateY: 67}]}
	width={60}
	height={8}
	/>
	</>
	)}
	/>
	</View>
	);
	}

For narrow layout (line 43), also add onLayout:

if (shouldUseNarrowLayout) {
    return (
        <View
            style={[styles.flex1, containerStyle]}
            onLayout={handleLayout}
        >
            <ItemListSkeletonView
                itemViewHeight={CONST.SEARCH_SKELETON_VIEW_ITEM_HEIGHT_SMALL}
                itemViewStyle={[styles.highlightBG, styles.mb2, styles.br3, styles.ml5]}
                gradientOpacityEnabled={gradientOpacityEnabled}
                shouldAnimate={shouldAnimate}
                fixedNumItems={fixedNumItems}
                renderSkeletonItem={() => (
                    <>
                        <Circle cx={24} cy={22} r={6} />
                        <Rect width={40} height={4} transform={[{translateX: 40}, {translateY: 20}]} />
                        <Circle cx={96} cy={22} r={6} />
                        <Rect width={40} height={4} transform={[{translateX: 112}, {translateY: 20}]} />
                        <Rect
                            // Use containerWidth instead of windowWidth
                            transform={[{translateX: containerWidth - 122}, {translateY: 8}]}
                            width={72}
                            height={20}
                            rx={10}
                            ry={14}
                        />
                        <Rect transform={[{translateX: 16}, {translateY: 44}]} width={36} height={40} rx={4} ry={4} />
                        <Rect transform={[{translateX: 64}, {translateY: 53}]} width={124} height={8} />
                        <Rect transform={[{translateX: 64}, {translateY: 67}]} width={60} height={8} />
                        <Rect
                            // Use containerWidth instead of windowWidth
                            transform={[{translateX: containerWidth - 130}, {translateY: 53}]}
                            width={80}
                            height={8}
                        />
                        <Rect
                            // Use containerWidth instead of windowWidth
                            transform={[{translateX: containerWidth - 110}, {translateY: 67}]}
                            width={60}
                            height={8}
                        />
                    </>
                )}
            />
        </View>
    );
}

[abbasifaizan70]

Proposal

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

On the Reports page, there are two alignment issues when scrolling:

What is the root cause of that problem?

Root Cause for Issue 1 (Skeleton Rows Cut Off):

The skeleton rows in SearchRowSkeleton.tsx use fixed positioning calculations based on windowWidth, but they don't account for the scroll bar width. When a vertical scroll bar appears (typically 16px wide on desktop browsers), the available content width is reduced, causing the rightmost elements of the skeleton to be cut off.

The skeleton container doesn't have padding to account for the scroll bar space, so elements positioned using windowWidth calculations extend beyond the visible content area.

Root Cause for Issue 2 (Fixed Header Misalignment):

The fixed table header in SearchList/index.tsx uses listTableHeader style which has paddingHorizontal: 32. However, when a scroll bar appears on the list below, the table content shifts left by approximately 16px (the scroll bar width) to make room for the scroll bar. The header container doesn't account for this shift, causing misalignment between the header and the table content.

The header is rendered in a separate container from the scrollable list, so it doesn't automatically adjust when the list's scroll bar appears.

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

Fix 1: Add padding-right to skeleton container

Update App/src/components/Skeletons/SearchRowSkeleton.tsx to add paddingRight: 16 to both the narrow and wide layout containers to account for the scroll bar width.

Change 1 - Narrow Layout Container:

App/src/components/Skeletons/SearchRowSkeleton.tsx

Line 44 in 87e6d66

<View style={[styles.flex1, containerStyle]}>

// Before
<View style={[styles.flex1, containerStyle]}>

// After
<View style={[styles.flex1, containerStyle, {paddingRight: 16}]}>

Change 2 - Wide Layout Container:

App/src/components/Skeletons/SearchRowSkeleton.tsx

Line 44 in 87e6d66

<View style={[styles.flex1, containerStyle]}>

// Before
<View style={[styles.flex1, containerStyle]}>

// After
<View style={[styles.flex1, containerStyle, {paddingRight: 16}]}>

Fix 2: Adjust header padding to account for scroll bar

Update App/src/styles/index.ts to modify the listTableHeader style to use separate left and right padding values, with right padding accounting for the scroll bar width.

Change:

https://github.com/Expensify/App/blob/87e6d666b4e4ecd51eaee9ef21a9eee4d4f470ff/src/styles/index.ts#L4604-L606

// Before
listTableHeader: {
    paddingVertical: 12,
    paddingHorizontal: 32,
},

// After
listTableHeader: {
    paddingVertical: 12,
    paddingLeft: 32,
    paddingRight: 48, // 32 (original) + 16 (scroll bar width) to account for scroll bar on web
},

Why This Fix Works:

1. Skeleton Rows: Adding paddingRight: 16 to the skeleton container creates space for the scroll bar, preventing the rightmost skeleton elements from being cut off. This padding matches the typical scroll bar width on desktop browsers.

2. Fixed Header: By changing from paddingHorizontal: 32 to paddingLeft: 32 and paddingRight: 48, the header's right padding accounts for the 16px scroll bar width. This ensures the header columns align with the table content below, which has shifted left to accommodate the scroll bar.

Both fixes use a 16px value which is the standard scroll bar width on most desktop browsers. The padding is applied on web where scroll bars appear; on native platforms, this has no negative effect.

Demo

---

[annaweber830]

Proposal

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

On Windows: Chrome, the Reports page tables (Reports → Reports and Reports → Expenses) have two visual layout issues:

1. Reports → Reports (loading state): the list skeleton rows are clipped on the right, so the placeholder UI looks cut off.
2. Reports → Expenses: the top “fixed” table header (e.g. the “Action” column) becomes misaligned with the rows below when a vertical scrollbar appears.

This is easiest to reproduce when a mouse is connected (classic non-overlay scrollbars), and when there are enough results to make the table scroll.

What is the root cause of that problem?

There are two concrete causes in our current implementation.

1) The Search table header is rendered outside the scroll container that owns the vertical scrollbar

In SearchList, we render the header row in a standalone <View> above the actual list (BaseSearchList / FlashList). On Windows, the list’s scroll container loses width when the vertical scrollbar is present, but the header container does not—so columns don’t line up.

App/src/components/Search/SearchList/index.tsx

Lines 462 to 514 in f251b86

	const content = (
	<View style={[styles.flex1, !isKeyboardShown && safeAreaPaddingBottomStyle, containerStyle]}>
	{tableHeaderVisible && (
	<View style={[styles.searchListHeaderContainerStyle, styles.listTableHeader]}>
	{canSelectMultiple && (
	<Checkbox
	accessibilityLabel={translate('workspace.people.selectAll')}
	isChecked={isSelectAllChecked}
	isIndeterminate={selectedItemsLength > 0 && (selectedItemsLength !== flattenedItemsWithoutPendingDelete.length || !hasLoadedAllTransactions)}
	onPress={() => {
	onAllCheckboxPress();
	}}
	disabled={flattenedItems.length === 0}
	/>
	)}
	{SearchTableHeader}
	{selectAllButtonVisible && (
	<PressableWithFeedback
	style={[styles.userSelectNone, styles.alignItemsCenter]}
	onPress={onAllCheckboxPress}
	accessibilityLabel={translate('workspace.people.selectAll')}
	role="button"
	accessibilityState={{checked: isSelectAllChecked}}
	dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
	>
	<Text style={[styles.textMicroSupporting, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>
	</PressableWithFeedback>
	)}
	</View>
	)}
	<BaseSearchList
	data={data}
	renderItem={renderItem}
	onSelectRow={onSelectRow}
	keyExtractor={keyExtractor}
	onScroll={onScroll}
	showsVerticalScrollIndicator={false}
	ref={listRef}
	columns={columns}
	scrollToIndex={scrollToIndex}
	flattenedItemsLength={flattenedItems.length}
	onEndReached={onEndReached}
	onEndReachedThreshold={onEndReachedThreshold}
	ListFooterComponent={ListFooterComponent}
	onViewableItemsChanged={onViewableItemsChanged}
	onLayout={onLayout}
	contentContainerStyle={contentContainerStyle}
	newTransactions={newTransactions}
	selectedTransactions={selectedTransactions}
	customCardNames={customCardNames}
	/>

{tableHeaderVisible && (
    <View style={[styles.searchListHeaderContainerStyle, styles.listTableHeader]}>
        {canSelectMultiple && (/* checkbox */)}

        {SearchTableHeader}

        {selectAllButtonVisible && (/* button */)}
    </View>
)}
<BaseSearchList
    data={data}
    /* ... */
    showsVerticalScrollIndicator={false}
/>

Because the header isn’t inside the same scrollable element as the rows, it doesn’t “shrink” by the scrollbar width the way the row area does.

2) The search skeleton uses windowWidth to position right-aligned elements, which overshoots when the real container is narrower

SearchRowSkeleton positions right-aligned placeholder rects using windowWidth and fixed layout constants. On Windows, when the scrollbar takes up space, the list container’s usable width is smaller than windowWidth, and the skeleton draws past the right edge and gets clipped.

App/src/components/Skeletons/SearchRowSkeleton.tsx

Lines 117 to 173 in f251b86

	return (
	<View style={[styles.flex1, containerStyle]}>
	<ItemListSkeletonView
	shouldAnimate={shouldAnimate}
	fixedNumItems={fixedNumItems}
	gradientOpacityEnabled={gradientOpacityEnabled}
	itemViewStyle={[styles.highlightBG, styles.mb2, styles.br3, styles.ml5]}
	renderSkeletonItem={() => (
	<>
	<Rect
	transform={[{translateX: 12}, {translateY: 12}]}
	rx={5}
	ry={5}
	width={36}
	height={40}
	/>
	<Rect
	transform={[{translateX: 60}, {translateY: 28}]}
	width={30}
	height={barHeight}
	/>
	<Rect
	transform={[{translateX: 102}, {translateY: 28}]}
	width={longBarWidth}
	height={barHeight}
	/>
	{isLargeScreenWidth && (
	<>
	<Rect
	transform={[{translateX: 234}, {translateY: 28}]}
	width={longBarWidth}
	height={barHeight}
	/>
	<Rect
	transform={[{translateX: 366}, {translateY: 28}]}
	width={60}
	height={barHeight}
	/>
	</>
	)}
	<Rect
	// We have to calculate this value to make sure the element is aligned to the button on the right side.
	transform={[{translateX: windowWidth - leftPaneWidth - rightButtonWidth - gapWidth - centralPanePadding - gapWidth - rightSideElementWidth}, {translateY: 28}]}
	width={80}
	height={barHeight}
	/>
	<Rect
	// We have to calculate this value to make sure the element is aligned to the right border.
	transform={[{translateX: windowWidth - leftPaneWidth - rightSideElementWidth - gapWidth - centralPanePadding}, {translateY: 18}]}
	rx={15}
	ry={15}
	width={80}
	height={28}
	/>

const {windowWidth} = useWindowDimensions();

<Rect
    // We have to calculate this value to make sure the element is aligned to the right border.
    transform={[{translateX: windowWidth - leftPaneWidth - rightSideElementWidth - gapWidth - centralPanePadding}, {translateY: 18}]}
    rx={15}
    ry={15}
    width={80}
    height={28}
/>

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

The cleanest fix is to ensure both the header and the skeleton layout are based on the actual scroll container width (the width that already accounts for scrollbars), not on a separate full-width container or on windowWidth.

1) Move the Search table header into the FlashList and make it sticky

File: src/components/Search/SearchList/index.tsx

App/src/components/Search/SearchList/index.tsx

Lines 462 to 514 in f251b86

	const content = (
	<View style={[styles.flex1, !isKeyboardShown && safeAreaPaddingBottomStyle, containerStyle]}>
	{tableHeaderVisible && (
	<View style={[styles.searchListHeaderContainerStyle, styles.listTableHeader]}>
	{canSelectMultiple && (
	<Checkbox
	accessibilityLabel={translate('workspace.people.selectAll')}
	isChecked={isSelectAllChecked}
	isIndeterminate={selectedItemsLength > 0 && (selectedItemsLength !== flattenedItemsWithoutPendingDelete.length || !hasLoadedAllTransactions)}
	onPress={() => {
	onAllCheckboxPress();
	}}
	disabled={flattenedItems.length === 0}
	/>
	)}
	{SearchTableHeader}
	{selectAllButtonVisible && (
	<PressableWithFeedback
	style={[styles.userSelectNone, styles.alignItemsCenter]}
	onPress={onAllCheckboxPress}
	accessibilityLabel={translate('workspace.people.selectAll')}
	role="button"
	accessibilityState={{checked: isSelectAllChecked}}
	dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
	>
	<Text style={[styles.textMicroSupporting, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>
	</PressableWithFeedback>
	)}
	</View>
	)}
	<BaseSearchList
	data={data}
	renderItem={renderItem}
	onSelectRow={onSelectRow}
	keyExtractor={keyExtractor}
	onScroll={onScroll}
	showsVerticalScrollIndicator={false}
	ref={listRef}
	columns={columns}
	scrollToIndex={scrollToIndex}
	flattenedItemsLength={flattenedItems.length}
	onEndReached={onEndReached}
	onEndReachedThreshold={onEndReachedThreshold}
	ListFooterComponent={ListFooterComponent}
	onViewableItemsChanged={onViewableItemsChanged}
	onLayout={onLayout}
	contentContainerStyle={contentContainerStyle}
	newTransactions={newTransactions}
	selectedTransactions={selectedTransactions}
	customCardNames={customCardNames}
	/>

Current code (problematic):

{tableHeaderVisible && (
    <View style={[styles.searchListHeaderContainerStyle, styles.listTableHeader]}>
        {canSelectMultiple && (/* checkbox */)}
        {SearchTableHeader}
        {selectAllButtonVisible && (/* button */)}
    </View>
)}

<BaseSearchList
    data={data}
    /* ... */
/>

Changed code (fix):

const ListHeaderComponent = tableHeaderVisible ? (
    <View style={[styles.searchListHeaderContainerStyle, styles.listTableHeader, styles.selectionListStickyHeader]}>
        {canSelectMultiple && (/* checkbox */)}
        {SearchTableHeader}
        {selectAllButtonVisible && (/* button */)}
    </View>
) : null;

<BaseSearchList
    data={data}
    /* ... */
    ListHeaderComponent={ListHeaderComponent}
    stickyHeaderIndices={ListHeaderComponent ? [0] : undefined}
/>

Why this fixes the misalignment:

• Once the header is inside the list’s scroll container, it shares the exact same “client width” as the rows, including the scrollbar gutter on Windows.

2) Thread ListHeaderComponent and stickyHeaderIndices through BaseSearchList

File: src/components/Search/SearchList/BaseSearchList/types.ts

App/src/components/Search/SearchList/BaseSearchList/types.ts

Lines 8 to 49 in f251b86

	type BaseSearchListProps = Pick<
	FlashListProps<SearchListItem>,
	| 'onScroll'
	| 'contentContainerStyle'
	| 'onEndReached'
	| 'onEndReachedThreshold'
	| 'ListFooterComponent'
	| 'onViewableItemsChanged'
	| 'keyExtractor'
	| 'showsVerticalScrollIndicator'
	| 'onLayout'
	> & {
	/** The data to display in the list */
	data: SearchListItem[];
	/** The function to render each item in the list */
	renderItem: (item: SearchListItem, index: number, isItemFocused: boolean, onFocus?: (event: NativeSyntheticEvent<ExtendedTargetedEvent>) => void) => React.JSX.Element;
	/** The columns that might change to trigger re-render via extraData */
	columns: SearchColumnType[];
	/** The transactions that might trigger re-render via extraData */
	newTransactions: Transaction[];
	/** The length of the flattened items in the list */
	flattenedItemsLength: number;
	/** The callback, which is run when a row is pressed */
	onSelectRow: (item: SearchListItem) => void;
	/** The ref to the list */
	ref: ForwardedRef<FlashListRef<SearchListItem>>;
	/** The function to scroll to an index */
	scrollToIndex?: (index: number, animated?: boolean) => void;
	/** Selected transactions for triggering re-render via extraData */
	selectedTransactions?: SelectedTransactions;
	/** Custom card names for triggering re-render via extraData */
	customCardNames?: Record<number, string>;
	};

Current code:

type BaseSearchListProps = Pick<
    FlashListProps<SearchListItem>,
    | 'onScroll'
    | 'contentContainerStyle'
    | 'onEndReached'
    | 'onEndReachedThreshold'
    | 'ListFooterComponent'
    | 'onViewableItemsChanged'
    | 'keyExtractor'
    | 'showsVerticalScrollIndicator'
    | 'onLayout'
> & {
    /* ... */
};

Changed code:

type BaseSearchListProps = Pick<
    FlashListProps<SearchListItem>,
    | 'onScroll'
    | 'contentContainerStyle'
    | 'onEndReached'
    | 'onEndReachedThreshold'
    | 'ListFooterComponent'
    | 'ListHeaderComponent'
    | 'stickyHeaderIndices'
    | 'onViewableItemsChanged'
    | 'keyExtractor'
    | 'showsVerticalScrollIndicator'
    | 'onLayout'
> & {
    /* ... */
};

File: src/components/Search/SearchList/BaseSearchList/index.tsx

App/src/components/Search/SearchList/BaseSearchList/index.tsx

Lines 16 to 129 in f251b86

	function BaseSearchList({
	data,
	columns,
	renderItem,
	onSelectRow,
	keyExtractor,
	onScroll,
	ref,
	scrollToIndex,
	onEndReached,
	onEndReachedThreshold,
	ListFooterComponent,
	onViewableItemsChanged,
	onLayout,
	contentContainerStyle,
	flattenedItemsLength,
	newTransactions,
	selectedTransactions,
	customCardNames,
	}: BaseSearchListProps) {
	const hasKeyBeenPressed = useRef(false);
	const isFocused = useIsFocused();
	const setHasKeyBeenPressed = useCallback(() => {
	if (hasKeyBeenPressed.current) {
	return;
	}
	// We need to track whether a key has been pressed to enable focus syncing only if a key has been pressed.
	// This is to avoid the default behavior of web showing blue border on click of items after a page refresh.
	hasKeyBeenPressed.current = true;
	}, []);
	const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({
	initialFocusedIndex: -1,
	maxIndex: flattenedItemsLength - 1,
	isActive: isFocused,
	onFocusedIndexChange: (index: number) => {
	scrollToIndex?.(index);
	},
	...(!hasKeyBeenPressed.current && {setHasKeyBeenPressed}),
	isFocused,
	});
	const renderItemWithKeyboardFocus = useCallback(
	({item, index}: {item: SearchListItem; index: number}) => {
	const isItemFocused = focusedIndex === index;
	const onFocus = (event: NativeSyntheticEvent<ExtendedTargetedEvent>) => {
	// Prevent unexpected scrolling on mobile Chrome after the context menu closes by ignoring programmatic focus not triggered by direct user interaction.
	if (isMobileChrome() && event.nativeEvent) {
	if (!event.nativeEvent.sourceCapabilities) {
	return;
	}
	// Ignore the focus if it's caused by a touch event on mobile chrome.
	// For example, a long press will trigger a focus event on mobile chrome
	if (event.nativeEvent.sourceCapabilities.firesTouchEvents) {
	return;
	}
	}
	setFocusedIndex(index);
	};
	return renderItem(item, index, isItemFocused, onFocus);
	},
	[focusedIndex, renderItem, setFocusedIndex],
	);
	const selectFocusedOption = useCallback(() => {
	const focusedItem = data.at(focusedIndex);
	if (!focusedItem) {
	return;
	}
	onSelectRow(focusedItem);
	}, [data, focusedIndex, onSelectRow]);
	useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, {
	captureOnInputs: true,
	shouldBubble: false,
	shouldPreventDefault: false,
	isActive: isFocused && focusedIndex >= 0,
	shouldStopPropagation: true,
	});
	useEffect(() => {
	addKeyDownPressListener(setHasKeyBeenPressed);
	return () => removeKeyDownPressListener(setHasKeyBeenPressed);
	}, [setHasKeyBeenPressed]);
	const extraData = useMemo(
	() => [focusedIndex, columns, newTransactions, selectedTransactions, customCardNames],
	[focusedIndex, columns, newTransactions, selectedTransactions, customCardNames],
	);
	return (
	<AnimatedFlashListComponent
	data={data}
	renderItem={renderItemWithKeyboardFocus}
	keyExtractor={keyExtractor}
	onScroll={onScroll}
	showsVerticalScrollIndicator
	ref={ref}
	extraData={extraData}
	onEndReached={onEndReached}
	onEndReachedThreshold={onEndReachedThreshold}
	ListFooterComponent={ListFooterComponent}
	onViewableItemsChanged={onViewableItemsChanged}
	onLayout={onLayout}
	removeClippedSubviews
	drawDistance={1000}
	contentContainerStyle={contentContainerStyle}
	maintainVisibleContentPosition={{disabled: true}}
	/>

Current code:

function BaseSearchList({data, renderItem, keyExtractor, onScroll, ref, onEndReached, onEndReachedThreshold, ListFooterComponent, onViewableItemsChanged, onLayout, contentContainerStyle}: BaseSearchListProps) {
    return (
        <AnimatedFlashListComponent
            data={data}
            /* ... */
            ListFooterComponent={ListFooterComponent}
            onViewableItemsChanged={onViewableItemsChanged}
            onLayout={onLayout}
            contentContainerStyle={contentContainerStyle}
        />
    );
}

Changed code:

function BaseSearchList({
    data,
    renderItem,
    keyExtractor,
    onScroll,
    ref,
    onEndReached,
    onEndReachedThreshold,
    ListFooterComponent,
    ListHeaderComponent,
    stickyHeaderIndices,
    onViewableItemsChanged,
    onLayout,
    contentContainerStyle,
}: BaseSearchListProps) {
    return (
        <AnimatedFlashListComponent
            data={data}
            /* ... */
            ListHeaderComponent={ListHeaderComponent}
            stickyHeaderIndices={stickyHeaderIndices}
            ListFooterComponent={ListFooterComponent}
            onViewableItemsChanged={onViewableItemsChanged}
            onLayout={onLayout}
            contentContainerStyle={contentContainerStyle}
        />
    );
}

Make the same forwarding change in:

• src/components/Search/SearchList/BaseSearchList/index.native.tsx

3) Fix skeleton clipping by measuring the real container width instead of using windowWidth

File: src/components/Skeletons/SearchRowSkeleton.tsx

App/src/components/Skeletons/SearchRowSkeleton.tsx

Lines 36 to 179 in f251b86

	function SearchRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacityEnabled = false, containerStyle}: SearchRowSkeletonProps) {
	const styles = useThemeStyles();
	const {windowWidth} = useWindowDimensions();
	const {shouldUseNarrowLayout, isLargeScreenWidth} = useResponsiveLayout();
	useSkeletonSpan('SearchRowSkeleton');
	if (shouldUseNarrowLayout) {
	return (
	<View style={[styles.flex1, containerStyle]}>
	<ItemListSkeletonView
	itemViewHeight={CONST.SEARCH_SKELETON_VIEW_ITEM_HEIGHT_SMALL}
	itemViewStyle={[styles.highlightBG, styles.mb2, styles.br3, styles.ml5]}
	gradientOpacityEnabled={gradientOpacityEnabled}
	shouldAnimate={shouldAnimate}
	fixedNumItems={fixedNumItems}
	renderSkeletonItem={() => (
	<>
	<Circle
	cx={24}
	cy={22}
	r={6}
	/>
	<Rect
	width={40}
	height={4}
	transform={[{translateX: 40}, {translateY: 20}]}
	/>
	<Circle
	cx={96}
	cy={22}
	r={6}
	/>
	<Rect
	width={40}
	height={4}
	transform={[{translateX: 112}, {translateY: 20}]}
	/>
	<Rect
	transform={[{translateX: windowWidth - 122}, {translateY: 8}]}
	width={72}
	height={20}
	rx={10}
	ry={14}
	/>
	<Rect
	transform={[{translateX: 16}, {translateY: 44}]}
	width={36}
	height={40}
	rx={4}
	ry={4}
	/>
	<Rect
	transform={[{translateX: 64}, {translateY: 53}]}
	width={124}
	height={8}
	/>
	<Rect
	transform={[{translateX: 64}, {translateY: 67}]}
	width={60}
	height={8}
	/>
	<Rect
	transform={[{translateX: windowWidth - 130}, {translateY: 53}]}
	width={80}
	height={8}
	/>
	<Rect
	transform={[{translateX: windowWidth - 110}, {translateY: 67}]}
	width={60}
	height={8}
	/>
	</>
	)}
	/>
	</View>
	);
	}
	return (
	<View style={[styles.flex1, containerStyle]}>
	<ItemListSkeletonView
	shouldAnimate={shouldAnimate}
	fixedNumItems={fixedNumItems}
	gradientOpacityEnabled={gradientOpacityEnabled}
	itemViewStyle={[styles.highlightBG, styles.mb2, styles.br3, styles.ml5]}
	renderSkeletonItem={() => (
	<>
	<Rect
	transform={[{translateX: 12}, {translateY: 12}]}
	rx={5}
	ry={5}
	width={36}
	height={40}
	/>
	<Rect
	transform={[{translateX: 60}, {translateY: 28}]}
	width={30}
	height={barHeight}
	/>
	<Rect
	transform={[{translateX: 102}, {translateY: 28}]}
	width={longBarWidth}
	height={barHeight}
	/>
	{isLargeScreenWidth && (
	<>
	<Rect
	transform={[{translateX: 234}, {translateY: 28}]}
	width={longBarWidth}
	height={barHeight}
	/>
	<Rect
	transform={[{translateX: 366}, {translateY: 28}]}
	width={60}
	height={barHeight}
	/>
	</>
	)}
	<Rect
	// We have to calculate this value to make sure the element is aligned to the button on the right side.
	transform={[{translateX: windowWidth - leftPaneWidth - rightButtonWidth - gapWidth - centralPanePadding - gapWidth - rightSideElementWidth}, {translateY: 28}]}
	width={80}
	height={barHeight}
	/>
	<Rect
	// We have to calculate this value to make sure the element is aligned to the right border.
	transform={[{translateX: windowWidth - leftPaneWidth - rightSideElementWidth - gapWidth - centralPanePadding}, {translateY: 18}]}
	rx={15}
	ry={15}
	width={80}
	height={28}
	/>
	</>
	)}
	/>
	</View>
	);
	}

Current code (problematic):

const {windowWidth} = useWindowDimensions();

<View style={[styles.flex1, containerStyle]}>
    <ItemListSkeletonView
        /* ... */
        renderSkeletonItem={() => (
            <>
                <Rect
                    transform={[{translateX: windowWidth - leftPaneWidth - rightSideElementWidth - gapWidth - centralPanePadding}, {translateY: 18}]}
                    rx={15}
                    ry={15}
                    width={80}
                    height={28}
                />
            </>
        )}
    />
</View>

Changed code (fix):

const {windowWidth} = useWindowDimensions();
const [containerWidth, setContainerWidth] = React.useState(windowWidth);

<View
    style={[styles.flex1, containerStyle]}
    onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
>
    <ItemListSkeletonView
        /* ... */
        renderSkeletonItem={() => (
            <>
                <Rect
                    // Align to the actual container width (accounts for scrollbar gutter)
                    transform={[{translateX: containerWidth - rightSideElementWidth - gapWidth - centralPanePadding}, {translateY: 18}]}
                    rx={15}
                    ry={15}
                    width={80}
                    height={28}
                />
            </>
        )}
    />
</View>

What alternative solutions did you explore? (Optional)