webui: trim vm names only if necessary

fixes #102

one/static/style/box.less

@@ -168,9 +168,16 @@
             .actions {
             .actions {
                 display: block;
                 display: block;
             }
             }
-            .name .details {
-                display: inline;
-                border: none;
+            .name {
+                width: calc(~"100% - 200px");
+                span {
+                    width: calc(~"60% + 95px");
+                    max-width: calc(~"100% - 95px");
+                }
+                .details {
+                    display: block;
+                    border: none;
+                }
             }
             }
         }
         }
 
 
@@ -186,11 +193,20 @@
             z-index: 2;
             z-index: 2;
             position: relative;
             position: relative;
             height: 24px;
             height: 24px;
+            width: calc(~"100% - 90px");
+            span {
+                float: left;
+                text-overflow: ellipsis;
+                display: block;
+                white-space: nowrap;
+                overflow: hidden;
+            }
             &.filetype-new-folder {
             &.filetype-new-folder {
                 float: left;
                 float: left;
             }
             }
             .details {
             .details {
                 display: none;
                 display: none;
+                float: right;
             }
             }
         }
         }
         .status {
         .status {

one/templates/box/vm/summary.html

@@ -11,7 +11,7 @@
 
 
 {% block name %}
 {% block name %}
 <div class="name {% if vm.state == 'ACTIVE' %}vm-on{% else %}vm-off{% endif %}">
 <div class="name {% if vm.state == 'ACTIVE' %}vm-on{% else %}vm-off{% endif %}">
-    <span id="vm-{{vm.id}}-name">{{vm.name|truncatechars:20}}</span>
+    <span id="vm-{{vm.id}}-name">{{vm.name}}</span>
     <small id="vm-{{vm.id}}-name-details" class="details">
     <small id="vm-{{vm.id}}-name-details" class="details">
         (<a href="{{ vm.get_absolute_url }}" title="{{vm.name}}">{% trans "More details" %}</a>)
         (<a href="{{ vm.get_absolute_url }}" title="{{vm.name}}">{% trans "More details" %}</a>)
     </small>
     </small>