Terra-core: Terra-menu text truncated & line height

[noahbenham]

Issue Description

Terra-menu has a couple visual defects:

1. Setting contentWidth="auto" truncates text, as shown in the attached screenshot.
   

1. Blue_steel's menu options were much taller than terra-menu. We're concerned users may accidentally tap an incorrect option due to small menu heights. Is this best left to the consumer, or should this be addressed within Terra? See attached screenshot with fixed 160 width.

| Before | After |
|---|---|
| | |

1. Size for menu items on mobile is too small of a touch target and should look to make larger:
   

Issue Type

• [ ] New Feature
• [ ] Enhancement
• [x] Bug
• [ ] Other

Expected Behavior

1. contentWidth "auto" should flex based on text content and resize horizontally to support i18n'd text
2. Menu options should have increased line height

Current Behavior

N/A - see description

Steps to Reproduce

N/A

Environment

• Component Version: terra-menu 1.10.0
• Browser Name and Version: All; Chrome 63.0.3239.84 (Official Build) (64-bit)
• Operating System and version (desktop or mobile): All; macOS 10.12.6 (16G1036)

[jmsv6d]

@neilpfeiffer For this issue we need values for right margin and line height on menu items

[neilpfeiffer]

Modified issue to also add 3rd case. I'm working with Yudi to deterimine how menu on mobile (touch-detect + less than 1024px) should also grow line-height/touch area and we will provide needed design input.

[noahbenham]

I'm happy to contribute this back when you have design input, @neilpfeiffer. It'll block CONNECT-10805.

[neilpfeiffer]

@noahbenham that's what I was hoping - I'll get details ready for you to start on for next week.

[bjankord]

Talked with @neilpfeiffer, it sounds like he's reached out to you @noahbenham about a path forward on this you can implement in your app.