Fix dashboard module buttons mobile misplacement

jet/dashboard/templates/jet.dashboard/module.html

@@ -3,6 +3,13 @@
 <div class="dashboard-item{% if module.collapsible %} collapsible{% endif %}{% if module.model.collapsed %} collapsed{% endif %}{% if module.deletable %} deletable{% endif %}{% if module.ajax_load %} ajax{% endif %}"{% if module.ajax_load %} data-ajax-url="{% url "jet-dashboard:load_dashboard_module" pk=module.model.id %}"{% endif %} data-module-id="{{ module.model.id }}">
     <div class="dashboard-item-header">
         <span class="dashboard-item-header-drag icon-grid"></span>
+        <span class="dashboard-item-header-buttons">
+            <a href="{% url "jet-dashboard:update_module" pk=module.model.id %}" title="{% trans "Change" %}"><span class="icon-edit"></span></a>
+
+            {% if module.deletable %}
+                <a href="#" title="{% trans "Delete" %}" class="dashboard-item-remove"><span class="icon-cross"></span></a>
+            {% endif %}
+        </span>
         <span class="dashboard-item-header-title">
             {% if module.collapsible %}
                 <a href="#" class="dashboard-item-collapse"><span class="dashboard-item-header-collapse-button icon-arrow-down"></span></a>
@@ -14,15 +21,8 @@
             {% else %}
                 {{ module.title }}
             {% endif %}
-
-            <span class="dashboard-item-header-buttons">
-                <a href="{% url "jet-dashboard:update_module" pk=module.model.id %}" title="{% trans "Change" %}"><span class="icon-edit"></span></a>
-
-                {% if module.deletable %}
-                    <a href="#" title="{% trans "Delete" %}" class="dashboard-item-remove"><span class="icon-cross"></span></a>
-                {% endif %}
-            </span>
         </span>
+        <div class="cf"></div>
     </div>
 
     <div class="dashboard-item-content{% if module.contrast %} contrast{% endif %}"{% if module.style %} style="{{ module.style }}"{% endif %}>

jet/static/jet/css/_dashboard.scss

@@ -210,15 +210,20 @@ ul.actionlist li {
       padding: 0 10px 0 6px;
 
       &-title {
+        display: block;
         font-size: 11px;
         font-weight: bold;
         text-transform: uppercase;
         line-height: 30px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       &-drag {
         float: right;
         line-height: 30px !important;
+        margin-left: 10px;
 
         html.touchevents & {
           display: none;
@@ -232,14 +237,19 @@ ul.actionlist li {
       }
 
       &-buttons {
+        float: right;
         margin-left: 10px;
         font-size: 13px;
+        line-height: 30px;
         vertical-align: middle;
         visibility: hidden;
 
+        a {
+          vertical-align: middle;
+        }
+
         html.touchevents & {
           visibility: visible;
-          float: right;
         }
       }