[Due for payment 2025-05-08] Room - Create room button changes position in offline mode on wide screen

[jponikarchuk]

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.29-3
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): applausetester+u22011@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.3 / Chrome
App Component: Other

Action Performed:

1. Go to staging.new.expensify.com
2. Open FAB > Start chat > Room.
3. Note the position of Create room button.
4. Go offline.

Expected Result:

Create room button will not change position in offline mode because there is no offline indicator in Start chat RHP on wide screen.

Actual Result:

Create room button changes position in offline mode on wide screen.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @chrispader

[melvin-bot]

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

[etCoderDysto]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-17 08:02:54 UTC.

Proposal

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

Room - Create room button changes position in offline mode on wide screen

What is the root cause of that problem?

We are adding addBottomSafeAreaPadding below

App/src/pages/workspace/WorkspaceNewRoomPage.tsx

Line 257 in 82eb858

addBottomSafeAreaPadding

And FormWrapper will add offline indicator bottom padding if addBottomSafeAreaPadding is true. And that will add bottom padding in FormWrapper regardless of the screen having wide layout or small screen width.

App/src/components/Form/FormWrapper.tsx

Line 140 in 82eb858

const addOfflineIndicatorBottomSafeAreaPadding = addOfflineIndicatorBottomSafeAreaPaddingProp ?? addBottomSafeAreaPadding === true;

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

We should add addOfflineIndicatorBottomSafeAreaPadding in FormWrapper if the screen is small screen width only.

    const addOfflineIndicatorBottomSafeAreaPadding = addOfflineIndicatorBottomSafeAreaPaddingProp ?? (addBottomSafeAreaPadding === true && isSmallScreenWidth);

We need to apply the fix in FormWrapper since this issue happens on other pages that use FormWrapper.

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

N/A - UI issue

What alternative solutions did you explore? (Optional)

[ishakakkad]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-17 09:57:06 UTC.

Proposal

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

• Create room button changes position in offline mode on wide screen

What is the root cause of that problem?

1. We are passing addBottomSafeAreaPadding from WorkspaceNewRoomPage because of that when device is offline padding is added but we are not showing offline indicator in desktop so we don't need to add padding in case of desktop.
   

   App/src/pages/workspace/WorkspaceNewRoomPage.tsx

   Line 257 in 82eb858

   addBottomSafeAreaPadding

2. Same issue appears in New chat page because we passed addBottomSafeAreaPadding from NewChatPage
   

   App/src/pages/NewChatPage.tsx

   Line 362 in 82eb858

   addBottomSafeAreaPadding

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

1. To fix this issue we should pass addBottomSafeAreaPadding from WorkspaceNewRoomPage only for smallScreen here.

addBottomSafeAreaPadding={isSmallScreenWidth}

2. Same way we should pass addBottomSafeAreaPadding from NewChatPage only for smallScreen here.

addBottomSafeAreaPadding={isSmallScreenWidth}

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

NA because padding issue.

What alternative solutions did you explore? (Optional)

Alternatively, we can also make changes into FormWrapper for WorkspaceNewRoomPage here and in FixedFooter component for NewChatPage here so style will be applied only for mobile screen.

In FormWrapper.jsx

let addOfflineIndicatorBottomSafeAreaPadding = addOfflineIndicatorBottomSafeAreaPaddingProp ?? addBottomSafeAreaPadding === true;
addOfflineIndicatorBottomSafeAreaPadding = addOfflineIndicatorBottomSafeAreaPadding && isSmallScreenWidth;

Same way we can make changes into FixedFooter.jsx

const bottomSafeAreaPaddingStyle = useBottomSafeSafeAreaPaddingStyle({
        addBottomSafeAreaPadding,
        addOfflineIndicatorBottomSafeAreaPadding && isSmallScreenWidth,
        additionalPaddingBottom: styles.pb5.paddingBottom,
        styleProperty: shouldStickToBottom ? 'bottom' : 'paddingBottom',
    });

But I think these are generic components are used in many places. Also, there are some places where offline indicator display in desktop as well. So if we make changes in this generic components that may create another issue. So I prefer make changes into WorkspaceNewRoomPage and NewChatPage

[hungvu193]

This is a regression from #60262. We used FormProvider within ScreenWrapper in many places, a general solution should be helpful here. I think we should let @chrispader handle this one.

[saifelance]

@jponikarchuk

I tested it in Safari and Chrome, both in normal and Incognito mode. The button position remained the same and didn’t change.

https://staging.new.expensify.com/

I can send recorded video if need?

[jponikarchuk]

@saifelance could you please try to enter any text into Room name field

bandicam.2025-04-17.19-26-35-274.mp4

[chrispader]

@saifelance @jponikarchuk this is definitely reproducible. Fixing PR is up here: fix: Fix offline indicator on "New Room" page #60438