Fix overflow on charm name.

Fix overflow on charm name.

The sections in the charm search results pane are fixed at 70px high.
Due to the way we construct the name, and the fact the charm authors
can set the name to be anything they want, some names exceed the
allotted one-line and wreak havoc on the layout.

Obvious lesson learned: any element with a fixed height and
user-supplied data must account for overflow.

The deploy button placement was also fixed.

Matt C. has seen screenshots of the truncation and offered tweaks on
the vertical spacing which are incorporated here.

https://code.launchpad.net/~bac/juju-gui/charm-spill/+merge/134961

(do not edit description out of merge proposal)

[bac, 2012-11-19 16:35:31]

Please take a look.

[bac, 2012-11-19 16:42:19]

Please take a look.

[matthew.scott, 2012-11-19 17:06:44]

Looks good and works well.  Thanks Brad, +1

https://codereview.appspot.com/6843082/diff/2001/app/templates/charm-search-r...
File app/templates/charm-search-result.handlebars (right):

https://codereview.appspot.com/6843082/diff/2001/app/templates/charm-search-r...
app/templates/charm-search-result.handlebars:12: {{! It is is important that the
following 'href' line not be
Thanks for the comment (and for showing how to do comments in templates!)

[thiago, 2012-11-19 17:35:08]

Thanks bac. It looks good.
I have just a minor comment. But I think it is out of the scope of this card.

[]s,
Thiago.

https://codereview.appspot.com/6843082/diff/2001/app/templates/charm-search-r...
File app/templates/charm-search-result.handlebars (right):

https://codereview.appspot.com/6843082/diff/2001/app/templates/charm-search-r...
app/templates/charm-search-result.handlebars:15: <a class="charm-detail"
It is out of the scope of this card but IMO you could add a tooltip with the
complete charm name (no elipsis) if possible.

[bac, 2012-11-20 11:49:08]

Thanks for the reviews

https://codereview.appspot.com/6843082/diff/2001/app/templates/charm-search-r...
File app/templates/charm-search-result.handlebars (right):

https://codereview.appspot.com/6843082/diff/2001/app/templates/charm-search-r...
app/templates/charm-search-result.handlebars:15: <a class="charm-detail"
On 2012/11/19 17:35:08, thiago wrote:
> It is out of the scope of this card but IMO you could add a tooltip with the
> complete charm name (no elipsis) if possible.

I've made that suggestion to Matt C. but we have not decided to go that route
yet.  I think it may be something we do soon but I'm waiting for him to decide.

[bac, 2012-11-20 12:08:20]

*** Submitted:

Fix overflow on charm name.

The sections in the charm search results pane are fixed at 70px high.
Due to the way we construct the name, and the fact the charm authors
can set the name to be anything they want, some names exceed the
allotted one-line and wreak havoc on the layout.

Obvious lesson learned: any element with a fixed height and
user-supplied data must account for overflow.

The deploy button placement was also fixed.

Matt C. has seen screenshots of the truncation and offered tweaks on
the vertical spacing which are incorporated here.

R=matthew.scott, thiago
CC=
https://codereview.appspot.com/6843082