Merge pull request #4203 from mfilser/fix_list_header_title_overlap

List title doesn't overlap with hamburger menu anymore

client/components/lists/list.styl

@@ -85,11 +85,7 @@
     color: #a6a6a6
 
   .list-header-menu
-    position: absolute
-    padding: 27px 19px
-    margin-top: 1px
-    top: -7px
-    right: 3px
+    float: right
 
   .list-header-plus-top
     color: #a6a6a6
@@ -100,7 +96,8 @@
 
   .cardCount
     color: #8c8c8c
-    font-size: 0.8em
+    font-size: 12px
+    font-weight: bold
 
 .list-header .list-header-plus-top, .js-open-list-menu, .list-header-menu a
     color #4d4d4d
@@ -160,18 +157,6 @@
     float: left
 
 @media screen and (max-width: 800px)
-  .list-header-menu
-    position: absolute
-    padding: 27px 19px
-    margin-top: 1px
-    top: -7px
-    margin-right: 7px
-    right: -3px
-
-  .list-header
-    .list-header-name
-      margin-left: 1.4rem
-
   .mini-list
     flex: 0 0 60px
     height: auto
@@ -215,7 +200,6 @@
     display: flex
     align-items: center
     .list-header-left-icon
-      display: inline
       padding: 7px
       padding-right: 27px
       margin-top: 1px
@@ -238,6 +222,30 @@
       right: 10px
       font-size: 24px
 
+  .list-header
+    display: grid
+    grid-template-columns: 30px 5fr 1fr
+    .list-header-left-icon
+      display: grid
+      grid-row: 1/3
+      grid-column: 1
+    .list-header-name
+      grid-row: 1
+      grid-column: 2
+      align-self: end
+    .cardCount
+      grid-row: 2
+      grid-column: 2
+      align-self: start
+    .list-header-menu
+      grid-row: 1/3
+      grid-column: 3
+    .inlined-form
+      grid-row: 1/3
+      grid-column: 1/4
+    .edit-controls
+      align-items: initial
+
 .link-board-wrapper
   display: flex
   align-items: baseline

client/components/lists/listHeader.jade

@@ -18,9 +18,9 @@ template(name="listHeader")
          span(class="{{#if exceededWipLimit}}highlight{{/if}}") {{cards.count}}
          |/#{wipLimit.value})
 
-        if showCardsCountForList cards.count
-          | 
-          span(class="cardCount") {{cardsCount}} {{cardsCountForListIsOne cards.count}}
+      if showCardsCountForList cards.count
+        span.cardCount {{cardsCount}} {{cardsCountForListIsOne cards.count}}
+
       if isMiniScreen
         if currentList
           if isWatching