Refactoring .component to prevent weird wrapping issues

[rhamilto]

@sg00dwin, @spadgett, @benjaminapetersen, @jwforres, @ajacobs21e, please review.

i made quite a few tweaks. a few highlights:

• optimized existing responsive rules to be mobile first
• changed the .meta-data font size to 11px so it's the same size as .component-label so that they both sit on the same baseline
• changed the breakpoint where columns switch to rows from 768px to 992px so that the .meta-data only displays in the upper right of the box at medium and up sized screens
• fixed bug where .component h2 didn't truncate consistently (in most cases, the h2 would render full width)
• made each individual .port-mappings and .more-ports not wrap so all portions of each stay on the same line

Fixes #6189

[spadgett]

Visually, the changes look really good to me.

[spadgett]

Not sure if this is a new problem, but probably should get rid of the left margin when create route wraps this way.

[spadgett]

Looks like this introduced the extra margin at mobile widths.

[spadgett]

Just the one comment. The changes look really good otherwise. Good to see the wrapping problems fixed.

[spadgett]

If you add "Fixes #6189" in the description, Github will close the issue when this merges. Generally prefer it there to the title where it looks like the PR number.

[rhamilto]

Fixed the "Create route" issue and moved the issue number. Should be good now, @spadgett.

[spadgett]

LGTM [merge]

[openshift-bot]

continuous-integration/openshift-jenkins/merge SUCCESS (https://ci.openshift.redhat.com/jenkins/job/merge_pull_requests_origin/5018/) (Image: devenv-rhel7_3467)

[openshift-bot]

Evaluated for origin merge up to 43f7610

[openshift-bot]

[Test]ing while waiting on the merge queue

[openshift-bot]

Evaluated for origin test up to 43f7610

[openshift-bot]

continuous-integration/openshift-jenkins/test FAILURE (https://ci.openshift.redhat.com/jenkins/job/test_pr_origin/1317/)