[NIFI-3159] Add ellipsis to long PG name in access policies shell

[scottyaslan]

Thank you for submitting a contribution to Apache NiFi.

In order to streamline the review of the contribution we ask you
to ensure the following steps have been taken:

For all changes:

• Is there a JIRA ticket associated with this PR? Is it referenced
  in the commit message?

• Does your PR title start with NIFI-XXXX where XXXX is the JIRA number you are trying to resolve? Pay particular attention to the hyphen "-" character.

• Has your PR been rebased against the latest commit within the target branch (typically master)?

• Is your initial contribution a single, squashed commit?

For code changes:

• Have you ensured that the full suite of tests is executed via mvn -Pcontrib-check clean install at the root nifi folder?
• Have you written or updated unit tests to verify your changes?
• If adding new dependencies to the code, are these dependencies licensed in a way that is compatible for inclusion under ASF 2.0?
• If applicable, have you updated the LICENSE file, including the main LICENSE file under nifi-assembly?
• If applicable, have you updated the NOTICE file, including the main NOTICE file found under nifi-assembly?
• If adding new Properties, have you added .displayName in addition to .name (programmatic access) for each of the new properties?

For documentation related changes:

• Have you ensured that format looks appropriate for the output in which it is rendered?

Note:

Please ensure that once the PR is submitted, you check travis-ci for build issues and submit an update to your PR as soon as possible.

[mcgilman]

Will review.

[mcgilman]

The alignment seemed a little off here. I believe that simplifying the styles to just use vertical-align is sufficient.

return $('<span>Showing effective policy inherited from Process Group </span>').append( $('<span class="link ellipsis" style="max-width: 200px; vertical-align: middle;"></span>')

Thoughts?

[scottyaslan]

Yea I see it....I was trying to get it to line up with the "Override this policy" text and with the with this vertical-align it is off. What do you think about keeping the vertical-align and adding

#override-policy-message {
float: left;
position: relative;
top: 1px;
}

[mcgilman]

I'm pretty sure that the div's (policy-message, new-policy-message, override-policy-message, and add-local-admin-message) already align. The only issue was the content of policy-message. Specifically, the styles in the ellipsis class causes the surrounding text to shift downwards. Setting the link to vertical-align: middle should address this.

[mcgilman]

Thanks @scottyaslan! This has been merged to master.