Bug: Expenses tile - displayed expense word wrap and center alignment

[garanico]

Date Seen 9:30am 6/21/22

Versions Chrome Android emulator Develop branch

Bug Description

• Expense tile - the large expense number is word wrapping to a second line

• Expense tile - on web, the expense tiles are not centered within the container.

Steps to Reproduce

1. Run project on web and Android emulator
2. Log in to app
3. Add at least 3-4 expenses. The dollar amount for some of the expenses should be at least 4 digits (ex. $1000)

Actual Behavior

• Word wrap bug - the displayed expense is wrapping onto the next line

• center alignment bug - all expense tiles should be center aligned within the parent container

Expected Behavior

• Word wrap bug - the expense that is displayed will need to changed so that the number remains on one line
• Center alignment bug (seen in Chrome) - the expense tiles should be center aligned within the parent container

Troubleshooting/Testing Steps Attempted None

Workaround Not yet

[darlanebrown]

List Changes Introduced by this PR

• Item 1 removed or uncommented Expense card - // paddingHorizontal: 55,
• Item 2 removed the height on container from ExpenseCard. Replace it with width: width/2.5> 180? 180:width/2.5, and
• added Dimensions

Approach

• How does this change address the problem?
• deleted paddingHorizontal: 55, resolve the text amount.
• removed the height on container from ExpenseCard. Replace it with width: width/2.5> 180? 180:width/2.5, and added Dimensions

Learning Describe the research stage headache, was going to use React native SuperGrid

Links to blog posts, patterns, libraries or addons used to solve this problem import Dimensions

Closes #102