Improved display of the header bar

app/Template/header.php

@@ -20,7 +20,7 @@
             <?= $this->render('header/board_selector', array('board_selector' => $board_selector)) ?>
         <?php endif ?>
     </div>
-    <div class="menus-container pull-right">
+    <div class="menus-container">
         <?= $_top_right_corner ?>
     </div>
 </header>

assets/sass/_header.sass

@@ -2,35 +2,27 @@
 @import mixins
 
 header
-  @include grid(100)
+  display: flex
-  margin-top: 5px
+  flex-wrap: wrap
-  margin-bottom: 5px
+  padding: 5px 10px
+  margin-bottom: 10px
   border-bottom: 1px solid #dedede
-
+  background-color: #fbfbfb
-  .menus-container
-    @include grid_width(10/100)
-    @include md-device
-      @include grid_width(15/100)
-    @include sm-device
-      @include grid_width(1)
-      order: 1
-      margin-bottom: 5px
-      .header-creation-menu
-        display: none
-
-  .board-selector-container
-    @include grid_width(25/100)
-    @include md-device
-      @include grid_width(20/100)
-    @include sm-device
-      @include grid_width(1)
-      order: 2
 
   .title-container
-    @include grid_width(65/100)
+    flex: 1
-    @include sm-device
+    min-width: 320px
-      @include grid_width(1)
+
-      order: 3
+  .board-selector-container
+    min-width: 320px
+    display: flex
+    align-items: center
+
+  .menus-container
+    min-width: 120px
+    display: flex
+    align-items: center
+    justify-content: flex-end
 
   h1
     font-size: size('title')

assets/sass/_main.sass

@@ -0,0 +1,3 @@
+#main
+  padding-left: 10px
+  padding-right: 10px

assets/sass/_reset.sass

@@ -16,8 +16,6 @@ body
   font-size: 100%
 
 body
-  margin-left: 10px
-  margin-right: 10px
   padding-bottom: 10px
   color: color('primary')
   font-family: $text-font

assets/sass/_select_dropdown.sass

@@ -32,6 +32,7 @@
   position: relative
   border: 1px solid #ccc
   border-radius: 5px
+  background-color: #fff
   input.select-dropdown-input
     margin: 0 0 0 5px
     border: none

assets/sass/_tooltip.sass

@@ -45,8 +45,5 @@ div.ui-tooltip
 .ui-tooltip-content .markdown p
   margin-bottom: 0
 
-.ui-tooltip li
-  list-style-type: none
-
 .tooltip .fa-info-circle
   color: color('light')

assets/sass/app.sass

@@ -19,6 +19,7 @@
 @import pagination
 @import header
 @import logo
+@import main
 @import page_header
 @import sidebar
 @import avatar