[$500] Custom welcome message section is small for rooms

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.3.95-5
Reproducible in staging?: y
Reproducible in production?: y
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: @quinthar
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1699163449677249

Action Performed:

1. Open app and login
2. Create a room
3. Click on the header > settings> welcome message
4. Type a longer message

Expected Result:

The message section should expand to fit the content, or even just be sized for the whole screen.

Actual Result:

Welcome message content is small and does not expand

Workaround:

unknown

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/~01d3ae88df429cb4ff
• Upwork Job ID: 1721271665403342848
• Last Price Increase: 2023-11-12

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

Triggered auto assignment to @alexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[rayane-djouah]

Proposal

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

The custom welcome message input area for rooms is small and does not expand to a sufficient height to accommodate longer messages.

What is the root cause of that problem?

The root cause of this issue is the styling applied to the welcome message input area in the code:

App/src/pages/ReportWelcomeMessagePage.js

Line 115 in 925ff67

containerStyles={[styles.autoGrowHeightMultilineInput]}

The maxHeight here is not enough:

App/src/styles/styles.ts

Lines 2829 to 2831 in 925ff67

	autoGrowHeightMultilineInput: {
	maxHeight: 115,
	},

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

We should increase the maxHeight property in the styles.ts file:

App/src/styles/styles.ts

Lines 2829 to 2831 in 925ff67

	autoGrowHeightMultilineInput: {
	maxHeight: 115,
	},

This will modify the max height for several inputs in the app.
Alternatively, we can consider applying a specific maxHeight style exclusively for the welcome message input to avoid affecting other inputs.

What alternative solutions did you explore? (Optional)

[ZhenjaHorbach]

It doesn't look like a bug
Because this is standard behavior and standard maxHeight for inputs in which we can pass long text

[dubielzyk-expensify]

The potential to improve this is to have a property that allows us to let the textarea grow automatically. It shouldn't be default behavior, but it would be nice to allow for it on certain screens.

[ZhenjaHorbach]

@dubielzyk-expensify
In this case
Can you give more information about the new property, please?
What should it look like?

For example, should the maximum height for input be equal to the screen height?
Or should the maximum height be equal to the height up to the save button?)
Or 50% of the screen

Or in this case, do we just need to set a new fixed maximum height ?)

[dubielzyk-expensify]

Looking into it I see a slightly different UI where message isn't in settings but on the room creation screen and given this I'm unsure if this is even something we want. Keen on @Expensify/design opinion here

[yh-0218]

Proposal

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

The custom welcome message input area for rooms is small and does not expand to a sufficient height to accommodate longer messages.

What is the root cause of that problem?

Because we have a fixed max height for all platforms.

App/src/pages/workspace/WorkspaceNewRoomPage.js

Line 219 in 846a4b7

containerStyles={[styles.autoGrowHeightMultilineInput]}

App/src/styles/styles.ts

Lines 2829 to 2831 in 846a4b7

	autoGrowHeightMultilineInput: {
	maxHeight: 115,
	},

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

We need to use different style between mobile and web.
we can use isExtraSmallScreenHeight and isSmallScreenWidth from useWindowDimensions

What alternative solutions did you explore? (Optional)

[DanutGavrus]

Proposal

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

Message section is too small for rooms.

What is the root cause of that problem?

The currently used style on the text input sets a maximum height of 115px for any device type (web/mobile/etc) and for any device size (small/large/etc).

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

We may use the existing getMaximumHeight method from StyleUtils in order to set the welcome message max height to 1/3(my suggestion, we may tune this) of the device height.

1. Introduce const {windowHeight} = useWindowDimensions(); in the ReportWelcomeMessagePage component;
2. Replace containerStyles={[styles.autoGrowHeightMultilineInput]} with containerStyles={[StyleUtils.getMaximumHeight(windowHeight / 3)]}

Result

Welcome_Message.mp4

[bharatcontact]

### Proposal

Please re-state the problem that we are trying to solve in this issue.
Message section is too small for rooms.

What is the root cause of that problem?
The currently used style on the text input sets a maximum height of 115px for any device type (web/mobile/etc) and for any device size (small/large/etc).

What changes do you think we should make in order to solve the problem?
We can add a function to calculate the height of the box on key events based on the font size and current window dimensions. Based on the output height from the logic, we can keep updating the height of the textbox

[melvin-bot]

📣 @bharatcontact! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[bharatcontact]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~017b46e9cfc1f0a0dd

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[bharatcontact]

Proposal

Please re-state the problem that we are trying to solve in this issue.
Message section is too small for rooms.

What is the root cause of that problem?
The currently used style on the text input sets a maximum height of 115px for any device type (web/mobile/etc) and for any device size (small/large/etc).

What changes do you think we should make in order to solve the problem?
We can add a function to calculate the height of the box on key events based on the font size and current window dimensions. Based on the output height from the logic, we can keep updating the height of the textbox

[dannymcclain]

To me this feels like it should be a more global consideration/discussion for our textarea component (which I don't think is very well-defined as is since it starts off as a single line and kinda tends to behave like a "normal" input).

The behavior I personally would expect out of a textarea component (regardless of where it appears in the UI) is that it starts our larger than a standard text input (I realize this would be super weird with the current design) and then when more content is added it grows up to a certain height that we determine, and once it reaches that height, it scrolls. This is a pretty standard pattern for textarea components and would allow a greater level of predictability in the UI. Just my 2 cents. @Expensify/design

For this specific situation, if the message field is behaving the same way as all our other multiline inputs, I would probably just leave it as is for now.

[dubielzyk-expensify]

Think you nailed it there, @dannymcclain.

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[alexpensify]

Reassigning another 🐛 team member, I'm going OOO until Tuesday, November 14, and will take it back if it's still open by my return date.

@JmillsExpensify - Required action from the team:

I haven't been able to confirm the next steps here, but it sounds like Design is suggesting to close. Can you please verify and complete the required action? Thanks!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[mollfpr]

To me this feels like it should be a more global consideration/discussion for our textarea component (which I don't think is very well-defined as is since it starts off as a single line and kinda tends to behave like a "normal" input).

I agree with this.

For this specific situation, if the message field is behaving the same way as all our other multiline inputs, I would probably just leave it as is for now.

As far as I can see, every page that uses our TextInput with autoGrowHeight already has the style to set the max height to 115px, so every textarea on those pages will behave the same to this issue.

@alexpensify @JmillsExpensify Based on the above conclusion, I think we can do nothing about this issue. What do you guys think?

[melvin-bot]

@JmillsExpensify, @alexpensify, @mollfpr Eep! 4 days overdue now. Issues have feelings too...

[alexpensify]

Thanks for the summary @mollfpr! I agree and am going to close this GH.