[$250] Table headers are misaligned when external mouse is connected

[luacmartins]

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

Action Performed:

Coming from this comment, table headers are misaligned with the table content when an external mouse is connected:

1. [large screens only] Connect an external mouse to your computer
2. Navigate to the Search page Profile > Troubleshoot > New search page
3. Note that the table header and table content are misaligned

Note: this also happens in other views, e.g. Workspace categories, tags, etc

Expected Result:

Table header should be aligned with content

Actual Result:

Table header is not aligned with content

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01352e7296a9a4fe1c
• Upwork Job ID: 1787872804772577280
• Last Price Increase: 2024-05-07
• Automatic offers:
• ahmedGaber93 | Reviewer | 0

Issue Owner

Current Issue Owner: @dragnoir

[melvin-bot]

Triggered auto assignment to @CortneyOfstad (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.

[bernhardoj]

Proposal

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

The list header is misaligned when a scrollbar is added to the list.

What is the root cause of that problem?

The header isn't part of the list component, so when the list width is reduced because of the scrollbar, the header becomes misaligned.

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

Wrap the header with a view and set the max width to the list width or 100%.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 570 to 597 in 84118d8

	{!headerMessage && canSelectMultiple && shouldShowSelectAll && (
	<View style={[styles.userSelectNone, styles.peopleRow, styles.ph5, styles.pb3, listHeaderWrapperStyle]}>
	<View style={[styles.flexRow, styles.alignItemsCenter]}>
	<Checkbox
	accessibilityLabel={translate('workspace.people.selectAll')}
	isChecked={flattenedSections.allSelected}
	onPress={selectAllRow}
	disabled={flattenedSections.allOptions.length === flattenedSections.disabledOptionsIndexes.length}
	/>
	{!customListHeader && (
	<PressableWithFeedback
	style={[styles.userSelectNone, styles.flexRow, styles.alignItemsCenter]}
	onPress={selectAllRow}
	accessibilityLabel={translate('workspace.people.selectAll')}
	role="button"
	accessibilityState={{checked: flattenedSections.allSelected}}
	disabled={flattenedSections.allOptions.length === flattenedSections.disabledOptionsIndexes.length}
	dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
	onMouseDown={shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
	>
	<Text style={[styles.textStrong, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>
	</PressableWithFeedback>
	)}
	</View>
	{customListHeader}
	</View>
	)}
	{!headerMessage && !canSelectMultiple && customListHeader}

<View style={{maxWidth: listWidth || '100%'}}

We get the listWidth (state) from the section list onLayout.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 385 to 387 in 84118d8

	const onSectionListLayout = useCallback(
	(nativeEvent: LayoutChangeEvent) => {
	onLayout?.(nativeEvent);

[dragnoir]

Proposal

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

Table headers are misaligned when external mouse is connected

What is the root cause of that problem?

The Search page use a component for the header => SearchTableHeader
and another for the content.

App/src/components/Search.tsx

Lines 63 to 64 in 935efd9

	<SelectionList
	customListHeader={<SearchTableHeader shouldShowMerchant={shouldShowMerchant} />}

On browsers, hte items list from SelectionList will add an extra element to the right, the scroll bar. This is not part of the browser, it's added only to the list and not the header.

So this will move the elements list a bit to the left, and this will cause unconsistency between the header (no scroll bar) and the list (new scroll bar on the right)

As you see on the image, the red zone, the scroll bar, will decrease the space for the blue item list, and because w are using flex1 to fill the space, the position will not be the same as on the header.

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

Add ScrollView as a container for the Search page

+ <ScrollView>

	<SelectionList
	customListHeader={<SearchTableHeader  shouldShowMerchant={shouldShowMerchant}  />}
	ListItem={ListItem}
	sections={[{data, isDisabled:  false}]}
	onSelectRow={(item) => {
	openReport(item.transactionThreadReportID);
	}}
	shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
	listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
	containerStyle={[styles.pv0]}
	/>

+ </ScrollView>

POC:

With no mouse:

With mouse

What alternative solutions did you explore? (Optional)

We can also remove the scroll bar with showScrollIndicator={false}

<SelectionList
	customListHeader={<SearchTableHeader  shouldShowMerchant={shouldShowMerchant}  />}
	ListItem={ListItem}
	sections={[{data, isDisabled:  false}]}
	onSelectRow={(item) => {
	openReport(item.transactionThreadReportID);
	}}
	shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
	listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
	containerStyle={[styles.pv0]}
+	showScrollIndicator={false}
/>
+ </ScrollView>

[melvin-bot]

Current assignee @CortneyOfstad is eligible for the Bug assigner, not assigning anyone new.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01352e7296a9a4fe1c