Fix due date alignment and chage header structure from bootstrap to flexbox

app/assets/stylesheets/my_modules/protocols/index.scss

@@ -15,26 +15,28 @@
 }
 
 .module-header {
-  padding-top: 15px !important;
+  display: inline-block;
+  position: relative;
+  width: 100%;
 
-  .first-row {
+  .header-container {
-    max-height: 40px;
+    display: flex;
+    flex-wrap: wrap;
+    float: left;
+    width: calc(100% - 180px);
 
-    .date-block {
+    .flex-block {
-      max-width: 250px;
+      display: flex;
+      flex-grow: 1;
     }
+  }
 
-    div {
+  .complete-button-container {
-      height: 45px;
+    float: right;
-    }
+    width: 165px;
 
-    .complete-button-container {
+    .my_module-state-buttons {
-      float: right;
+      padding-top: 0;
-      max-width: 165px;
-
-      .my_module-state-buttons {
-        padding-top: 0;
-      }
     }
   }
 
@@ -51,25 +53,42 @@
     padding-right: 5px;
 
     + .well-sm {
-      margin-left: 32px;
+      margin-bottom: 10px;
+      margin-left: 0;
     }
   }
 
+  .module-description {
+    float: left;
+    padding-left: 10px;
+    width: 100%;
+  }
+
   .module-tags {
+    float: left;
+    width: 100%;
+
+    #module-tags {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+    }
+
+    .badge-icon {
+      line-height: 32px;
+      padding: 0 5px 0 10px;
+    }
 
     .tags-title {
       line-height: 32px;
     }
 
-    .badge-icon {
-      line-height: 32px;
-      padding: 9px 5px 9px 10px;
-    }
-
     .select-container {
-      float: right;
+      display: flex;
+      flex-basis: 100px;
+      flex-grow: 1;
+      flex-shrink: 1;
       position: relative;
-      width: calc(100% - 35px);
 
       select {
         display: none;

app/views/my_modules/_module_header.html.erb

@@ -1,5 +1,5 @@
-<div class="row first-row">
+<div class="header-container">
-  <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 date-block">
+  <div class="flex-block date-block">
     <div class="badge-icon">
       <span class="fas fa-calendar-alt"></span>
     </div>
@@ -9,7 +9,7 @@
     </div>
   </div>
 
-  <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 help_tooltips date-block"
+  <div class="flex-block help_tooltips date-block"
        data-tooltiplink="<%= I18n.t('tooltips.link.task.due_date_specific') %>"
        data-tooltipcontent="<%= I18n.t('tooltips.text.task.due_date_specific') %>">
     <div class="badge-icon">
@@ -39,11 +39,9 @@
     </div>
   </div>
 
-  <div class="col-xs-6 col-sm-6 col-md-3  complete-button-container">
-    <%= render partial: "my_modules/state_buttons.html.erb" %>
-  </div>
 
-  <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
+
+  <div class="flex-block">
     <div class="badge-icon">
       <span class="fas fa-tachometer-alt"></span>
     </div>
@@ -55,20 +53,23 @@
     </div>
   </div>
 </div>
-<div class="row module-tags">
+
-  <div class="col-xs-12 col-sm-12 col-md-12" id="module-tags" data-module-tags-url="<%= my_module_my_module_tags_url(@my_module, format: :json) %>">
+<div class="complete-button-container">
+  <%= render partial: "my_modules/state_buttons.html.erb" %>
+</div>
+
+<div class="module-tags">
+  <div id="module-tags" data-module-tags-url="<%= my_module_my_module_tags_url(@my_module, format: :json) %>">
     <div class="badge-icon">
       <span class="fas fa-tags"></span>
     </div>
-    <div class="well well-sm">
+    <span class="hidden-xs hidden-sm tags-title"><%=t "my_modules.module_header.tags" %></span> 
-      <span class="hidden-xs hidden-sm tags-title"><%=t "my_modules.module_header.tags" %></span>
+    <%= render partial: "my_modules/tags", locals: { my_module: @my_module, editable: can_manage_module?(@my_module) } %>   
-      <%= render partial: "my_modules/tags", locals: { my_module: @my_module, editable: can_manage_module?(@my_module) } %>    
-    </div>
   </div>
 </div>
 
-<div class="row">
+
-  <div class="col-xs-12">
+<div class="module-description">
     <h4>
       <%= t('my_modules.module_header.description_label') %>
     </h4>
@@ -84,7 +85,6 @@
         <%= t('my_modules.module_header.no_description') %>
       <% end %>
     </div>
-  </div>
 </div>
 
 <!-- Edit description modal -->