[HOLD for payment 2023-12-29] [$500] Map area doesn't take up all available space

[shawnborton]

When you go to create a distance expense, the map should take up as much space that is avaialable. Currently it looks like it has a max-height:

Ideally it should look more like this:

Also noting that this is likely a regression from somewhere and not a new bug.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0108260b5e0200363b
• Upwork Job ID: 1735023149195505664
• Last Price Increase: 2023-12-13
• Automatic offers:
• FitseTLT | Contributor | 28064611

Issue Owner

Current Issue Owner: @dylanexpensify

[melvin-bot]

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

[melvin-bot]

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

[FitseTLT]

Proposal

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

Map area doesn't take up all available space

What is the root cause of that problem?

We are giving it a max height here to the view that holds the DistanceMapView

App/src/components/DistanceRequest/DistanceRequestFooter.js

Lines 113 to 114 in 904cf56

	<View style={styles.mapViewContainer}>
	<DistanceMapView

App/src/styles/styles.ts

Lines 3848 to 3852 in 904cf56

	mapViewContainer: {
	...flex.flex1,
	minHeight: 300,
	maxHeight: 500,
	},

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

We should remove max height style we give to the view that holds the map view here

App/src/components/DistanceRequest/DistanceRequestFooter.js

Line 113 in 904cf56

<View style={styles.mapViewContainer}>

App/src/styles/styles.ts

Lines 3848 to 3852 in 904cf56

	mapViewContainer: {
	...flex.flex1,
	minHeight: 300,
	maxHeight: 500,
	},

mapViewContainer: {
            ...flex.flex1,
            minHeight: 300,
        },

What alternative solutions did you explore? (Optional)

[DylanDylann]

Proposal

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

Map area doesn't take up all available space

What is the root cause of that problem?

App/src/components/DistanceRequest/DistanceRequestFooter.js

Line 113 in b950c1e

<View style={styles.mapViewContainer}>

We are setting maxHeight: 500 to the map view

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

App/src/components/DistanceRequest/DistanceRequestFooter.js

Line 113 in b950c1e

<View style={styles.mapViewContainer}>

This View component is redundant. So I think we should remove this View Component here

App/src/components/DistanceRequest/DistanceRequestFooter.js

Line 113 in b950c1e

<View style={styles.mapViewContainer}>

and also remove styles.mapViewContainer to clean up the code base

What alternative solutions did you explore? (Optional)

NA

[ArekChr]

@DylanDylann I don't think mapViewContainer is redundant. We need min-height in case we have more stops

[ArekChr]

I think we can go with @FitseTLT proposal, he understood problem first and provided working solution.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @neil-marcellini is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[DylanDylann]

@ArekChr Let's see this case, the height still smaller than 300px