dashboard: handle too long vm name index

circle/dashboard/static/dashboard/dashboard.css

@@ -409,6 +409,8 @@ footer {
 footer a, footer a:hover, footer a:visited {                        
 footer a, footer a:hover, footer a:visited {                        
   color: white;                                                     
   color: white;                                                     
   text-decoration: underline;                                       
   text-decoration: underline;                                       
+}
+  
 .template-disk-list {
 .template-disk-list {
   list-style: none;
   list-style: none;
   padding-left: 0;
   padding-left: 0;
@@ -417,3 +419,16 @@ footer a, footer a:hover, footer a:visited {
 .template-disk-list li {
 .template-disk-list li {
   padding-bottom: 5px;
   padding-bottom: 5px;
 }
 }
+
+.index-vm-list-name {
+  display: inline-block; 
+  max-width: 70%; 
+  text-overflow: ellipsis; 
+  white-space: nowrap; 
+  overflow: hidden; 
+  float: left;
+}
+
+#dashboard-vm-list a small {
+  padding-left: 10px;
+}

circle/dashboard/templates/dashboard/index-vm.html

@@ -16,8 +16,11 @@
     <div id="dashboard-vm-list">
     <div id="dashboard-vm-list">
       {% for i in instances %}
       {% for i in instances %}
       <a href="{{ i.get_absolute_url }}" class="list-group-item">
       <a href="{{ i.get_absolute_url }}" class="list-group-item">
-        <i class="{{ i.get_status_icon }}" title="{{ i.get_status_display }}"></i> {{ i.name }}
-        <small class="text-muted">{{ i.primary_host.hostname }}</small>
+        <span class="index-vm-list-name">
+          <i class="{{ i.get_status_icon }}" title="{{ i.get_status_display }}"></i>
+          {{ i.name }}
+        </span>
+        <small class="text-muted"> {{ i.primary_host.hostname }}</small>
         <div class="pull-right dashboard-vm-favourite" data-vm="{{ i.pk }}">
         <div class="pull-right dashboard-vm-favourite" data-vm="{{ i.pk }}">
           {% if i.fav %}
           {% if i.fav %}
             <i class="icon-star text-primary title-favourite" title="{% trans "Unfavourite" %}"></i>
             <i class="icon-star text-primary title-favourite" title="{% trans "Unfavourite" %}"></i>
@@ -25,6 +28,7 @@
             <i class="icon-star-empty text-primary title-favourite" title="{% trans "Mark as favorite" %}"></i>
             <i class="icon-star-empty text-primary title-favourite" title="{% trans "Mark as favorite" %}"></i>
           {% endif %}
           {% endif %}
         </div>
         </div>
+      <div style="clear: both;"></div>
       </a>
       </a>
       {% endfor %}
       {% endfor %}
     </div>
     </div>