[Due for payment 2025-05-08] [$250] The table headers in the Members section of Workspace Settings are not consistent across different tables.

[m-natarajan]

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.1.27-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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: @dubielzyk-expensify
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Navigate to Workspace Settings.
2. Navigate to the Members section.
3. Compare the header spacing between different tables.

Expected Result:

All table headers in the Members section should use consistent spacing, ensuring proper alignment of text and elements (e.g., checkbox + label).

Actual Result:

There is a noticeable shift in the position of the text next to the checkbox across different tables

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

CleanShot.2025-04-07.at.19.29.52.mp4

Recording.1139.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021911855236260400663
• Upwork Job ID: 1911855236260400663
• Last Price Increase: 2025-04-21

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

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

🚨 Edited by proposal-police: This proposal was edited at 2025-04-14 12:10:12 UTC.

Proposal

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

The table headers in the Members section of Workspace Settings are not consistent across different tables.

What is the root cause of that problem?

We are setting padding bottom as styles.mb4

App/src/pages/workspace/WorkspaceMembersPage.tsx

Line 489 in baec56c

<Text style={[styles.pl5, styles.mb4, styles.mt3, styles.textSupporting]}>{translate('workspace.people.membersListTitle')}</Text>

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

We should use styles.mb5 to make it consistent with other pages

Note: we should only use styles.pl5 because we have styles.mr2 in here

App/src/pages/workspace/WorkspaceMembersPage.tsx

Line 748 in baec56c

listHeaderContent={shouldUseNarrowLayout ? <View style={[styles.pr5]}>{getHeaderContent()}</View> : null}

if we want to use styles.ph5 we need to remove styles.mr2 in the container view style

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

[samranahm]

Proposal

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

The table headers in the Members section of Workspace Settings are not consistent across different tables.

What is the root cause of that problem?

We are using styles.mb4, styles.mt3,
here

App/src/pages/workspace/WorkspaceMembersPage.tsx

Line 489 in d0d90da

<Text style={[styles.pl5, styles.mb4, styles.mt3, styles.textSupporting]}>{translate('workspace.people.membersListTitle')}</Text>

instead of styles.pb5, styles.pt3, like we did in categories page

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Line 339 in d0d90da

<View style={[styles.ph5, styles.pb5, styles.pt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>

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

We should use `styles.ph5, styles.pb5, styles.pt3

like

<View style={[styles.ph5, styles.pb5, styles.pt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[nyomanjyotisa]

Proposal

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

The table headers in the Members section of Workspace Settings are not consistent across different tables

What is the root cause of that problem?

We apply styles.pl5, styles.mb4, styles.mt3 styles to the Text element on the WorkspaceMembersPage

App/src/pages/workspace/WorkspaceMembersPage.tsx

Lines 487 to 489 in 8dd296b

	const getHeaderContent = () => (
	<View style={shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection}>
	<Text style={[styles.pl5, styles.mb4, styles.mt3, styles.textSupporting]}>{translate('workspace.people.membersListTitle')}</Text>

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

We should apply styles.ph5, styles.pb5, styles.pt3 styles to the View component instead to make it consistent with the other pages, like this

        <View style={[styles.ph5, styles.pb5, styles.pt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
            <Text style={[styles.textSupporting]}>{translate('workspace.people.membersListTitle')}</Text>

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

[samranahm]

@nyomanjyotisa I hope you've already done it but if not please check out CONTRIBUTING.md

Note: Before submitting a proposal on an issue, be sure to read any other existing proposals. ALL NEW PROPOSALS MUST BE DIFFERENT FROM EXISTING PROPOSALS. The difference should be important, meaningful or considerable.

[samranahm]

like we did in categories page

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Line 339 in d0d90da

<View style={[styles.ph5, styles.pb5, styles.pt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>

I've already mentioned to make it like we did on WorkspaceCategoriesPage

So, It mean styles.ph5, styles.pb5, styles.pt3

[nabi-ebrahimi]

Proposal

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

The table headers in the Members section of Workspace Settings have inconsistent spacing compared to other workspace pages due to different style applications. This leads to visual misalignment and an inconsistent user experience.

What is the root cause of that problem?

The root cause of the problem is the inconsistent application of spacing styles to header sections across different workspace-related pages. Each page manually applies a different combination of padding and margin styles—sometimes on the header container, other times directly on the <Text> element—which results in misaligned and uneven spacing between headers.

Here are some examples:

• WorkspaceMembersPage.tsx uses:
  styles.pl5, styles.mb4, styles.mt3 (applied directly to <Text>)

• PolicyDistanceRatesPage.tsx, WorkspaceCategoriesPage.tsx, and WorkspaceTagsPage.tsx use:
  styles.ph5, styles.pb5, styles.pt3 (applied to the container)

• WorkspaceMoreFeaturesPage.tsx applies:
  styles.ph5, styles.mb5, styles.mt3, and styles.workspaceSectionMobile (applied directly to <Text>)

These inconsistencies cause headers across pages to appear misaligned, leading to a disjointed user experience and more difficult maintenance.

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

To address this inconsistency, we should refactor the current layout approach by introducing a shared WorkspaceHeader component that encapsulates the common styling and structure used for header sections across all relevant pages.

Steps:

1. Create a WorkspaceHeader component that applies a consistent set of styles such as ph5, pb5, pt3, and conditionally applies workspaceSectionMobile or workspaceSection based on layout needs.

   const WorkspaceHeader = ({children}: {children: React.ReactNode}) => (
       <View style={[
           styles.ph5,
           styles.pb5,
           styles.pt3,
           shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection
       ]}>
           {children}
       </View>
   );

2. Update all affected pages to use this shared component instead of repeating inline styles. This includes:

   • WorkspaceMembersPage.tsx
   • WorkspaceCategoriesPage.tsx
   • WorkspaceTagsPage.tsx
   • PolicyDistanceRatesPage.tsx
   • WorkspaceMoreFeaturesPage.tsx

3. Normalize spacing behavior

   • Move layout styles (e.g., padding/margin) from <Text> components to the wrapping container (WorkspaceHeader), ensuring spacing is managed consistently at the structural level.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

[melvin-bot]

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